Introduction
In this lesson, we will look at 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 unique styles for different pages on your site.
Creating a custom template
To create a custom template, go to Appearance, click on Editor, and then select Templates. Let’s first open the page template. As you will notice, the page template already has a header and a footer. All pages assigned to this page template will have this header and footer. But I want my contact page to have a different header; custom templates will help me achieve that. So, let’s go to Templates and click on Add New Template. At the bottom, we can select Adding a Custom Template. Give it a descriptive name, and then click Create.
The Twenty Twenty-Four theme allows you to choose a template pattern or click on Skip to start with a blank template. I’m going to go ahead and select the pattern, as it will save me time. As we can see, this is the same as my page template. We’ve got the header, the footer, and the Post Content block in place. However, I would like my contact page to have a different header. So, let’s select the header, click on the three vertical dots, and then select Replace. Then, I will add a new header to this template. Now my new header is in place, and the next step will be to save it and then apply this template to my contact page.
Assigning a custom template
So, once I’ve saved the template, I can return to the dashboard, go to Pages, and open up my contacts page. At this stage, our contact page is still assigned to the page template or the default template. So, we will click on Swap Template to assign a new template to this page. Then, we can choose the contact template that we have just created. And now, the contact template has been assigned. Once we’ve updated it, we can make our way to the front end of the website. We will see that our home page and other pages share this header. But when we open our contact page, we will see that this page has its own unique header since we have assigned a custom template to this page.
Custom landing page
In the last example, I would like to create a custom template for a landing page that can be used for marketing purposes. At the moment, I’m on the page that I’ve created for my landing page. And if I open my sidebar settings, we will see this page is still assigned to the default page template. Therefore, the landing page still has the same standard header and footer. To create a custom template for this page, we will once again go to the Site Editor, select Templates, add a new template, and then select a custom template and name it appropriately. In this case, I will call it a “Drone Landing Page.”
In this example, I’m not going to choose a template pattern, as I don’t want a header or a footer on my landing page. I want a more focused user experience. My landing page encourages the reader to click on the call to action. So, I will click on Skip to start a template from scratch. The only block I want to add is the Content Block, which will pull the content from the page. I also want my landing page displayed at full width, so I will keep my Content block as is. Once I’ve saved the template, we can return to the dashboard. Go to Pages and then open the landing page. Next, we will assign the custom template to this page, namely the Drone Landing Page I’ve just created. Once updated, we can click on Preview to see what our landing page will look like on the front end. For example, this landing page can be used on social media or in an email.
Conclusion
I also wanted to mention that you can add a new template by going to Manage All Templates and clicking on Add New Template at the top right. Happy creating! Remember, you can manually apply a custom template to any post or page.
Practical
Use WordPress Playground to test your knowledge.
- Make your way to Templates.
- Create a custom template and name it appropriately.
- Add a new header and footer pattern.
- Assign the custom pattern to the Sample Page.