Using page templates

Transcript

Learning outcomes

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.

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; 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.

Exploring 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, and the theme you are using will determine which existing or built-in templates are available to use.

First up is the page template, which creates the structure for displaying individual pages. 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, 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.

Let’s pause to reflect for a moment. When you edit a template, you must remember to separate the dynamic and 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. Therefore, we 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. 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 to modify this. You will see a message that pops up, and it says to 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. 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. Now, we can go ahead and update our header and footer. We will also 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. I have now updated my page template. If you would like to return to the page, click on Back on your toolbar. This will take you back to the page so that you can modify your content. 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. 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.

Assigning templates

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. 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, and 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 the 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 blocks together in a stacked Group block. Then, I’ll also make sure that I open up my settings sidebar and 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. Templates can be assigned to single or multiple pages.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.