In this lesson, we will look at how you can 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, 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.
And all pages assigned to this page template will have this header and footer.
But I want my contact page to have a different header and custom templates will help me achieve that.
So, let's make our way to Templates and then click on Add New Template.
And 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 you can 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.
But 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.
And 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 and then apply this template to my contact page.
So, once I've saved the template, I can return to the dashboard, go to Pages and then open up my contacts page.
At this stage, our contact page is still assigned to the pages template or the default template.
So, we are going to click on Swap Template as we want to assign a new template to this page.
And then we can choose the contact template which we have just created.
And now, the contact template has been assigned.
And once we've updated, 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 due to the fact that we have assigned a custom template to this 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.
And therefore, the landing page still has the same standard header and footer.
To create a custom template for this page, we are once again going to make our way to the Site Editor,
select Templates and then add a new template, and then select a custom template, and name it appropriately.
In this case, I will call it 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. The aim of my landing page is to encourage the reader to click on the call to action.
So, I'm going to go ahead and click on Skip to start a template from scratch.
The only block I want to add is the Content Block, as that will pull in the content from the page.
I also want my landing page to be displayed in 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 are going to assign the custom template to this page, namely the Drone Landing Page, which I've just created.
And once updated, we can click on Preview to see what our landing page will look like on the front end.
And of course, this landing page can be used on social media or in an email, for example.
I also wanted to mention that when you click on Templates and go to Manage All Templates, you will also be able to add a new template from here.
Happy creating! And remember, a custom template can be manually applied to any post or page.