Creating a custom template with the WordPress site editor

In this tutorial, we will learn how to use the Site Editor to create a custom template for a unique post or page. You might want to create a custom template for an event, a landing page, different types of blog posts or even have unique styles for different pages on your site.

Learning outcomes

1. Adding a new custom template.
2. Modifying a custom template.
3. Assigning a template to a page or post via the Template Editor.
4. Creating different custom templates for separate blog pages.
5. Crafting a landing page for marketing purposes.

Comprehension questions

1. In which situations would you use a custom template?
2. How do you assign a template to a page or post?

Resources

• Site Editor
• Template Editor

Transcript

Hi, and welcome to Learn WordPress. In this tutorial, we will see how to create a custom template, which lets you use a different design or layout from the rest of your website. This means you can create a page or post template with a unique header, footer, or other page elements. You might want to create a custom template for an event, a landing page, different types of blog posts or even have unique styles for different pages on your site.

To create a custom template, make your way to Appearance and click on Editor. And this will take you to your site editor. And once you’re here, make your way to templates. Let’s first open the page template. As you will notice, the page template already has a header and a footer, and all the pages that have been assigned to this page template will have this header and footer. I want my sample page to have a different header and footer; custom templates will help me achieve that.

So let’s make our way to Templates and then click on Add New and scroll to the bottom and select Custom Template. Name it appropriately and then click Create. Next, I will open up my List View and then remove this header and footer from my template. I will keep my Post Content block in place as all content is displayed through the Post Content block. Next, I will insert a new header, one which I’ve already created and is available below the existing template parts. Then I will add a new footer and select one that I’ve already created, called Centred footer with social links. And now, I have completed my custom template with a new header and footer.

After saving the custom template, we can make our way to our dashboard. Open our sample page, and here we will notice the content we’ve already added to the page. We will see that this template has been assigned to the page template, which is the default template. Now we will assign it to the new sample page custom template that we just created. Once updated, we can make our way to the front end of the website, and we will see that our other pages share the original header and footer. But if we now click on the sample page, we will see that the sample page has its own unique header and footer due to the fact that we’ve assigned a custom template to this page.

It is also worth noting that when we make our way back to the sample page, for example, and look at our sidebar settings, you can edit a template or add a custom template from here.

Next, you might have a blog page and would like to have different page layouts for different types of blog posts. I’ve created a custom template for my book review page and for my movie review page. So when I make my way to my custom template for book reviews, you will notice I have added a unique banner with the help of a Cover block. When we open the Query Loop block, you will notice I’ve added a category filter to only display the relevant posts and when I make my way to the custom template for my movie reviews, we will see I followed the same process and I’ve added the movies category.

Next, I will go to the dashboard and open the page named Books and then assign this page to the custom template I created called Books. Then I will open up the page named Movies and assign it to the Movies custom template. Once we have updated, we can check out the front end of our website to see the unique layouts for the blog page about movie reviews and the blog page about our book reviews. Before we move on, it is also important to note that the single template is the default template for displaying any single post. But you could create a different design for a single post using a custom template and assign it to the relevant post or posts.

In the last example, I’ve created a custom template for a landing page which can be used for marketing purposes. When we open the custom template, you will notice I’ve removed the header and the footer. I’ve only kept the Post Content block, as this displays all content from a page that has been assigned to this template. Now we can make our way to the dashboard and open up the relevant page with all the content, and we will also see I’ve already assigned this page to the landing page template which I’ve created. Now if we click on Preview, we can view our landing page, which can be used on social media or in an email, for example.

I trust you feel more confident now creating your own custom templates, and visit Learn WordPress for more tutorials and training material.