The Latest Posts Block, Query Loop Block & Alternatives

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 will provide options so that you can control the look 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.

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. But 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.

The Latest Posts block has been around for over a year now, and the WordPress version 5.8 introduced the Query Loop block. I wanted to find out whether these core blocks could be used to replace WP Show Posts in some cases, and also investigate other 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:

UPDATE: In December 2021 it was announced that WP Show Posts will be merging with GenerateBlocks within a few months – see the blog post “We’ve made the decision to merge WP Show Posts with GenerateBlocks!

Skip to conclusions

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. With the Latest Posts block I can:

  • display posts (but not pages or custom post types)
  • select posts based on category (but not tag) or author
  • choose the number of posts
  • display posts in a list or a grid of two or three columns
  • order posts by date or alphabetically
  • choose whether to display the author name, post date and featured image
  • set the featured image size to thumbnail, medium, large (but not or full)
  • choose to display the full content or show an excerpt and set the length of the excerpt

The Query Loop Block

This block was new in WordPress 5.8 and I would expect it to be developed and improved in future versions of WordPress. 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 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 WordPress Group block inside the Post Template within the Query Loop block.

Then I dragged the Post Featured Image and Post Title into this Group (a bit fiddly!) and changed its background colour.

I edit the Query Loop’s Post Template to add back the date and include an excerpt.

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 I saw the same behaviour I have come to expect from WP Show Posts – the content of the “Blue Flowers” post was displayed in full up to the More block I’d included when editing the post (see below), and the link and image were included – good!

I noticed an advantage over WP Show Posts in that a read more button was not included on short posts where there was no more content to read.

Editing the Post Template

It’s possible to add various other blocks to the Post Template, such as Separator blocks, Spacer Blocks, Column Blocks, Post Tags, etc. The template approach also enables me to do things such as changing text size and colour.

Not the most polished design, but hopefully you get the idea:

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. Here, I’ve used the Offset feature to skip the most recent post for the bottom section, and the four most recent posts for the section on the right.

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, but could not selected custom posts based on my custom taxonomy (county) or output the value of this.

With the Query Loop block I can:

  • display posts, pages or custom post types
  • select posts based on category, tag, author or keyword (but not custom taxonomy).
  • include or exclude sticky posts, or show only sticky posts
  • choose the number of posts
  • use an offset feature to skip the first x posts
  • display posts in a list or a grid and set the number of columns
  • display posts in ascending or descending order of date or title
  • edit the Post Template to include the author name, post date, taxonomy, featured image…and also other blocks (including Group blocks or GenerateBlocks Container blocks both of which can have a background colour)
  • set the height and width of the featured image
  • choose to display the full content or show an excerpt (but not set the length of the excerpt)

WP Show Posts

This plugin, which has both a free and a Pro version, is by Tom Usborne, the GeneratePress developer.

UPDATE: In December 2021 it was announced that WP Show Posts will be merging with GenerateBlocks within a few months – see the blog post “We’ve made the decision to merge WP Show Posts with GenerateBlocks!

Posts With a Certain Tag

I gave some of my blog posts a tag of “featured” and used the free WP Show Posts plugin to create a list of just these posts.

This produced a shortcode that I could include on my page with a Shortcode block.

The Pro version of the plugin has various additional features, including masonry layout, cards, a carousel and a lightbox. It also has options for customising the appearance of the list of posts, but I wanted to use the free version here, so I added some CSS code instead.

/** WP Show Posts styling **/

.wp-show-posts-inner {background-color:#FAE1E8; text-align:center; padding:24px;}

The free plugin has various options to control image size, columns, content, meta data, and order – by title, date, author etc. (ascending or descending) or random.

I changed some settings to show the date, a 14 word excerpt and a “read more” button. (Note that I also removed the CSS rule that centred the text as I didn’t feel that would look good with these settings.)

The blog post titled “Blue Flowers” was displayed as I expected, given my previous experience of this plugin i.e. the text was cut off after 14 words and not formatted – the link didn’t act as a link, and an image that formed part of the post was not displayed. I’m not saying this is incorrect; just observing that this is how the excerpt behaves.

If I choose to show the Full content instead, then the image is included and the link is functional. The content is cut off at the point of the More blocks that I inserted when editing my posts.

A couple of things to note are that the “read more” button appears even for very short posts where there is not actually any more to read, and the text set by the plugin overrides anything input when editing the individual posts (e.g. for the “Blue Flowers” post I’d actually put “more details” as you can see in one of my earlier screen prints).

I found that if I used More blocks within my posts, but also set WPSP to display an excerpt, rather than the full content, the text was shown up to either the More block or the excerpt length, whichever came first.

One 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 can 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 will not appear. I tested this and found that the Query Loop block does include the current post. That’s a point in WPSP’s favour but it’s not a big deal.

More Interesting Layouts

It’s possible to create a newspaper or magazine type of layout, using a number of lists, as I did earlier on with Query Loop blocks.

Alternatively, the Pro plugin can be used to create interesting layouts using just one list, as in the example below where I have selected the Masonry and Featured Post options and chosen Cards with an Overlay style.

This is another Pro feature.

Custom Post Types

WP Show Posts can handle custom post types as well as posts and pages – for example the “Town” custom post type I’d created earlier with the Pods plugin.

I was able to create a WP Show Posts list that used Town, rather than Post or Page and display this with a shortcode in the usual way. I can also select custom posts based on a custom taxonomy, which I was not able to do with the Query Loop block.

With WP Show Posts I can:

  • display posts, pages or custom post types
  • select posts based on category, tag or custom taxonomy
  • select a post, or a number of posts, individually based on post id or author id
  • exclude sticky posts
  • choose the number of posts
  • use an offset feature to skip the first x posts
  • set the number of columns and the gutter (space) between them
  • display posts in ascending or descending order based on a variety of different criteria including date, date modified, or title, author or randomly
  • choose whether to display the author name, post date, taxonomy and featured image
  • set the width, height, alignment and position of the featured image
  • choose to display the full content or show an excerpt and set the length of the excerpt
  • edit colours, spacing, size etc. (with the Pro plugin)
  • display in different layouts e.g. masonry, cards, carousel (with Pro plugin)

Kadence Blocks

Kadence has a free post grid block and it was very easy to add this to a page which displayed my most recent posts with some default settings already applied.

It was a simple matter to change the settings so that only the most recent three posts with tag of “featured” were shown, and to switch off the display of the category, date, author and excerpt.

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).

With the Kadence Posts block I can:

  • display posts, pages or custom post types
  • select posts based on category, tag, or custom taxonomy
  • show unique posts only (i.e. exclude posts in a block from showing in other blocks on the same page)
  • allow posts to be sticky posts
  • choose the number of posts
  • use an offset feature to skip the first x posts
  • display posts in a a grid of upto three columns and change this number for tablet screens
  • display posts in ascending or descending order of date, modified date, or title, or randomly, or in menu order
  • choose whether to display the author name, author image, post date, taxonomy, number of comments and featured image
  • set the featured image size to thumbnail, medium, medium large, large or full and change its aspect ratio
  • choose to display the full content or show an excerpt and set the length of the excerpt

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.”


Ultimate Addons for Gutenberg

The Ultimate Addons plugin 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.

It’s also possible to edit the layout to change the order of the items within it.

With the UAG Post Grid block I can:

  • display posts, pages or custom post types
  • select posts based on category, tag or custom taxonomy
  • choose the number of posts
  • exclude the current post – but there does not appear to be an offset
  • display posts in a grid and set the number of columns (upto a maximum of 8) and change this for different screen sizes
  • display posts in ascending or descending order of date or title, randomly, or in menu order
  • choose whether to display the author name, post date, taxonomy, number of comments and featured image
  • set the featured image size to various sizes including thumbnail, medium, medium large, large or full
  • use the featured image as a background for the post
  • choose to display the full content or show an excerpt and set the length of the excerpt
  • edit colours, spacing etc. without paying for a premium plugin or adding CSS code
  • set the posts to be equal height

The other blocks – Post Carousel, Post Masonry and Post Timeline – worked just as nicely.


Content Views

Content Views will allow you to display posts or pages based on specific criteria such as those which match ANY of a list of categories or tags, as opposed to those which match ALL the listed categories or tags.

The free version is a bit limited but it could be worth considering if you need to apply logical rules to your selections. For example, I was able to set it to display just posts that have both the category “Plants” and the tag “featured”.


Conclusions

The WP Show Posts is overdue for an update but it still works fine. However, within the next few months it will be discontinued and merged with the GenerateBlocks plugin. You may well find that the free plugin is sufficient but the Pro version does have more features.

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.

The core WordPress Query Loop block can do most of the things that the free version of WP Show Posts can, with a few exceptions.

It may seem over the top to install a blocks plugin just to output a list of posts, but most of the block pack plugins allow you to activate only the modules you need. It can be a quick and easy way to get a nicely styled post list without code and there is often extra functionality too.

I was impressed by the post blocks included for free in Ultimate Addons for Gutenberg and Kadence Blocks (which also has other Pro blocks). Depending on your requirements, and whether or not you are interested in the other blocks in each pack, one or other of these might suit you better. Other blocks plugins also have their own versions of this type of block.

The Content Views plugin could be worth considering if you want to select posts based on more complex logical rules.

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.


More Tutorials

Leave a comment