Show WordPress posts in a grid layout on a static homepage

What is the best homepage for your website or blog? Static or your latest posts? The choice seems to be one or the other, but you can do both: Show posts in a grid on a static homepage.

If you choose to show your latest posts on your WordPress site by going to Settings > Reading, the layout options are fairly dull. The theme usually shows a simple list of blog posts in descending chronological order starting with the most recent. There doesn’t seem to be any way to change this.

Featured images are usually shown in this blog post list, but even so, it is still often dull and it will not excite visitors with its visual design. It is functional at best and a list of the latest posts is best placed elsewhere, on a different page and not the home page. On this site you can go to the Archive to see a list of posts in chronological order.

WordPress static home page

A static home page is one that you design yourself and it can contain headings, text, images, sections, multiple columns and so on. This is fine for some sites, like those with fairly static content and an example is a plumber, electrician, dentist and so on. They offer fixed services and little changes on the home page from day to day or even month to month.

A static home page does not show your latest blog posts. Not unless you manually add text, images and links to the latest posts yourself and no-one wants to have to update the home page every time they add a post to their site. This means that the homepage is the same every time someone visits your site. You might entice them to stay and look around more if there was new and updated content to see each time they visit.

It is possible to have a static homepage with static content that also shows your latest posts. Some parts of the page may be fixed, but other parts may be live and automatically show the latest posts. You might want to list the latest posts in a specific category or show posts with a certain tag. You could have different sections on the static homepage with different content.

A list of recent posts on the homepage (or anywhere else, it does not have to be a homepage), can be displayed in a grid with two, three or four columns and it is a great way to show off recent content on a WordPress site. Here is an example, imagine this on the static homepage of your site.

Show posts in a grid layout in WordPress
A post grid would look great on a WordPress static homepage

A theme may provide widgets that you can place on the homepage to show the latest posts or posts within a category or with a certain tag. Take a look at the home page of this site for example. However, many themes don’t. Fortunately, some plugins can help with that and they are very easy to use.

Go to Pages in WordPress and if you do not already have a homepage, create a page and call it Home. You might need to select the Homepage template in the right sidebar in the post editor. It must also be set as the homepage in Settings > Reading.

Gutenberg Blocks – Ultimate Addons for Gutenberg

Ultimate Addons is a free WordPress plugin that provides more than 20 different blocks that can be used in the WordPress post editor on any page or post. I won’t look at all the blocks here, just the Post Grid block required for showing the latest posts.

Gutenberg Blocks Utilmate Addons plugin for WordPress

A Post Grid block can be placed on any page or post you like, but here I am using one on a static homepage. Click the plus button in the top left corner to add a new block and scroll down to the Ultimate Addons Blocks section. Add the Post Grid block. Post Masonry is almost identical and does pretty much the same thing.

In the right-hand panel in the WordPress post editor (click the gear icon if you don’t see it), is a large collection of options to customize the Post Grid. The screenshot below shows just a tiny fraction of the options. You can choose the number of posts to show, the number of columns to put them in, and whether to have pagination at the bottom (Page 1, 2, 3… Next links).

Ultimate Addons post grid configuration
Ultimate Addons Post Grid configuration. The list of options is long!

Meta information like the author, date, taxonomy, number of comments and so on can be shown or hidden as desired. You can show or hide the featured image or excerpt. The typography, colors and spacing of the post grid can be changed.

You can show all posts, a single category of posts or those with a certain tag. You could put two or three of these post grids on the home page to highlight the latest posts in popular categories. You could have a large single column to show the latest post, then a two or three-column grid below showing the next few posts.

In fact, every aspect of this grid of posts can be customized and it is excellent. I can’t show all the configuration options because there are just too many. The possibilities are endless

Stackable – Page Builder Gutenberg Blocks

Almost everything that the previous plugin does, Stackable does and it provides dozens of useful blocks for the Gutenberg WordPress editor. The feature set of the Post Grid block is almost the same as the Ultimate Addons plugin and the differences are only minor, so I won’t list them all.

Stackable WordPress plugin adds blocks to Gutenberg
Stackable blocks for Gutenberg WordPress post editor

A post grid can be placed on any page or post, but is particularly useful for a static homepage in which you want to show your latest posts in a grid. You can have static content and then one or more post grid blocks.

Creating a post grid with Stackable WordPress plugin
Stackable WordPress plugin simple post grid

This plugin has a clever feature and it offers several ready-made styles of grid layout. There are three free ones and 9 premium ones. Creating a grid of posts could be as simple as clicking the style you want. However, you can also create your own post grid style by customizing almost every aspect of the design.

Stackable WordPress post grid styles
Stackable WordPress post grid has ready-made styles

You could have a single column large featured post at the top of the page, then below it, another Post Grid with two, three or four columns. You can choose what to show, such as the featured image, excerpt, meta information, set the black background color, spacing and many more attributes.

The post grid can contain all the posts or you can filter them according to the category or tag. This means that you can have several post grid blocks on the page showing different content from different categories. You can even show random posts rather than date order and this is useful for surfacing old content that people might not otherwise find easily on your site.

Final thoughts

Do you really need a page builder to create your homepage in WordPress? You can do a lot with Gutenberg blocks and a plugin like Ultimate Addons or Stackable. Regular content like headings, images, text, links and buttons can be mixed with grid layouts of your most recent blog posts, posts from a specific category or even random posts, which is great for surfacing old content.

Remember that post grids do not have to be the only content on the home page and you can place anything you want before and after, such as headings, text, links and images. A post grid could be the whole page or just a small part of it.

These post grid blocks are compatible with most themes because they work with the Gutenberg WordPress post editor. They simply add blocks. You can take a simple theme like Astra or Generate Press and then build your homepage or archive page with blocks.

Leave a Reply