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 lesson plan will explore using, editing, and adding templates to customize your site by giving your posts and pages their own unique designs and styles.

Objectives

After completing this lesson, participants will be able to:

  • Access templates and explain the difference between dynamic and static content.
  • Edit existing and adding new templates provided by your theme.
  • Assign existing and create new templates for posts or pages.
  • Clear customizations.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Can you describe the function of a template?
  • Are you familiar with assigning a template to a post or page?
  • Do you know the difference between the Site Editor and the Template Editor?

Materials Needed

Notes for the Presenter

  • It will be helpful for you to have a local site created before this lesson.
  • Templates Workshop

Lesson Outline

  • Explain the role and function of templates.
  • Demonstrate the difference between the Site Editor and Template Editor.
  • Discuss when it is useful to edit or create templates.
  • Differentiate between the dynamic part (content) and reusable parts (static parts).
  • Demonstrate how to edit and add templates via the Site Editor.
  • Demonstrate how to edit, create new and assign templates to pages and posts via the Template Editor.

Exercises

Edit a template and create a custom template

Participants have watched you edit and add templates. Have them edit a template or their choice via the Site Editor and secondly, create a custom template such as a landing or portfolio page.

Assessment

Choose the correct statement:

  1. A template will give your site the look and functionality you need and it will allow you to set the design of your entire site.
  2. A template controls the layout of your pages or posts. Templates allow you to customize your site by giving your posts and pages their own unique designs and styles.

Answer: 2 “A template controls the layout of your pages or posts. Templates allow you to customize your site by giving your posts and pages their own unique designs and styles.”

Content gets pulled into posts and pages via the Post Content block.

  1. True
  2. False

Answer: 1. True

You can’t clear the customizations to templates that have been provided by a block theme.

  1. True
  2. False

Answer: 2. False

Do you create a custom template via the Site Editor or post/block editor?

  1. Site Editor
  2. Post/block editor

Answer: 2. Post/block editor

Additional Resources

Example Lesson

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.

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 allow you to customize your site by giving your posts and pages their own unique designs and styles. And the awesome thing is, you will be able to use all the available blocks to meet your requirements.

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 used by single or multiple pages and posts.

Templates and the Site Editor

When you start building a new website you can edit existing templates or add new ones. Please note, it is limited what templates can be added with the Site Editor.

Currently, it’s limited to adding the following primary templates via the Site Editor. Please note, this list will expand with new releases:

  • Front page
  • Single page
  • Archive
  • Search
  • 404
  • Index

The theme you are using will determine what type of templates are available. In the examples below you will see the difference between the available templates when using the Twenty Twenty-One blocks theme compared to the Twenty Twenty-Two block theme.

The available templates when using the TT1 blocks theme.
Zoomed in image options to add new templates with the TT1 Blocks theme
The available templates when using the Twenty Twenty-Two block theme.
Zoomed in image options to add new templates with the Twenty Twenty-Two theme

Here is the list of some of the most common templates you will see. As mentioned, templates will differ, depending on the theme you are using:

  1. Single Post (Displays a single blog post.)
  2. Page (Displays individual pages.) If you edit this template, all your pages will display the changes to the layout and style you made. You can override this when using the Template Editor.
  3. Index (The default template used when no other template is available. This is a required template in WordPress.)
  4. 404 (Template shown when no content on your site is found.) You can personalize this instead of just saying 404 Error.

Templates for posts and pages

The Template Editor is a feature that allows block editor users to edit and create templates that a page or post uses. When you are on a page or post, you can assign an existing template to the page or post or create a new post or page template. When you create a new page or post it is automatically assigned to the ‘Default template’. The ‘Default template’ is the ‘Page template’ or ‘Post template’ which displays individual pages or posts.

Template section in the settings sidebar highlighted in a red box. Selecting the Default template or assigning a different page template.
Drag to the left or right: Create a new post or page template

When to use templates

Some people might be asking, “When or why will I need to create or edit templates?”  Great question; here are a few examples to consider:

  1. Various layout structures

Templates allow you to create various layouts and structures.  Maybe you would like to personalize your 404 Page or you want to display a custom menu and featured image on specific pages only.

An example of a personalized 404 template.
An example of a page template with a custom menu and featured image.
  1. Create a product landing page

Create a template for single product/service landing pages using the template editor. Landing pages are different from webpages as their primary purpose is to encourage visitors to sign up for a service, join an event, buy a product or join a mailing list. Some people might refer to it as a marketing page. It is a dedicated page on a website that you land directly from an external source such as an advertisement, email or social media platform.

An example of a landing page encouraging visitors to create a free account.

https://www.gosquared.com/ 

An example of a landing page for an event.
  1. Editing the template for displaying a single blog post

WordPress comes with Single Post and Page templates.  If you want to customize the layout and structure of your pages, you can edit the Page template.  

If you want to set the layout and structure of your single posts, you can alter the Single Post template. For example, If you review newly released apps, you could create a Single Post template that suits your design and layout needs. The only thing you have to worry about is adding the content to your post. 

Default Single Post Layout

Dynamic and Reusable Parts

When you create a template, you get the best use when you separate the reusable parts from the dynamic part.  The dynamic part is the content part that will change for every page that uses the template. The reusable parts are the static parts of the template that will stay the same.

It is also very important to remember that content (dynamic part) is pulled into a template through the Post Content block. You, therefore, don’t add content to your template, only structure and static information. The content from your page or post will be displayed where the Post Content block has been added.

How to edit templates via the Site Editor

Each block theme comes with a set of templates that you can edit directly. After going to Appearance > Editor > Templates, you’ll see all templates on your site, including any you have created and any that come with your theme. To edit a template, just select the name and this will open up the Template Editor for you to customize and save.

Templates that come with the Twenty Twenty-Two theme
Close-up of the available templates that come with the Twenty Twenty-Two theme
Close-up of the available templates
An example of what a the Single Post template will look like when you edit it via the Site Editor.
Single Post template
An example of what a the Page template will look like when you edit it via the Site Editor.
Page template

How to clear customizations to templates provided by a block theme

When changes are made to templates that come with your block theme, you will see the option to clear customizations when viewing all of your templates at Appearance > Editor > Templates. Simply select the three-dot menu and choose the option to clear customizations.

A red arrow pointing to where you need to click if you would like to clear customizations made to a template.

How to add a new template

As mentioned, there are a limited number of templates you can add via the Site Editor. In particular, you cannot add custom templates in the Site Editor to use for your posts or pages. To do that, you’ll need to follow the previous section and use the Template Editor.

If want to add a new template provided by your theme, make your way to Appearance > Editor > Templates. When you select the ‘Add New’ button, a modal appears where you can choose between different template options.

A red arrow pointing to the new templates that you are able to add when using the Twenty Twenty-Two theme.

After selecting from the options provided, you will then be taken to the new template in order to customize it as you would like. For any new templates you create, you’ll see the option to delete them from the template list.

How to add and edit templates via the post/block editor

The Template Editor is a feature that allows block editor users to edit and create templates that a page or post uses. Here are some step-by-step instructions to help to review.

How to edit a template 

  • Add a new post or page.
  • Open the block settings sidebar and navigate to the Page or Post Settings tab.
  • Under the “template” section, select the ‘Edit’ option. If you don’t see the option to edit at first, it’s likely because you’re not using a block theme that allows you to both create and edit the current theme templates.
  • From there, you’ll be taken into Template Editing Mode, where you can make any changes you’d like. If you need to, you can select the ‘Back’ option to go back to your content and make changes.
  • When you’re done making changes, select ‘Publish’ and go through the saving flow to confirm the changes you’d like to make. Keep in mind that you might see multiple items to save.
Editing a page template via the Template Editor. A red arrow pointing to the Edit button in the settings sidebar.

How to assign a template to a post or page

  • Open a page or post that you want to alter the template of.
  • Open the block settings sidebar and navigate the Page or Post Settings tab.
  • Under the “template” section, you’ll see a dropdown option allowing you to select which template you want to use. If you don’t see a dropdown option, it means you need to create more templates.
Assigning a new template via the Template Editor. A red arrow pointing to available templates to select from.

How to make a new template

  • Add a new post or page.
  • Open the block settings sidebar and navigate to the Page or Post Settings tab.
  • Under the ‘template’ section, select the ‘New’ option.
  • You’ll then be asked to name the new template. Make sure to give it a descriptive name like “Full Width”.
  • From there, you’ll be taken into template editing mode where you can make any changes you’d like. You can select the ‘Back’ option to go back to your content and make changes if you need to.
  • When you’re done making changes, select ‘Publish’ and go through the saving flow to confirm the changes you’d like to make. Keep in mind that you might see multiple items to save.
Creating a new template for a page via the Template Editor. A red arrow pointing to New and a red square around a popup box which requests you to name your custom template.

Saving flow

The Editor uses a multi-entity saving function that allows you to save different things. Here is an example of the saving flow and the different changes it is saving.

An example of the saving flow when editing or creating a template.

Lesson Wrap Up

Tip: 💡 Follow with the Exercises and Assessment outlined above.