Blog posts are usually displayed on a WordPress website either on the homepage or on a separate blog page if that’s been specified in the site’s setttings. WordPress also creates archive pages for categories and tags.
Some themes provide options so that you can control the layout and appearance of the blog and archive pages. For example, GeneratePress Premium has a blog add-on with lots of settings. GP Premium also includes advanced features enabling you to use the Block Editor to design archive pages – see the YouTube Video “GeneratePress – Block Element Content Template Demo“.
However, sometimes people want to show some of their posts within the body of another page of the website, or in a widget area.
I feel that in general it’s best to use core WordPress blocks when they are sufficient for my purposes and to install plugins only when they add extra features. There are a couple of core blocks that could be used to display posts i.e. the Latest Posts block and the Query Loop block.
I wanted to try out these core blocks and also investigate some third party solutions. This exercise looks at some of the different options, but of course, there are numerous other plugins which do a similar job:
The Latest Posts Block
This block does have its limitations, but it could be a good solution where a simple list of recent posts, or posts in a certain category, is all that is required. It has the advantage of being built into WordPress so that it’s not necessary to install a plugin to use it.
Posts With a Certain Category
I noticed that I could select posts with a particular category, but not with a certain tag.
I could display the posts in a list, or a grid of two or three columns.
I inserted a Heading block and added a bit of custom CSS code.
.wp-block-latest-posts li {background-color: #FAE1E8; text-align: center; padding: 24px;}
I was able to set the block to display a 14 word long excerpt.
The “Read More” button was added by my theme, GeneratePress, but I could have removed it in the customiser if I wanted to do so.
I could have chosen to show the full post, rather than an excerpt, but I was disconcerted to find that if my post contained a More block, this was ignored and the entire post was shown, and not just the bit before the More block.
Unsurprisingly, this rather basic block did not include more advanced options. It works only with posts, not pages or custom post types, but it’s worth considering if all you need is a simple list of the most recent posts, or posts in a particular category or by a particular author.
The Query Loop Block
This block was new in WordPress 5.8. The WordPress support article says “You can think of it as a more complex and powerful Latest Posts Block.”
It comes with a number of patterns but I decided to start with a blank template.
This wasn’t really blank as the next step was to pick a variation which included the title and some other optional items.
I started with the “Image, Date, and Title” variation and changed it to a Grid, then removed the Post Date and Pagination.
I set the Query Loop to display three posts (using the filter icon to the left of the list and grid icons) and to choose those which had a tag of “featured”.
I needed to change the block settings for both the featured image and the post title to make them both link to the post, but this was straightforward.
I added a Post Excerpt block within the Query Loop block. Then I selected the Post Featured Image, Post Title and Post Excerpt and transformed these to a Group.
Next, I changed the background colour of the Group block.
Interestingly, when I experimented, I found that the excerpt continued as far as either the post’s More block, or the excerpt length I had set in the Customiser, whichever came first. Note that not all themes will have this option in the Customiser (I’m using GeneratePress Premium). I was suprised to find that the Query Loop block itself does not appear to have an option for setting the excerpt length.
If I included the Post Content, rather than the Post Excerpt, within the Post Template Block then the content of each post was displayed in full up to the More block, if the post contained one.
I found that I was able to select posts based on category, tag, author, keyword or custom taxonomy, and display them in ascending or descending order of date or title.
Editing the Post Template
It’s possible to add various other blocks to the Post Template, such as Separator blocks, Spacer Blocks, Row Blocks, Post Tags, etc. The template approach also enables me to do things such as changing text size and colour.
A Newspaper Layout
Because more than one Query Loop block can be included on a page, a newspaper or magazine type of layout could be built using a number of blocks.
In the example below, I’ve used GenerateBlocks Container and Grid blocks to create a layout and then add three different Query Loop blocks. The first Grid item holds a Query block that displays the most recent post (“Blue Flowers”). The final Grid item (the bottom section) contains another Query block which uses offset to skip the first post and display the next four posts (“Ladybirds”, “Blue Tit”, “Sparrow” and “Hedgerow”). The section on the right is actually the second Grid item which uses the offset feature to skip the most recent five posts, and display the next four (“Fern”, “Beetle”, “Bee” and “Robin”).
Alternatively, I could have put different categories in the different areas of the layout.
Jamie Marsland has a YouTube video that demonstrates how to do something similar with the Query Loop block, although he uses core WordPress Group and Column blocks, rather than GenerateBlocks – “Create a Magazine Layout with the WordPress Gutenberg Block Editor“.
This method could also be used with any of the plugins I look at below, if they have an offset feature, or enable you to select posts based on category, if that’s what you require.
Custom Post Types
Query Loop blocks can display custom post types as well as posts and pages. To demonstrate this, I used the free Pods plugin to create a very simple custom post type called “Town”.
I was able to display my Town custom post type with a Query Loop block and could choose to select the posts based on my custom taxonomy (county).
I wasn’t sure that I would be able to display the custom taxonomy value, but adding a Pods Field Value block into the Post Template seemed to work.
GenerateBlocks – Query Loop
For the last few years, whenever I’ve wanted to display a list of selected posts on a WordPress page or post, I’ve turned to the WP Show Posts plugin by Tom Usborne, the GeneratePress developer.
However, in December 2021 it was announced that WP Show Posts would be merging with GenerateBlocks. This has now happened, as explained in the GenerateBlocks post “GenerateBlocks 1.5 – Dynamic Data, Query Loops, & Image Blocks“.
I recommend this video by WPTuts to give an overview of what can be achieved with the GenerateBlocks version of the Query Loop block: “Powerful & FREE New Features GeneratePress & GenerateBlocks“.
The Pattern Library
A quick way to add a GenerateBlocks layout is to copy and paste from the Patterns Library, which includes both free and pro patterns.
Once the pattern has been pasted into your page, you are free to edit it to add, remove, or customise items.
Reverse engineering the patterns to see how they have been built is also a great way to learn.
Of course, it’s not necessary to start with a pattern from the library, so I went on to try building a layout myself.
Posts With a Certain Tag
Inserting a new GenerateBlocks Query Loop block gave me several options as a starting point, and I chose to use the one described as “Two columns & featured image”.
If all that’s required is a simple list of recent posts, then there’s no need to do any more, but there is a lot of scope for customising the output to meet your exact requirements.
The GenerateBlocks Query Loop contains a Grid block, and this is what is used to set the number of columns. Unlike the core block, the GenerateBlocks version gives you control over how many columns can fit on desktop, tablet and mobile screens.
I set the featured images to link to the posts.
In order to show just the latest 3 featured posts, I first set the number of posts to 3 and then selected posts with the “featured” tag by adding the tag taxonomy as a parameter.
Adding Parameters appears to be the way that the output is controlled. It’s how I could choose to include/exclude certain posts (based on a combination of category, tag, custom taxonomy, status, author, parent, date, individual post, or keyword search) and to determine their order (ascending/descending based on date, modified date, title, author, etc).
Unlike the core Query Loop block, the GenerateBlocks version allowed me to specify the excerpt length, and the post content was displayed up to either this number of words, or the More block, if there was one. Note that if I’d wanted to show the entire post, I could have used the core Post Content block.
Because the contents of the Query Loop block are GenerateBlocks Grid, Container, Image and Headline blocks, it’s easy to customise their appearance. For example I could change the background colour and the border radius and add an icon.
As with the core Post Template block, the GenerateBlocks version would allow me to add other blocks, such as Separator blocks, Spacer Blocks etc.
It’s also possible to use dynamic data to set the background of the Post Template to be each post’s featured image. This can be done with the free version of GenerateBlocks, but you’d need the Pro version to link the whole box (as opposed to just the Post Title) to a post.
A Newspaper Layout
Since the GenerateBlocks version of the Query Loop block has an offset feature, I could use exactly the same method as before to create a newspaper type of layout.
The offset parameter was added in the same way that I added the tag taxonomy parameter earlier.
Custom Post Types
Displaying my custom post type, “towns” and selecting posts based on the custom taxonomy of “counties” was straightforward.
I could also display the custom taxonomy by adding a Headline block with dynamic data. I included an icon too.
Features That Are Not Yet Available
The WP Show Posts plugin, that I’ve used in the past, enabled me to display posts in random order. Also the Pro version of the plugin had various additional features, including masonry layout, a carousel and a lightbox.
These things are not yet available in GenerateBlocks, although some of them may be added to the Pro version in future.
Another thing to mention is that WP Show Posts is clever enough not to display the current post in a list that is included within a post. For example, I could use the shortcode to a list at the bottom of a post with a heading such as “More Posts in This Category” and the post itself would not appear. As far as I know neither the core Query Loop block nor the GenerateBlocks version acts this way. That’s a point in WPSP’s favour but it’s not a big deal.
Kadence Blocks
Kadence has a free Posts block and it was very easy to add this to a page which displayed my most recent posts with some default settings already applied.
Unlike the modular approach of the two versions of the Query Loop block, Kadence adds the Posts block as a single unit, with quite a few options.
It was a simple matter to change the settings so that only the most recent three posts with tag of “featured” were shown, to switch off the display of the category and author and to set the length of the excerpt.
Other options included:
- ordering by date, modified date, alphabetically or randomly
- showing unique posts on a page
- setting between 1 and 3 columns on desktop and on mobile
- changing the title size
- choosing whether to display the author image, post date, taxonomy, number of comments and featured image
- setting the featured image size to thumbnail, medium, medium large, large or full and changing its aspect ratio
However, I couldn’t see a way to change the background colour, so I added some CSS in the Customiser.
.wp-block-kadence-posts .loop-entry.content-bg {background-color: #FAE1E8;}A Newspaper Layout
As before, I could create a newspaper type of layout using GenerateBlocks with Kadence Posts blocks inside the GB containers. However, it seemed that I could only have a maximum of three columns with the Kadence Posts blocks.
Custom Post Types
I was able to display my custom posts and select these based on a custom taxonomy (but not show this).
Update: In September 2022, Kadence announced a change which may mean that my custom fields can be displayed – for more information see https://www.kadencewp.com/blog/kadence-blocks-pro-now-supporting-pods/ .
Kadence Pro also has a Post Grid/Carousel block which is packed with features. It even includes an optional filter based on either categories or tags.
As I expected, there are lots of options for changing the content and style of the display (colour, spacing, fonts etc.) and the block can display posts in a grid, masonry layout or carousel.
There’s also a Pro Portfolio Grid/Carousel block which Kadence say is for “displaying any posts in a portfolio (image-focused) style.”
Spectra
Spectra (previously known as Ultimate Addons for Gutenberg) has Post Carousel, Post Grid, Post Masonry and Post Timeline blocks, all of which are free.
I tried the Post Grid block first and it was very easy to use. I could set up a basic grid within seconds and there were controls for just about everything – including some responsive options for setting the number of columns on tablets and mobiles. Colour and spacing options were included, along with things such as image size. I could select posts based on either category or tag.
It’s also possible to edit the layout to change the order of the items within it.
I could exclude the current post – but there does not appear to be an offset, so I wouldn’t be able to create the newspaper layout as I’d done before.
I could display my custom post type – towns – but didn’t seem to be able to select posts based on the custom taxonomy of counties.
The other blocks – Post Carousel, Post Masonry and Post Timeline – also worked nicely.
Conclusions
The core WordPress Latest Posts block may be all you need if you just want to display a simple list, or grid, of the latest posts or posts in a certain category. It’s quite limited though.
The core WordPress Query Loop block is more powerful and pretty flexible. The GenerateBlocks Query Loop block is a kind of souped-up version and I was impressed by how much control I had over the content and appearance of the output.
A block pack plugin, such as Kadence or Spectra, can be a quick and easy way to get a nicely styled post list without code, and there is often extra functionality too. Spectra includes various different output styles for free. The filter in Kadence Pro is a nice feature.
Other blocks plugins also have their own versions of this type of block (e.g. Stackable, Getwid, CoBlocks etc).
My personal preference would be to use the GenerateBlocks Query Loop block, unless I wanted a special type of output such as a carousel or timeline.
Note that I am not a developer and cannot comment on how well the various plugins are written or what impact they may, or may not, have on loading times.
