Templates
Templates are groups of blocks combined to create a structure or 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 add 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
- A local install of WordPress
- Demo content
- A block theme, such as Twenty Twenty-Two
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:
- 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.
- 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.
- True
- False
Answer: 1. True
You can’t clear the customizations to templates that have been provided by a block theme.
- True
- False
Answer: 2. False
Do you create a custom template via the Site Editor or post/block editor?
- Site Editor
- Post/block editor
- Both
Answer: 3. Both
Additional Resources
Example Lesson
Templates are groups of blocks combined to create a structure or 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
The theme you are using will determine what type of templates are available. 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:
- Single Post (Displays a single blog post.)
- 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.
- Index (The default template used when no other template is available. This is a required template in WordPress.)
- 404 (Template shown when no content on your site is found.) You can personalize this instead of just saying 404 Error.
When you start building a new website you can edit existing templates or add new ones. Please note, it is limited to what templates can be added with the Site Editor. You can also add a custom template in the Site Editor.
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 custom 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.
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:
- 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.
- 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.
- 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 content to your post.
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.
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.
How to add a new template or create a custom template
If you 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. You can also create a custom template at the bottom of the list.
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.
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.
How to create a custom template
- Add a new post or page.
- Open the block settings sidebar and navigate to the Page or Post Settings tab.
- Click on the ‘Add template’ icon.
- 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 to the structure of the template.
