Intro to the Site Editor and Template Editor

This workshop provides an overview of how to access and use the Site Editor and Template Editor. The Site Editor is a new feature that allows block editor users to build their entire site with blocks, including using a few new theme blocks and customising it using a new styling system. The Template Editor is a feature that allows block editor users to edit and create templates that a page or post uses.

Learning outcomes

1. Managing templates, template parts and global styles via the Site Editor.
2. Editing, creating and assigning templates to individual posts and pages via the Template Editor.

Comprehension questions

1. Have you installed a block theme with WordPress 5.9 or a classic theme that has opted into this feature?
2. Why don’t you need access to the Customizer anymore?
3. What is the difference between the Site Editor and Template Editor?

Resources

Site Editor

Template Editor

Transcript

Hi, and welcome to Learn WordPress. Today we are going to take a closer look at the Site Editor and Template Editor. If you have installed a block theme, such as Twenty Twenty-Two, and you’re ready to start your full site editing journey, you will notice that the Customizer has disappeared. But when you make your way to Appearance, you will see a new option, namely the Editor. And when you click on the Editor, you will be taken to the Site Editor. And here you are able to modify templates, template parts and also customise the style of your entire site.

The Site Editor provides a Template List View, as you will see on the left, allowing users to navigate between Site, which is your homepage template, templates, and all the different template parts. This is an important piece of the Site Editor puzzle, you will essentially be able to edit the design of your entire site. In order to switch what you are viewing, click on your WordPress icon or site icon top left. You will then be able to select between going back to your Dashboard, Site, which is your homepage template as mentioned, your list of templates and your list of template parts.

When you click on the Styles icon, you have the ability to change the typography and the colours of your entire site. And if you look down further below, you also have an option to customise the appearance of specific blocks for your whole site. Just to take note, Styles will be available to use regardless of what template or template parts you’re editing. If you click on Typography, you’ll be able to manage the typography settings for text and links. You can change the background colour of your site or the colour of text and links in one click. You will see at the top right it says ‘set a background colour or gradient for the whole website.’

How to manage templates via the Site Editor? Click on the WordPress icon top left and make your way to templates. Templates are groups of blocks combined to create a design for web page. Let’s open the Page template. You could also say templates can be described as a full page layout. That includes things like header, content and footer areas. Click on the List View. And at the top you will see the header and at the bottom of the page, your footer and in the middle your Post Content block. And it’s important to note that content is displayed by the Post Content block.

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 usable parts are the static parts of the template that will stay the same. For example, the header and the footer. In this example, I’ve updated the page template. And as you will see we have a new header template part, a new footer template part, and the Post Content block displays the content of the page assigned to this template.

Now let’s go and visit one of the pages that is assigned to this template. Click on the WordPress icon, Dashboard. Once in your dashboard, click on Love Travelling and this will take you directly to your site. And this is your homepage and the homepage is assigned to your homepage template. So let’s click on the History of Travel. And as you will see this page has been assigned to the page template and therefore this page has the same header and footer as your page template. And the content is being displayed by the Post Content block. Next up, let’s talk more about managing template parts. For context, a template part is best used to create areas like your header, footer and sidebar.

When we make our way to template parts, we will see template parts that we’ve created ourselves and template parts that have been provided by our theme. So the four template parts at the bottom of the list are the template parts provided by the Twenty Twenty-Two theme. And if you see a dot above the template part icon, you will know that this template has been customised. The page template at the top is the template part that I’ve created myself. So let’s go ahead and open up the template part that I’ve created. And you will recognise this template part from the page template that we have modified. Next, let’s open the footer template part provided by our theme, which I’ve customised.

Lastly, you might decide to add a new template part. And when you add a new template part you have an option between general, header and footer template parts. General template parts are not tied to any particular area. And remember to give your template part a descriptive name. Let’s look at how to add a Template Part block. I’m going to open up my 404 template which displays when no content is found. And as you will see, there is no header at the moment. So let’s open up the List View. And above the group block, I’m going to insert my Template Part block and once you select your Template Part block, you can choose an existing Template Part block or create a new one. Let’s choose an existing one, the one I’ve already created.

Finally, let’s talk about the Template Editor. The Template Editor lets you edit, create and assign templates to individual posts and pages. Let’s go and see how that works in practice. Click on the WordPress icon top left and return to the dashboard. Click on Pages and open up one of the existing pages. In the setting sidebar on the right, you will notice that the template that has been assigned to this page is the default template, which is your page template. You can also assign one of the other available templates. When you’re ready, you can edit the template of your choice.

When you click on Edit, it takes you into the Template Editing Mode. And you will know that you are in the Template Editing Mode when the template name is visible in the top bar. And secondly, the dark frame that appears around the template as you’re editing. But you also have a third option; to create a brand new custom template. It says describe the purpose of the template, example full-width, and custom templates can be applied to any post or page. You might decide to create a custom template for a landing page, or maybe for a portfolio page. Once you click Create, you will notice that the header looks different and there’s no footer. So you have a blank canvas to work from to create your own custom template. Just a reminder that Template Editing Mode unlocks the ability to switch between editing the content of an individual post or page and the template that the post or page uses.

We trust you now have a better understanding of how to use the Site Editor and Template Editor. Visit Learn WordPress for more workshops and training material.