In this lesson, we will delve deeper into templates.
At the end of this tutorial, we want to be able to differentiate between pages and templates,
know how to modify one of our base templates, how to add a new template,
and lastly, how to assign a custom template to a page or post.
A template provides the structure for how a page is displayed.
That usually includes a header template part, a content area, and a footer template part.
I think it is important to clarify the following information from the start.
Templates are not for posting content, and templates for a post or page
display your content with the Post Content block.
Templates are, as the name implies, design templates that can be applied to single or multiple pages
and posts.
To access templates, make your way to Appearance and click on Editor.
This will take you to your Site Editor.
The Editor can be used to customize the styles of your entire site,
edit pages,
modify templates,
as well as manage all the different patterns on your site.
When you start building a new website, you can edit existing templates or add new ones,
and the theme you are using will determine which existing or built-in templates are available to use.
So first up is the page template,
which creates the structure for how individual pages will be displayed.
Next is the single post template,
which displays a single blog post.
The index template displays posts,
and the 404 template displays when no content is found.
And these templates can of course all be modified as you please.
Then there are also other built-in templates worth exploring,
for example, a blank template.
To add a new template, click on the Inserter or plus icon next to templates.
A modal appears where you can choose between different template options.
You can, for example, create a template for a specific page,
or a template for all your post categories, or an individual category.
You can even create your own custom template that can be applied to any post or page.
When you create a new template, in this case a custom template,
and after you have named it,
you will be asked if you would like to select a pattern,
and if you want to start blank, merely select Skip.
Next, how do we edit templates? After selecting the relevant template,
you can click on the Edit icon in the sidebar next to pages,
or on the template screen on the right.
Once your template opens up, you can start editing your header and footer template parts.
Let's pause to reflect for a moment. When you edit a template,
you need to remember to separate the dynamic parts and the static parts.
The dynamic part is the content part that will change for every page or post that uses the template.
And as you can see in this example, the content from your page or post will be displayed where the Post Content block has been added in your template.
The static parts are the reusable parts of the template that will stay the same, like the header and the footer.
We therefore don't add any content to the template.
The Site Editor therefore makes a clear distinction between editing a page's content and its template,
making it easier for you to switch between the two modes and view them in the appropriate context.
Let's see this in action.
So let's go ahead and open up one of our pages.
And in this case, my sample page.
Once we open up our page, we can also go ahead and open up the list view.
And when we select the Post Content block, we will notice that all our content that we've added has been added to the post content block.
You will also see this in the settings sidebar on the right.
But what will happen now if I try to edit my header and my footer?
Let's go ahead and click on the header to try and modify this.
You will see a message that pops up and it says edit your template to edit this block.
And the same goes for our footer.
If we try and edit our footer, we will be prompted to make our way to the template.
So to do this, we can click on edit template in the settings sidebar on the right at the bottom.
This will take you to the template that has been assigned to the relevant page.
And now we can go ahead and update our header and our footer.
And we will notice that the post content block is only a placeholder.
We cannot add any content here.
Next, I'm going to select my footer, click on the three vertical dots,
and then replace this footer with one of my existing footer template parts.
And when I'm done, I'm going to click save, and now I have updated my page template.
If you would like to return to the page, click on back on your toolbar.
And this will take you back to the page so that you can modify your content.
And of course, you can edit your template separately.
When we make our way back to templates in the side view sidebar,
we will notice right at the bottom there's an option to manage all templates.
And when you select this, you will be able to rename and delete custom templates you have created,
or you can clear the customizations of built-in templates you have modified.
In the next section, we are going to discuss assigning a different template to a page or post.
Now, at the moment, we are on the front end of my sample page,
and we have assigned this page to the page template.
I've gone ahead and created a custom template with a new header and a new footer.
To assign the new custom template, we can click on edit page at the top,
or we can make our way to the dashboard, open up pages,
select the relevant page, in this case the sample page.
And then once we open up the page, we will see our content, but when we open up our sidebar settings,
on the right, we will see that this page has been assigned to the page template, the default template.
If you click on the name, you will notice you are able to add a new template from here.
You can edit the template assigned to the page,
or if you click on the drop-down, you can select or assign a new template to this page.
I'm going to go ahead and select the custom template which I have created.
And once I've done that, I will update.
We can preview the page in a new tab,
and now we will see that this page has a new header and a new footer due to the custom template which I have assigned to this page.
Lastly, let's briefly talk about header and footer template parts which we use to set up our templates.
You can edit a header or footer template part right within a template.
In this example, I am editing my header template part, and I'm stacking my Site Title and my Site Tagline block together in a stacked Group block.
Then I'll also make sure that I open up my setting sidebar, and I will remove some spacing between the two blocks.
When you select a header or footer template part, you will see an option that says "Edit".
When you select "Edit", you will be able to edit the template part in template editing mode without any distractions.
Another option is to make your way to patterns in your site view sidebar.
When you select patterns, you can scroll to the bottom and here you are able to view and modify your header, footer and general template parts.
To add a new template part, click on the plus icon next to "Patterns" and select "Create Template Part".
You have an option between General, Header and Footer Template Parts.
General template parts are not tied to any particular area, and remember to give your template part a descriptive name.
When you click on the three horizontal dots below a template part, you will be able to rename, duplicate or delete it.
And when you select the template part, you will be able to modify it in editing mode without any distractions as shown before.
We hope you now have a better understanding of how templates work.
To review, a template provides the structure for how your content is displayed, and this is usually accomplished by header and footer template parts.
And templates can be assigned to single or multiple pages.