Customizing your post content layout

In this tutorial, we will take a closer look at how you can modify the way single posts are displayed. We will explore two designs and learn how to restructure and nest various types of blocks.

Learning outcomes

1. Accessing the Site Editor and Post Template.
2. Recognizing the default layout of your theme’s Post Template.
3. Identifying a variety of Theme blocks that are used to create a single post layout.
4. Modifying the Post Template to meet your requirements.
5. Moving and nesting various types of blocks.

Comprehension questions

1. How would you like your post content to be displayed?
2. Which Theme blocks are most commonly used?

Transcript

Hi and welcome to Learn WordPress. In today’s session, we are going to look at customising your post content layout. Every block theme comes with the single post template that provides the structure or design of how a single post is displayed. And you of course have the ability to modify this to meet your needs.

Currently, I have the Twenty Twenty-Two theme installed, and this is how a post is structured by default when editing a template in the Site Editor. Let’s click on the List View so that we can have a better view of the structure of the page, and now you will notice, we have the Post Title block, the Post Featured Image block, the Post Content block, and right at the bottom, the Post Date block, the Post Author block, the Post Categories block and the Post Tags block. Please note, this default layout will differ depending on the theme that you’re using. Let’s see what this looks like from the front end of your website. You will notice we have our post title, post featured image, post content, the post date, post author, and then a tag or category.

Let me show you how you could change this default design in two different ways. In my first example, you will notice I’ve changed the alignment of the site title and I’ve moved the Post Date, Author and Categories block to below the site title and above the post featured image. And I left the Post Featured Image and the Post Content block in the same place.

In the second example, I created a custom post header, I used a Cover block and nested together the navigation menu, the featured image, the Post Title block, and then also the Post Date and Author block.

Let’s go ahead and see how you can customise your post template and recreate these examples. To achieve the layout we saw in the first example, click on Appearance and then Editor. Click on the WordPress icon or site icon and make your way to templates, and then select the single post template. Click on the List View to gain a better view of the structure of the page and then firstly, we are going to change the alignment of the post title to centre. Then scroll down and find your other theme blocks, select the parent Row block. Now we’re going to drag the Row block up to below the Post Title block in our List View and then change the alignment to centre, and once you’re done, click Save. Now we can make our way back to the front end of our website to see what it will look like for somebody who visits your site. And there you go.

To recreate the second example, we are back in the Site Editor and we’ll make our way to Templates and then select the single post template again. Now the first thing we are going to do is we are going to remove the header, the Post Title block, the Post Featured Image block as well as all the other Theme blocks. And now we are going to add a Cover block to the top of our page. In the block toolbar is an option to add media and on the left to use the featured image. Click on Use featured image and then select an overlay colour. Select the Cover block and then change the opacity to 80, and once you’ve done that, click on the Inserter and add a Row block and then within the Row block we are going to add the site logo and then the site title, and then the Navigation block. And I will select one of the menus I’ve already created. Once you have done that, select the Site Logo and the Site Title blocks and then group them together in a row.

Next, select the parent Row block again and next to justification, choose Space between items. And lastly, select the Navigation block and ensure you disable the option to Allow to wrap to multiple lines, and then we’re going to select the block and send it to the top of the Cover block. Next, I’m going to add my Post Title block and align it to centre. Now I’m going to add another Row block to group my post date and post author together. So firstly, I will add the Post Date block and then the Post Author block. I’ll select the parent block again and change the justification to centre. Then we’ll add a paragraph in between and add a full stop and make it bold. Then I’ll make sure I’ve selected the parent block again and I’ll use my sidebar settings to change the block spacing to 10 pixels to bring it closer together. Then I’m going to close my sidebar settings and my List View, and ensure that I increase the size of my Cover block, and lastly, you may decide to also remove the Separator block just below the Cover block. And then you can make your way back to the front end of the website to see your changes in action.

If you have modified a template, you will notice there’s a little dot above the image next to the name of your theme. If you’re not happy with your changes, click on the three vertical dots and select Clear customizations, and now the template has reverted to its original state. That brings us to the end of this tutorial.

All the best in customising your own post template and visit Learn WordPress for more tutorials and training material.