Introduction to the template editor

November 20, 2021
Friends! Because of changes in the latest Gutenberg versions, this guide is out of date. I am in the process of updating it. Thank you for your patience.

Level: Beginner, no code

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:

Estimated reading time: 7 minutes

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 template section is inside the document settings sidebar in the block editor. It has a heading with the name of the current template, a select list with the available templates and two buttons: Edit and New.

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:

A view of the template editor interface. The image has three numbers layered on top of it:
1. The document settings sidebar.
2. The template option menu which is centered at the top of the page, between the toolbar menu and the saving and settings menu.
3. The back button, which is in the upper part of the page, between the toolbar menu and the content area.
  1. The document settings sidebar in the template editor is titled Template, and it displays the template name and description.
  2. 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:

The template options modal has a text input field where you can update the name of the template, and a button that you can use to delete the template.

3. Another difference is that there is a Back button above the content area that takes you back to the block editor and the page or post you were editing.

The back button is placed in the border that is between the upper toolbar menu
and the content area.

The template editor content area

The area in the editor where you place the blocks is referred to as the 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 front of the website.

Open the list view (The last icon in the toolbar menu):

The list view presents all blocks on the page with an icon and block name.
The nested items in the list can be collapsed and expanded. The image shows a group block with three blocks, and the post content block with two paragraph blocks inside.

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 that 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:

The content in the block editor is used inside the content block in the template editor.

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 purpose of the template.
Continue by clicking the Create button.

The modal that shows when you select the new option contains a text input field for the template name, a cancel button, and a create button.

When the template editor opens, there may be blocks already placed in the content area. These blocks can be different depending on the theme:

A view of the template editor when you create a new template with TT1 Blocks. The site title and tagline are showing above the content.

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.