WordPress themes often display blog posts in lists. This is the case for Twenty Twenty. I like this theme a lot. It’s elegant and AMP-ready (Accelerated Mobile Pages). However I prefer to show my blog in a post grid on desktops. I looked for a plugin to write a separate page with a grid of blog posts in a AMP website.
I use the plugin “Custom Query Blocks” by MediaRon LLC. This plugin can display all posts in a grid with pagination. It is AMP-ready, but the page with the grid must be non-AMP (small display bug).
In this post, I will explain the technical solutions and plugins I tested and the reasons why I chose this plugin for my website. I will then show you how I use Custom Query Blocks and how it looks like.
- The Post grid in Gutenberg Editor
- The Atomic Blocks Plugin
- The Post Grid Plugin
- The CoBlocks Plugin
- The Ultimate Addons for Gutenberg Plugin
- The Getwid Plugin
- The Custom Query Blocks Plugin
- Conclusion
The Post grid in Gutenberg Editor
Let’s start with the first track I followed : WordPress Gutenberg editor. So far, Gutenberg provides only one content block to display posts : the “Recent Posts” block. You can display posts in a list or a grid and you can reasonably customize the post layout. However, it only displays a predefined number of posts. You could say, let’s set this number to a big number, at least bigger than the maximum number of posts in your site, and you’re good to go… However there is no pagination option. Your log page would be far too long for a nice user experience, and this would harm your page size and load time.
Gutenberg developers know this limitation. It is described in their feature request and bug tracking site here : “Latest Posts” blocks need “pagination”/”Load more” feature #13584. This has been reviewed and the team decided not to give a quick fix to this but rather to wait for the Full Site Editing (FSE) feature of Gutenberg. You can see Gutenberg roadmap on wordpress.org or get more details and follow up WPBlocktalks on wordpress.tv.
So Gutenberg will provide a solution sometime… But in the meantime, I still had to look for a post grid implementation. I started looking for a AMP-ready plugin.
The Atomic Blocks Plugin
I use the AMP plugin by AMP Project Contributors to implement AMP on my WordPress site. This plugin recommends a list of AMP-ready plugins and themes on his site. Amongs them is Atomic Blocks, a set of really nice blocks you can add to extend the Gutenberg list of blocks. You can consult Atomic Blocks’ website here.
Atomic Block is AMP ready.
It is frequently updated and counts 50,000+ Active Installations.
I tested the “Post and Page Grid” block.
This grid nice looking. You can display it with your theme standard width, but also with the wide width and the full width. This is handy because the Twenty Twenty standatd width is narrow.
You can display all post or filter by post category. You can sort posts and customize the grid display.
However, you must specify a “Number of Items” for the number of post displayed. And there is no pagination option.
So I concluded that Atomic’s “Post and Page Grid” block is a relooked brother of Gutenberg “Latest Posts”. This would not fill my needs.
The Post Grid Plugin
I already used Post Grid by PickPlugins and installed it in my Twenty Twenty AMP environment.
Post Grid is a well known plugin. It is frequently updated and counts 60,000+ Active Installations.
I created a page, and pasted the Post Grid shortcode in it.
However, this generated an AMP error. AMP pages can not display PickPlugins’ post grids.
So I decided to change the page and go for non-AMP. This page can be an exception, if my site is still mostly AMP. This way, I could display the post grid.
However, I got lots of errors generated in the AMP > Validated URL section as you can see in the screenshot below, for my test page with Post Grid, but also for all my posts and pages which did not include Post Grid shortcodes.
The consequence of these errors is that the AMP plugin filters out jquery scripts out of the generated webpage. This is not clean at all, but this is not lethal either for the site.
I prefered to look for a cleaner solution but keep this one in mind, just in case.
The CoBlocks Plugin
I went for the big names in the Gutenberg world of free block plugins. I installed Page Builder Gutenberg Blocks – CoBlocks by GoDaddy. This plugin has a great 4.5 rating, is frequentlyupdated, and counts 200000+ Active Installations. Huge !
I tested CoBlocks and created a page with a Posts block which displays posts or an RSS feed as stacked or horizontal cards.
I could only display a maximum of 20 posts and saw no pagination option.
CoBlocks provides nice looking display features, but the post block does not meet my requirements.
The Ultimate Addons for Gutenberg Plugin
Another big name is Gutenberg Blocks – Ultimate Addons for Gutenberg by Brainstorm Force. It has a 5.0 rating based on 427 ratings (427), is frequently updated and counts 200,000+ Active Installations.
Ultimate Addon provides a Post Grid block. You can use pagination, but only display 100 posts at most (in all the paginated pages).
Moreover, the Post Grid block has only one width : the default theme width, which is narrow with my theme Twenty Twenty. Even the workaround of creating a group with this block and then changing the witdht of the group to full width or wide width does not change the grid display width.
The Getwid Plugin
Getwid is a plugin developped by MotoPress. It count 10,000+ Active Installations.
I tested this plugin and created a Custom Post Type block. You can activate the pagination and can display as many posts as the query associated with the Custom Post Type block returns.
Also, a nice feature are templates. You can edit templated for the post blocks in the grid with Gutenberg. This is a very nice feature. In the example below, I only displayed the featured image of the post. I could also have added the title, an exerpt, links…
I liked getwid a lot, but encontered two issues :
- I got lots of errors generated in the AMP > Validated URL section for my test page with Getwid, but also for all my posts and pages which did not include Getwid blocks. AMP plugin filters out Getwid jquery scripts out of the generated webpage. This is not clean at all. I opened a support ticket at Getwid’s support page, asking if Getwid is AMP-ready.
- I also noticed that pagination did not work specifically on my homepage. I opened a support ticket at Getwid’s support page : Pagination does not work in Custom Post Type on Homepage.
Once again, I had not find what I was looking for and went on searching.
The Custom Query Blocks Plugin
Custom Query Blocks plugin is edited by MediaRon LLC. It counts 600+ Active Installations.
I saw it being recommended in a wordpress github site.
The Custom Query Blocks plugin enables you to create a custom posts block with :
- unlimited number of posts
- pagination
- no AMP error messages
- and as a bonus : wide width
I had some issues with the Custom Query Blocks plugin though :
Issue 1
A display issue I reported on the support page of the plugin : Custom Posts Block GRID becomes a LIST in AMP. The workaround is to disable AMP for the page containing the Custom Posts.
Issue 2
When displaying all posts without any filter, WMPL translated posts are not sorted, so the post grid contains duplicated posts in all languages. Selecting a category however solves the issue. I opened a support ticket here at the plugin wordpress page (plugin version Version 4.5.2).
The plugin’s author, Ronald Huereca, answered this issue by creating a new field in the block, which lets you select according to the WMPL languages. He released this feature in version 4.5.3 of the plugin (Thank you 🙂 ).
Here is a screenshot of the new custom posts block :
Here is how my posts page now looks like with the plugin Custom Query Blocks :
Conclusion
Here is a table summarizing my post grid tests in a WordPress AMP environment.
| Pagination | Un-limited Post Number | AMP-ready | |
| Gutenberg | – | – | Yes |
| Atomic Blocks | – | – | Yes |
| Post Grid | Yes | Yes | – |
| CoBlocks | – | – | Yes |
| Ultimate Addons | Yes | – | Yes |
| Getwid | Yes | Yes | – |
| Custom Query Blocks | Yes | Yes | Yes (except post grid page : bug) |
I was looking for a solution to write a Page with a grid of a unlimited number of posts in a AMP WordPress site.
The plugin the closest to my requirements in Custom Query Blocks. I still have one issues with it. There is however an easy workaround to this problem though. I’ll update this post when I get an answer to the support ticket I opened.
I use Custom Query Blocks by MediaRon LCC now in my website, you may visit my webpage for technical posts here.
We’ve reached the end of this post.
I thank you for your visit.