Block theme templates: the easy way to build an elegant grid of posts

This tutorial shows you how!

WordPress block themes let you lay out your home page in countless ways, with endless flexibility. To get you started and show you just a few of the possibilities, this tutorial will help you build a magazine-style home page that shows several recent posts and then a traditional post list for inner pages.

First, make sure you have a block theme active on your site—this technique will not work in a classic theme. Your final product will be a pair of page templates that each show 12 posts per page:

• The first page shows one featured post with a full-width featured image. Below it is a set of two posts, each. The rest of the page is a grid of nine more posts, laid out three across.
• The second page uses a single query to complete the effect, showing 12 more posts, also in a grid.

By the end of this tutorial, you’ll know how to build a variety of layouts in a home page template, or really any page template.

And you’ll have a front page for your site that meets some important objectives:

It grabs your reader’s attention and keeps them engaged. It is aesthetically pleasing.

And it makes it very simple for you to focus your visitor’s attention on the posts you want them to see first. Usually, those will be the most recent posts on your site.

Step 1 – Prepare your site

In this step, you will set up two pages and make them the home page and recent posts pages, respectively.

First, go to your WordPress dashboard and click on Pages in the left-hand menu. Then click Add New.

For the home page, name it “Home” and also leave the content area blank.

For the blog page, name it “Blog” and leave the content area blank. Make note of the URL for this page as well. You will need that URL later in the tutorial.

Now go to your WordPress dashboard and click Settings in the left-hand menu. Then click on Reading. You should see two fields where you can set your home page and blog page. Set the page named “Home” as the homepage of your website and the page named Blog as your “posts page.” To do this,

In the “Reading” settings, you’ll see an option for Your homepage displays. Select the A static page option, then choose the “Home” page you just created from the homepage dropdown menu. And the “Blog” page you created from the Posts page dropdown

Finally, set the Blog pages show at most to 12 posts.

Save your changes!

Note: If you are taking these steps on a live site (not recommended), you might prefer to leave this step for the end. Otherwise your changes could alter the front of your site before you are ready.

Step 2 – Create a Front Page template

Create a Front Page Template, either in the site editor or a front-page.html template in your active block theme’s templates directory. Keep in mind that to have 12 posts per page in the layout, as planned above, you will need to have 12 posts per page set in your Reading settings. The code examples below will give you a layout with a total of 12 posts like this:

You do not have to stick to this layout; you can configure your post layout any way you like. Just make sure the total number of recent posts shown on the front page matches the number of posts you specified in the reading settings.

Query loop one

In this example, the first query loop block is configured to show one post in a list view layout with the Inherit query template option disabled. Or you can choose a completely different pattern or content block, or make your own. In this case, The Post Template block holds the Post Featured Image, Post Date, Post Title, and Post Excerpt blocks.

Query loop two

Following the same concept, you can add another query loop block below the first. In this example, the second query loop block is set to show two posts. It has an offset of one; if the offset were zero, this query would start with a repeat of the post in the first loop. 

Notice that the Post Template block, in this case, is a bit more complex. (And, again, you can substitute any pattern or block you like.) This example includes a columns block with two columns: a Post Featured Image block fills the width of the first column, and the Post Date, Post Title, and Post Excerpt blocks are in the second column.

Query loop three

The third and final query block is set to show nine posts, in a grid layout, as planned above, with the Inherit query template option disabled. Now the offset is three posts: again, you want to make sure the grid skips the three posts you have already shown. And as before, you can substitute any block pattern or block you like in this query loop. The choice is yours, and the possibilities are endless. Also note: in each Query block, you have built a different Post Template block to meet the design needs of that part of your page.

In this case, the Post Template block holds the Post Featured Image, Post Date, Post Title, and Post Excerpt blocks.

Next page link

The front-page template should not contain any pagination blocks. Instead, add a paragraph block directly below the query blocks, and in that paragraph block, insert a text link that points to the second page of the “Blog” page you created previously, the template for this page will be created in the following step.

Adding more interest to your home page

You are by no means limited to query blocks on your home page. You can add all kinds of visual interest, marketing tools, whatever! Some examples might be:

• A cover block
• A call to action
• Featured products from your shop
• A special event
• And so much more

You are also not limited to only working in the site editor. You can also work directly with the block markup.

To work with that markup, you can start with the code below—paste it into your front-page.html file or the code view of the front-page template in the site editor. You may need to adjust the header and footer template parts to work with your site.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:query {"queryId":0,"query":{"perPage":"1","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"displayLayout":{"type":"list","columns":3},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:query {"queryId":0,"query":{"perPage":"2","pages":0,"offset":"1","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"displayLayout":{"type":"list","columns":2},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-featured-image {"isLink":true,"align":"wide"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"constrained","justifyContent":"left","contentSize":"500px"}} -->
<div class="wp-block-group"><!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:query {"queryId":0,"query":{"perPage":"9","pages":0,"offset":"3","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"displayLayout":{"type":"flex","columns":3},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><a href="/blog/page/2/" data-type="URL" data-id="/blog/page/2/">Next Page</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Step 3 – Posts page template

Now you will build a Home Template, either in the site editor or a home.html template in your active block theme’s templates directory. 

In this example your page will have one query block, set to show a grid of 12 posts, and you will have the Inherit query template option enabled. Again, you can use any pattern or combination of content blocks you like for this—you are not limited to any presets.

To build the posts page described in the tutorial, your fourth Post Template block will show the Post Featured Image, Post Date, Post Title, and Post Excerpt blocks.

Posts page pagination

In most cases, you will want to include pagination links for this page template, because over time, you will have more than twelve posts—those posts will generate more pages, and each page will show the next twelve posts.

Now, the code example from the previous step adds a pagination block to the query loop block. Instead of using pagination numbers, that block is set to show links to the Next and Previous pages. That keeps all the pages of the blog visually consistent.

If you like working with the markup directly, here again is some HTML you can start with in your front-page.html file (or the code view of the front-page template in the site editor). You may need to adjust the header and footer template parts to work with your site.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:query {"queryId":0,"query":{"perPage":"9","pages":0,"offset":"3","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]},"displayLayout":{"type":"flex","columns":3},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->

<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0.5em"}}},"className":"to-front wp-block-query-pagination"} -->
<p class="to-front wp-block-query-pagination" style="margin-bottom:0.5em"><a href="/">Previous Page</a></p>
<!-- /wp:paragraph -->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"left"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Be sure to save your templates! When you’ve done that, go ahead and navigate to the front end of your site to see the templates in place.

Congratulations on completing the tutorial!

Now you have the knowledge and tools to show a smart-looking layout on your website’s home page that looks different from, but consistent with, your inner post pages. Which in turn will help you offer a more attractive, personalized experience to each of your users, even perhaps raising their time on site and conversion.

But this is just the beginning. Keep exploring and experimenting, and you’ll discover a whole world of WordPress theme development possibilities, for sites that look and perform better all the time.

Props to @bph @marybaum and @mburridge for reviewing the content of this tutorial.