Transcript
Introduction
In this lesson, we will customize how a post is displayed by editing the single posts template. To do this, we will go to the Site Editor, select Templates, and open the single posts template. Another way to access your templates is by clicking on Manage All Templates at the bottom left and then selecting the template from there.
Template structure
This template 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-Four theme installed, and this is how a post is structured by default when editing a template in the Site Editor. Let’s click on List View so that we can get a better view of the structure of the template. At the top, we will see the post featured image, and below that, the title, and then the post metadata such as the date, the author, and categories. Then, we will see the Post Content block, below that, the Post Tags block, and finally, the Comments block. Remember, if you want visitors on your site to be able to leave comments on posts, ensure that you don’t accidentally delete this block from your template.
Now that we have seen how this theme has structured the template let’s see what it will look like on the front end when we open up one of our posts. At the top, we have the post-featured image, followed by the title, date, author, and category. Then we will see the post content and the tag which has been assigned to this post, and at the bottom we will see the comments that people have left.
Customizing the template: Example 1
Now, we can return to the template and make changes as we please. In the first example, let’s select the Stack block with the Post Title block and the post metadata. Let’s push that to the top of the post-featured image. Next, I will select the featured image, open the sidebar settings, and go to Styles. I would like to change the aspect ratio to 16 by 9 in this example. This will ensure that the featured image on all my posts will have the same size, regardless of the original image’s dimensions. I have decided to keep the rest of the template the same, so let’s hit Save and see how the changes reflect on the front end. Now we will see our title and post metadata at the top, and the aspect ratio of our Featured Image block has been applied.
Customizing the template: Example 2
In the second example, use a Cover block to create a custom post header for our single template. So, let’s go ahead and add a Cover block to the top of our template. And once I’ve done that, I will select to use the featured image. I will copy the Row block with my logo and navigation menu to save time and paste it into my Cover block. Below that, I will add my site title and post metadata. I will select the Stack block and drag and drop this block into my Cover block. Then, we can delete the header and the Featured Image block. Now, the new header for our template is in place. The next step is to select the Stack block, align the site title, and post metadata to the center. I also want to select the Site Title block and add some padding to create more space around the title. The last step is to select our Cover block, open Styles, select white as my overlay color, and then change the overlay opacity to 70%. Then, we can hit Save and see what a post will look like with our new template applied. Here are two examples from my site. One is a post about surfing in Portugal, and the other is about Table Mountain in Cape Town.
Clearing customizations
Please note: if you are not happy with your changes, click on the three vertical dots next to the template’s name and select Clear Customizations. The template will then revert to its original state. Alternatively, you can go to Manage All Templates and then click on Reset.
Conclusion
I trust you feel more confident customizing your own post content layout.
Practical
Use WordPress Playground to test your knowledge.
- Open the single posts template.
- Use a Cover block to create a custom post header for your single template, as demonstrated in the video.