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 things like header, content, and footer areas. This workshop will explore using, editing and adding templates to customize your site by giving your posts and pages their own unique designs and styles.

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 new templates for posts or pages.
  4. Clearing customizations

Comprehension questions

  1. Do you want to change how single posts are displayed?
  2. How can you create a landing page using templates?
  3. Do you know the difference between the Site Editor and the Template Editor?

Transcript

Hi, and welcome to Learn WordPress. Today we are going to dive into templates. So templates is one of the new features of full site editing. And the aim of full site editing is to give you the power to customise your entire site without code. So what are templates? Templates are groups of blocks combined to create a design for a web page. You could also say templates can be described as a full-page layout. That includes things like header, content and footer areas. Don’t get confused between templates and themes. A theme will give your site the look and functionality you need, and it will allow you to set the design of your entire site. Templates, on the other hand, allow you to customise your site by giving your posts and pages their own unique designs and styles.

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 a Post Content block. And templates are as the name implies, design templates that can be used by single or multiple pages and posts.

To access templates, make your way to Appearance and click on Editor. This will take you into your Site Editor and open up to your homepage template. If you click on the WordPress icon top left, it will open up the Template List View. Now let’s stop and talk about the site editor for a moment. The Site Editor can be used to modify templates and 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 and the colour of your entire site. But we are here to talk about templates. So let’s go ahead and click on templates in the Template List View. When you start building a new website, you can edit existing templates or add new ones.

The theme you’re using will determine which existing templates are available to use, or which templates you can add. If we change our theme to a different block theme, such as TT1 Blocks, we’ll be able to compare. So make your way back to the Editor. Click on the WordPress icon, templates, and you will see the existing templates you can use and the ones you can add using the TT1 Blocks theme. Let’s look at some of the most common templates you will find and what function they fulfil. So first up is the Single Post template. And this displays a single blog post. Next is the Page template. And this displays individual pages and if you edit this template, all your pages will display the changes you have made. You can override this by creating a custom template using the Template Editor. The Index template is the default template used when no other template is available. And lastly, the 404 template displays when no content is found.

How to edit templates via the Site Editor? Let’s make our way back to the Editor. Click on the WordPress icon and choose Templates. You merely have to click on a template and once it opens up, you can start editing. So let’s open up the Single Post template. This template displays a single post so you can customise the way you want your single posts to be displayed. Let’s make a few adjustments. Firstly, select the Post Title block and use your block toolbar to align the text to centre. Below that is the Post Featured Image. You will see the Post Content block, Post Date, Post Author and Post Terms. Let’s remove the Post Author block and then insert it below the Post Title. And use your block toolbar to align the text to centre. And now we have modified how we want our single posts to be displayed by changing the template. Take note of the Post Content block. This is where your dynamic content or post content will be pulled into.

Let’s pause to reflect for a moment. When you create a template you get the best use when you separate the dynamic part 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 static parts are the reusable parts of the template that will stay the same like the header and footer areas. As mentioned, the dynamic part or post content is pulled into a template through the Post Content block and you, therefore, don’t add content to your template, only structure and static information. The content from your page or posts will be displayed where the Post Content block has been added. If we make our way back to Templates and 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 up, we are going to click on our page template. Here you can decide how pages must be displayed. So let’s change the footer template of our Page template. Click on the footer template part and then click on List View to see everything in context. And once you’re ready, click on the Replace button on your block toolbar. And replace this footer with a different one. This template will now have a different footer than other templates. If you wanted to edit your homepage, you can find your homepage template under templates. Or when you click on Site in the Template List View, you can access your homepage directly and start editing. How to add a template via the Site Editor? If you want to add a new template via the Site Editor, select the Add New button top right. A modal appears where you can choose between different template options depending on your theme. The 2022 theme allows me to add a Frontpage template or Search template, I’m going to go ahead and add a Search template. Once I click on Search, it will open up a blank canvas for me to personalise my Search template.

Lastly, we are going to discuss how to edit or create templates for posts and pages via the post also known as the block editor. The Template Editor is a feature that allows block editor users to edit and create templates that are page or post users. So let’s make our way back to the Dashboard and click on Pages, Add New. And let’s name this page Templates. When you’re on a page or post you can assign an existing template to the page or post or create a new one. 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. To edit the default template click on Edit in the setting sidebar. And this will take you into the Template Editing Mode. And as you can see at the top this is your Page template, you will know you are in the Template Editing Mode when you see the doc frame around the page. And here you are able to make any changes you wish.

If you would like to assign a different template to this page, go to your sidebar settings and click on Default Template. And here you will see a list of other templates you can choose from. I will go ahead and select the page with no seperators template. And now you can edit the template as you please. If you would rather want to create your own custom page template, click on New next to Edit. You’ll then be asked to name the new template and make sure you give it a descriptive name. I’m going to call this my landing page and then click on Create. Again this will take you into the Template Editing Mode and you have the option to create your own personalised template. And remember, you can assign this template to this page or other pages.

Visit Learn WordPress for more workshops and training material.

Workshop Details


Presenters

Wes Theron
@west7

I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.