Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Make up “Latest Posts” within the sidebar

  • Hi, I would like to make up the latest post widget within the sidebar like the image I attached. It should display a tiny featured image as well. I just want to make it looking “prettier” (my site) (like it should be)

    Thank you guys!


  • Hi Tom,

    You are using the WP latest posts block which we do not have control over, unfortunately.

    And I don’t think there’s an option to add the featured image.

    If you have GenreateBlocks plugin, you can use the query loop block and we will be happy to assist you in achieving the layout.

  • I do have that Plugin installed already. Can you please guide me? 🙂

  • Hi there,

    to save some time, create a new draft page.
    In the editor Top Bar, 3 dot menu, select the Code editor view.

    Copy and Paste in this code:

    <!-- wp:generateblocks/query-loop {"uniqueId":"bbb96b2e","query":{"post_type":"post","per_page":"3","offset":""}} -->
    <!-- wp:generateblocks/grid {"uniqueId":"ae4a818a","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} -->
    <!-- wp:generateblocks/container {"uniqueId":"a5958d80","isGrid":true,"isQueryLoopItem":true,"gridId":"ae4a818a","isDynamic":true,"blockVersion":4,"display":"flex","columnGap":"10px","sizing":{"width":"100%","widthTablet":"100%","widthMobile":"100%","height":"100%","maxWidth":""},"spacing":{"paddingBottom":"","paddingBottomMobile":"15px","marginBottomMobile":"0px"},"borders":{"borderBottomWidth":"1px","borderBottomStyle":"solid","borderBottomColor":"#b2b2be"},"lock":{"remove":true,"move":true}} -->
    <!-- wp:generateblocks/container {"uniqueId":"a7581b45","isDynamic":true,"blockVersion":4,"flexShrink":0,"flexBasis":"120px"} -->
    <!-- wp:generateblocks/image {"uniqueId":"a77e6df6","sizeSlug":"medium","widthMobile":"100px","heightMobile":"100px","blockVersion":2,"borders":{"borderTopRightRadius":"0px","borderBottomRightRadius":"0px","borderBottomLeftRadius":"0px","borderTopLeftRadius":"0px"},"useDynamicData":true,"dynamicContentType":"featured-image","dynamicLinkType":"single-post"} /-->
    <!-- /wp:generateblocks/container -->
    <!-- wp:generateblocks/container {"uniqueId":"5a1f7f02","isDynamic":true,"blockVersion":4} -->
    <!-- wp:generateblocks/headline {"uniqueId":"23a64d89","blockVersion":3,"typography":{"fontSize":"20px","fontSizeMobile":"16px"},"spacing":{"marginBottom":"6px","marginBottomMobile":"4px"},"linkColor":"#222222","linkColorHover":"#1e73be","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
    <h2 class="gb-headline gb-headline-23a64d89 gb-headline-text"></h2>
    <!-- /wp:generateblocks/headline -->
    <!-- wp:generateblocks/button {"uniqueId":"59a4d11a","hasUrl":false,"blockVersion":4,"display":"inline-flex","alignItems":"center","justifyContent":"center","typography":{"fontSize":"12px","textAlign":"center"},"spacing":{"paddingTop":"2px","paddingRight":"4px","paddingBottom":"2px","paddingLeft":"4px","marginRight":"4px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","useDynamicData":true,"dynamicContentType":"terms","dynamicLinkType":"term-archives","termTaxonomy":"category"} -->
    <span class="gb-button gb-button-59a4d11a gb-button-text">Button</span>
    <!-- /wp:generateblocks/button -->
    <!-- /wp:generateblocks/container -->
    <!-- /wp:generateblocks/container -->
    <!-- /wp:generateblocks/grid -->
    <!-- /wp:generateblocks/query-loop -->

    Switch back to Visual editor.

    Now you can select the Query Loop block that added and copy and paste it to where you require.
    With the Query Loop block selected you can edits block setting ( sidebar ) Paramters, currently its set to show 3 of the latest posts.

  • Thanks a bunch David, that worked out well! 🙂

  • Hi again,

    I realized that when I am using the search bar the latest 5 posts/articles will be shown as 2 columns….

  • Edit the Query Loop Block.
    Inside you will find a Grid Block, select the Post Template block that is inside that.
    In Layout -> Flex Child set the BASIS to 100%

  • Thats set to 100 PX – type 100%

  • Can you try clearing your plugin caches, as i see it working if i disable the cache on the frontend

  • Hi David,

    I cleared the plugin caches. I guess it has something to do with the search bar and category pages as it works on regular posts. -> not showing correctly -> not showing correctly -> working fine

  • I’m still seeing the flex-basis being set to 100px instead of 100%:

    Can you make sure the cache is cleared?

  • Hi Ying,

    thanks for reaching out.
    Now I switched tablet and mobile flex-basis settings also to 100% and there is no change at all. Checking in 2 different browser and cleared the cache….

  • I am still seeing the flex-basis being set to 100px, please make sure all cache is cleared including server cache. And you can also try disabling your cache plugin.

  • Hi Ying,

    I really don’t know what to do anymore. Now I even disabled the caching plugin. I logged into wordpress from my phone and it says that flex basis is being set to 100%.
    Probably I am within the wrong settings or something else as I am having a hard time to figure it out :/

Viewing 16 posts - 1 through 16 (of 29 total)
  • You must be logged in to reply to this topic.