November 20, 2021
👋 Friends! This guide is out of date because of changes in the latest Gutenberg versions. I am in the process of updating it. Thank you for your patience.
Estimated reading time: 7 minutes
This is a combined lesson and exercise with an introduction to the WordPress template editor. You will learn how to access the editor, use the interface, and the differences between the block editor and template editor.
To illustrate how the editor works, I want to show you two different templates in TT1 Blocks. After that, you will create your first template.
For this lesson, you need to have:
- The latest versions of WordPress and Gutenberg (This lesson was written for Gutenberg version 11.2.1).
- TT1 Blocks theme.
Table of contents
The block editor Template section
You can access the template editor from the block editor.
Start by creating a new page. On this page, I want you to add a page title and a little bit of content. The content can be anything, for example, a few paragraphs or an image.
-Save your page before you continue.
Next, open the document setting sidebar by clicking the cogwheel setting symbol. Locate the Template section below the Status & visibility section:
The section title shows you the name of the current template: Template: Page.
Below the title is a list of all templates that can be used with pages, followed by two options: Edit and New.
The template editor interface
To open the template editor, browse through the templates in TT1 Blocks and select and edit the Default template.
The template editor is very similar to the block editor. Once inside, the interface should feel familiar, but with a dark border around the content area:
- The document settings sidebar in the template editor is titled Template, and it displays the template name and description.
- Above the content area, between the toolbar menu and the saving- and the settings menu, is a new template option menu that shows the page title, template name, and description.
When you have created custom templates, you can rename and delete them from this menu:
3. Another difference is the Back button above the content area that takes you back to the block editor and the page or post you were editing.
The template editor content area
The area in the editor where you place blocks is referred to as a content area and sometimes as the canvas.
The default template in the TT1 Blocks theme includes the page title and the content that you added in the previous step.
It also includes the site title and tagline, a placeholder for the navigation block, plus a comment area and site footer that were not visible in the block editor.
This represents the whole page as it will look on the website’s front.
Open the list view (The last icon in the toolbar menu):
All blocks on the page are listed here (In the image, I have collapsed the footer blocks and comment blocks to save space). When you click on a block in the list view, it is selected and outlined in the content area.
How templates display content from the block editor
One of the most important blocks that you will use in the template editor is the Post Content block. This block displays all of the content you added to the page in the block editor.
In other words, the template editor takes your content and places it in the context of a full page:
You now have two views of your content; the block editor where only the content shows and the template editor where the same content is displayed on the full web page.
-This is how you can use the same template for more than one page or post but display different content.
Creating new templates
You create new templates with the New option in the Template section in the block editor:
When you select New, the editor shows a modal or popup to enter a name for the template. Names are optional, but I strongly recommend adding one that describes the template’s purpose.
Continue by clicking the Create button.
There may be blocks already placed in the content area when the template editor opens. These blocks can be different depending on the theme:
Saving changes
The WordPress template editor uses something that the developers call “multi-entity saving” because you can save three different things:
- The template
- The content, that is, the post or page that is in the content block
- Site blocks: Site title, site tagline, site logo
When you publish updates, you will be asked which part you want to save.
Only parts that you have unsaved changes for will show in the save panel:
Summary
In this lesson, you have learned how to select templates from the template section, navigate between the editors, and create and save new templates.
In the upcoming lesson, you will learn about template parts and how to make changes to the site header. Until then, keep learning and practicing by creating templates on your WordPress test site.