Using Page Templates
Templates are groups of blocks combined to create a design for a webpage. You could also say a template is a full-page layout with header, sidebar and footer areas. This Tutorial will explore using, editing and adding templates to customize your site by giving your posts and pages their own unique look and feel.
Learning outcomes
- Accessing templates and understanding the difference between dynamic and static content.
- Editing existing and adding new templates provided by your theme.
- Assigning existing and creating custom templates for posts or pages.
- Clearing customizations
Comprehension questions
- How do you customize your 404 page?
- How can you create a landing page?
- Do you know the difference between the pages and templates?
Resources
Personalizing your 404 Template
Transcript
Introduction
Welcome to Learn WordPress. In today’s session, we are going to be talking about 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.
Definition
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.
Accessing templates
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. 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. These templates can, of course, all be modified as you please. There are also other built-in templates worth exploring, for example, a blank template.
Adding a new 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.
Editing templates
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.
Dynamic versus static parts of a template
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. 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 to 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.
Templates versus pages
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. In this case, my sample page. Once we open up our page, we can also go ahead and open up the list view. When we select the Post Content block, we will notice that all the 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.’ The same goes for our footer. If we try to edit our footer, we will be prompted to make our way to the template. 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. Now, we can go ahead and update our header and our footer. 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. 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. As discussed, you can edit your template separately. When we make our way back to templates in the Site View Sidebar, we will notice right at the bottom, there’s an option to manage all templates. When you select this, you’ll be able to rename and delete custom templates you have created or you can clear the customizations of built-in templates you have modified.
Assigning a template
In the next section, we are going to discuss assigning a different template to a page or post. 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, and select the relevant page, in this case, the sample page.
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 that I have created. Once I’ve done that, I will update. We can preview the page in a new tab. Now, we will see that this page has a new header and a new footer due to the custom template that I have assigned to this page.
Header and footer template parts
Lastly, let’s briefly talk about header and footer template parts that 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 “Settings” 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. 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. When you select the template part, you will be able to modify it in editing mode without any distractions, as shown before.
Conclusion
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. Please visit Learn WordPress for more tutorials and training material.
