Using Page Templates

Templates are groups of blocks combined to create a design for a webpage. You could also say templates can be described as a full-page layout that includes 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

1. Accessing templates and understanding the difference between dynamic and static content.
2. Editing existing and adding new templates provided by your theme.
3. Assigning existing and creating custom templates for posts or pages.
4. Clearing customizations

Comprehension questions

1. How do you customize your 404 page?
2. How can you create a landing page?
3. Do you know the difference between the Site Editor and the Template Editor?

Resources

Intro to the Site Editor and Template Editor

The Difference Between Reusable Blocks, Block Patterns, Templates & Template Parts

Personalizing your 404 Template

Transcript

Welcome to Learn WordPress. In today’s session, we are going to be talking about templates. 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. If you click on the WordPress icon, or site icon top left, it will open up the Template List View. The Site Editor can be used to modify templates, template parts, and also customise the style of your site. When you click on the styles icon, top right, you have the ability to change the typography, colours and layout of your entire site. But we are here to talk about templates so click on Templates in the Template List View. 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 structure for how individual pages will be displayed. Next is the Single post template and this displays a single blog post. The Index template is used to display posts, and the 404 template displays when no content is found. And then of course there are other built-in templates also worth exploring. If you want to add a new template, select the Add New button top right. A modal appears where you can choose between different template options. You can even create your own custom template that can be applied to any post or page.

But how do you edit templates via the Site Editor? You merely have to click on the template, and once it opens up, you can start editing your header and footer template parts. Let’s just pause to reflect for a moment. When you create a template you get the best use when you 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 the content from your page or post, will be displayed where the Post Content block has been added. And the static parts are the reusable parts of the template that will stay the same, like the header and the footer areas.

Let’s look at a sample page to see how this practically works. I’ve added my content to my page in the block editor and I’ve assigned this page to the Page template; and this is the dynamic content that will be displayed on the front end through the Post Content block. And when we click on Preview, we will be able to see the structure of the template that has been assigned to this page with the header template part, the content which is being displayed by the Post Content block and the footer template part.

When we return to the template area, it is important to note that a blue dot will appear above the template icon when the template has been customised, and when you click on the three vertical dots on the right-hand side of the template, you will be able to clear all the customizations you have made in one click.

Next, let’s talk about template parts. When we make our way to template parts, we will see template parts that we’ve created ourselves and ones that have been provided by our theme which we can edit. For context, template parts are used to create areas like your header, footer, and sidebar. If you decide to add a new template part, click on Add New. 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.

Lastly, we are going to discuss the Template Editor. So I’m going to make my way back to the dashboard and open up the sample page. The Template Editor lets you edit, create and assign templates to individual posts and pages. When you create a new page or post it is automatically assigned to the default template, and for pages, the default template is the page template. If you would like to edit your template, click on Edit Template below, and to add a custom template, click on the Add Template icon top right. And once you’ve named it, you can set up your custom template.

To assign a new template to this page, click on the drop-down and select one of the custom templates you have made or one of the built-in templates provided by your theme. I’m going to assign a custom template that I’ve created to show you how the structure of the page changes. So once I’ve updated we can click on Preview and now we will notice that this page has a new header template part and a new footer template part as I have assigned this to a custom template that I’ve made.

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 it can be assigned to single or multiple pages or posts to control the layout and look you’re after. Please visit Learn WordPress for more tutorials and training material.