How To Create Latest Posts Using GenerateBlocks?

If you want to show your most recent posts on a WordPress site, then you will have to create a latest post section. In this article we are going to see how one can create latest posts using GenerateBlocks plugin?

Mostly, you get to see these sections on the homepage of a site or in a sidebar as a widget.

Whether you see it on a home (front) page or a sidebar, the technique of creating a latest post section is the same. Especially, after the GenerateBlocks 1.5 update it is now possible to create this with the free version of the plugin.

Consider this post as one of GenerateBlocks tutorial.

Displaying latest posts always helps your readers in learning about new content from your site. It also helps to keep your visitors actively engaged with your newer posts. As a result, giving good SEO signals to the search engine.

Why Create A Latest Posts Section?

Latest posts are equally important as older posts and/or evergreen posts.

Posts that are a little older, or have very high value retention for users in an industry, often get a good amount of traffic.

As a content creator or a website owner, you also want your latest content to get almost similar level of traffic. Creating the latest post section helps your users in identifying the most recent written posts. Giving them a chance to click and read them.

This technique helps in bringing traffic to those posts that are yet to land on the high rankings of the SERP.

Absorbing more and more content from you helps in building trust between you and your reader. Your readers will start commenting on your posts, and eventually might even sign up for your newsletter.

Plus, some premium WordPress themes like GeneratePress do not come with this feature. We understand that their developers do not want to bloat their themes with lots of features.

However, the GP premium (GeneratePress premium) gives you a feature called as Elements, that lets you build anything on your site.

Note:- We will be using GeneratePress Elements to create our latest posts section.

Before we learn how to create latest posts using GenerateBlocks, let us understand why we need GenerateBlocks and what are the limitations in using the core Gutenberg latest post block.

Gutenberg Latest Posts Block vs GenerateBlocks

Gutenberg has a latest post block. It is a simple and straightforward block with very limited customization options.

Gutenberg Latest Posts Block

wordpress latest posts block

Available under the Widget section of Gutenberg blocks, on the left hand-side of your editor.

Following the basic querying mechanism of your most recent posts on your WordPress site, this block offers the number of posts to display settings, and most importantly, number of columns to display.

As soon as you select the core latest posts block, you will see something like this;

Using Core Latest Posts Block (Without Customization)

Now, this result in its own way fulfills the feature of keeping a latest post section on your site. But, gives a very bland look, especially if it’s used on a homepage.

It misses featured image thumbnail, post author, date posted, etc. Well, some basic customization is available. But that’s it.

Let’s take a look.

gutenberg latest posts block with settings
Gutenberg Latest Post Block Customized

This is by far the core block can get customized.

There is a huge lack of spacing options like margins, padding, gutter width. Aligning post title, other typography and color settings must be done via custom CSS.

Plus, there isn’t any option for changing background color. That’s a must if you want to make the section appear differently, pulling the user’s attention while browsing your site.

If you are using a particular theme of keeping a few pixels of border radius and box shadow to all your images on the site, then setting must be done via custom CSS as well.

Examples of Latest Posts Using GenerateBlocks

On the other hand, GenerateBlocks lets you create your own stylized latest post section.

latest post section created by generateblocks, on bloggingidol

A simple latest posts section with 6 posts showing featured image thumbnails with border radius and post titles aligned in the center.

Plus, a Browse More link that takes you to the site’s main Blog Page.

Generally, theme creators do not give this type of feature or addon in thier theme. For example, I never got this extension with GeneratePress.

Hence, I created latest posts in GeneratePress theme and displayed the section on my website’s homepage.

The next example is a little complex section. Holding a two column grid with a latest post in the left container. Followed by, remaining posts in order, within the right container.

Notice the post title’s horizontal and vertical center alignment with post thumbnails.

Plus, a View All Articles link that takes the visitor to this site’s Blog Page.

Create Latest Posts Using GenerateBlocks

Remember how we created related posts using GenerateBlocks. Similarly, we need to create a GeneratePress Block Element and then use GenerateBlocks to add the Query Loop Block, which does all the querying of recent posts.

Finally, styling the Post Template itself using Spacing, Typography, Colors, and Dynamic Data customization options available in GenerateBlocks.

To put it briefly, we will try to achieve the following result.

A beatiuful card-based 3-column grid, with enough gutter-width to showcase the box- shadow around the cards.

Step 1: Create A GeneratePress Block Element & Apply Hook

To create a GeneratePress Block Element, go to your WordPress Dashboard, hover your mouse on Appearance, and click on Elements.

From there, click on Add New Element, and select Block from the drop-down list.

Set Editor Width according to your site container (optional).

Select Element Type as Hook. Finally, set the appropriate hook. Let us say you need this on the homepage before the footer section.

For that area, you’d need to select ‘generate_before_footer’ hook.

Step 2: Add A GenerateBlocks Container Block

To design your latests posts section, start by adding a GenerateBlocks Container Block. Set container layout as Full Width or Contained Width, depending on your home page’s layout.

Follow it up, by adding a GenerateBlocks Headline Block with the name ‘Latest Posts’. Make sure the heading is with an H2 tag name.

I have aligned the headline block to the center. You can keep it left aligned.

Step 3: Select GenerateBlocks Query Loop Block

Within that main Container Block, add a new block called GenerateBlocks Query Loop Block, and start with a Two Columns & Featured Image Layout.

two columns & featured image query loop layout to create latest posts using generateblocks

Once selected, you will see a section something like this.

generateblocks two column and featured image query loop result

You get a the post featured image, post title, post date, excerpt, a read more link, with 10 posts per page (by default) in this query loop.

Step 4: Customize GenerateBlocks Query Loop Posts Per Page

By default, the Query Loop Block in GenerateBlocks displays 10 posts per page. Meaning, in query loop section.

We are going to bring it down to 3 posts per page. You can keep 6, in two rows or 4 in one single row.

Under the List View, click on Query Loop Block and on the right side reduce the number of posts to 3 posts per page.

Changing Number Of Posts Per Page In GenerateBlocks Query Loop

Remember from our previous step, the Post Template layout will display only 2 columns in a row. Therefore, that has to change.

Step 5: Changing Post Template Layout

Click on the Query Loop Block and that will drop down to show you a Grid Block.

Note:- The beauty of GenerateBlocks Query Loop Block is that, these blocks are all pre-made for you.

Drop down the Grid Block and click on Post Template Block. This is the GenerateBlocks Query Loop Post Template Block.

Change the layout from 50% to 33.33% converting a two column grid to a three column one.

changing post template layout in generateblocks query loop

This will result into something like this.

From now on we have to perform all the major design customization steps.

Step 6: Remove Default GenerateBlocks Query Loop Post Template Padding

The GenerateBlocks Query Loop Block comes with a default Post Template that has already got some pre-applied styles like padding, typography, background color.

changed query loop post template padding to 0

You need to remove the Post Template’s default overall padding of 20 pixels. In order to later on give your own custom paddings and margins.

Notice the crisp edges of the image thumbnails.

Note:- This padding was applicable on every element within the Post Template.

Step 7: Add 3 New Container Blocks

To fit the Post Title, Author Information, Post Date, Post Category, and View Post/Read More Button, we need to add 3 GenerateBlocks Container Blocks under the Post Template.

Remove Post Title, Post Date & Post Excerpt from the existing Post Template.

Replace them with 3 new Container Blocks.

We did this for two reasons.

  1. For gaining total control over spcing options for all the elements
  2. In our experiment, each row has a 2 column grid within the cards

To avoid further confusion, I am going to give ids to the three main containers.

  • First Container Under Post Template – ID = 1st Con
  • Second Container UNder Post Template – ID = 2nd Con
  • Third Container UNder Post Template – ID = 3rd Con

Note:- To define custom name (give ID) to each container, go to HTML Anchor and define custom name.

Step 8: Add Post Title To 1st Container Of Query Block’s Post Template

This activity is done dynamically, you do not have to do this for all the three column cards.

Click on the first container, from the one created in the previous step and add a GenerateBlocks Headline Block, change the text alignment to center, and change the heading tag name to H3.

adding post title to generateblocks query loop post template

Since, the heading of this section has already got ‘Latest Posts’ as a H2 tag, it is a good UI practice to change the post titles from H2 to H3.

Now, we will need to add Dynamic Data to our Post Title and customize its typography and bottom margin.

customizing typography, dynamic data, and bottom margin of post title

Finally, you need to add overall padding of 10 pixels to the post title’s container block.

Step 9: Add Post Author & Post Date To 2nd Container

Click on the 2nd Container block (of the post template) and add a Grid Block of 2-column layout.

This will automatically create 2 container blocks within the grid.

In the first container of the grid, add a Headline Block, and change the tag name to Paragraph.

add post author in query loop by using dynamic options
Dynamic Options To Add Post Author & Link It To Author Archives

Customize Dynamic Options of the headline block to set Post Author, apply Author Archives link and change font size.

In the second container block of the grid, add another headline block and set the alignment to the right.

Change its tag name to Paragraph, font size to 18 pixels, and enable Dynamic Data on the left hand-side.

pull current post date by applying dynamic data in query loop for latest posts using generateblocks

Under Dynamic Data settings, leave the Data Source to Current Post, change the Content Source to Post Date, and leave the Date Type as Published.

generateblocks query block's post template's container padding

Finally, customize the overall padding of the Post Template’s 2nd container block.

Step 10: Add Post Category & View Post Button To Latest Posts Section

Just like the previous step, similarly add a Generatelocks Grid Block of two columns, to the Post Template’s 3rd Container.

Under the Grid Block’s first container, add a Headline Block and change the tag name to Paragraph, change font size to 18 pixels.

At first, enable Dynamic Data. From then on, leave Data Source to Current Post, change Content Source to List of Terms, select Categories as Taxonomy, and finally for Link Source select Term Archives.

Under the List View, this Headline Block will now be displayed as List of Terms Block.

Enabling dynamic data will call the appropriate category name, linking to their main category pages.

For adding an Icon before the category name, copy the below SVG code and paste into Icon field.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 7v13h-20v-10h5.262c2.169 0 3.417-.944 5.812-3h8.926zm2-2h-11.668c-2.659 2.292-3.512 3-5.07 3h-7.262v14h24v-17zm-16.738 1c.64 0 1.11-.271 2.389-1.34l-2.651-2.66h-7v4h7.262z"></path></svg>

For the next container in the grid block, choose the GenerateBlocks Buttons Block.

Click on the main button container, and change alignment to right.

Replace default text to Read More or View Post, change typography font size to 18 pixels, and change font style to Italics.

Enable Dynamic Data to the GenerateBlocks Button Block.

Beginning with, Data Source as Current Post, and finally select Link Source as Single Post.

As soon as do this, the Button Block will display name as Single Post.

Also, change the padding around the text of the button.

Finally, give overall padding of 10 pixels to the 3rd Container of the Post Template.

Step 11: Remove Background & Apply Box Shadow Custom CSS

If you were working with the GenerateBlocks Pro version then you’d have a choice to choose between entire query loop block pre-made section that shows latest posts or simply customize box shadow from GenerateBlocks Effects.

generateblocks pro pre-made template library query loop styles
GenerateBlocks Pro Pattern Library – Query Loop Styles

But, that is not the case. This post is specifically made for users that are using the free version of GB, and want to create latest posts using GenerateBlocks.

For removing the background from the Post Template, open List View and click on Post Template. Under Colors, clear the background color.

Now, add the following Custom CSS code to your Additional CSS section, in the theme customizer.

.post_template{
	-webkit-box-sizing: border-box;   box-sizing: border-box;
  box-shadow: rgba(23, 43, 99, .4) 0 5px 20px!important;
	border-radius: 8px;
	overflow: hidden;
	}

Here, the custom CSS class (user-defined) is post_template. Add this class to Additional CSS Classes under the Advanced section.

Step 12: Apply Gutter Width To Your Card-Based Latest Posts Section

This is the final customization step where you give some touch-up to your already created latest posts section.

In the previous step we added custom CSS that had a webkit box and box shadow on all the four sides of the card.

For the effect to show its true appeal, you will need to create space between the actual cards.

That is done by increasing gutter-width. Here in GenerateBlocks, simply click on Post Template and add 20 pixels to right margin and left margin.

Note:- Visitors need to check other posts as well. Therefore, add a Headline Block in the end with a link to your Blog Page.

Step 13: Apply Display Location To Your Block Element

After creating this section, you will need to apply a display location to your block element.

I wanted to showcase this on my site’s home page. Therefore, I chose location as Front Page.

latest posts display location in generatepress

You can add this anywhere you want.

Summary – Latest Posts Using GenerateBlocks

Now, you can check the final result on your website’s home page. It should look something like this.

final result of latest posts section on generatepress
A Latest Posts Section Using GenerateBlocks Free Version

Below, is the image of the List View showing all the blocks from GenerateBlocks required in creating the latest posts section.

all blocks used in creating latest posts section

This is totally for your reference. Since, GB is so flexible, you can create latest posts using GenerateBlocks in your own way. For example, you can write some CSS codes to create overlay and hover effects for every card.

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

Leave a Comment