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 allows block editor users to build their entire site with blocks. The Template Editor lets you edit, create and assign templates to individual posts and pages.

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?
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, you will notice that the Customizer has disappeared. But when you make your way to Appearance, you will see an option, namely the Editor, and when you click on the Editor, you will be taken to the Site Editor, where 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, 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, your list of Templates and your list of Template Parts. If you click on the three vertical dots top right, you will notice there are some settings and preferences. For example, spotlight mode will help you focus on one block at a time, and if you scroll down, there’s another option called keyboard shortcuts, which might come in very handy. And then, right at the bottom, if you click on Preferences, there are some options to take note of: Spotlight mode, the option to show button text labels instead of icons, and lastly, Always open list view, which basically means that the list view for blocks will always be open or visible.

How to Edit styles. When you click on the styles icon, you have the ability to change the style combination of your theme, and you can change the typography, colours and layout of your entire site. And if you look down further below, you also have the option to customise the appearance of specific blocks for your whole site. Global styles, therefore, help users change the style of their site without having to edit individual blocks or pages. Let’s see how it works. If you click on Typography, you will be able to manage the typography settings for text links, headings and buttons. And you can also change the colours for these elements. And when you make your way to layout, you will notice you even have control of elements such as padding and block spacing.

How do we 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 a webpage. Here you will notice there is a range of templates that come with your theme, built-in templates. For example, the Page template that displays a single page, or the Index template that displays posts, or the 404 template that displays when no content is found, and when you click on Add new top right, you will be able to add a variety of new templates, even a custom template that can be applied to any post or page.

Let’s open the page template to gain a better understanding of how a template works. A page template usually includes a header, a content area, and specifically the Post Content block that pulls in the content from the page it is assigned to, and then a footer. 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. Remember, therefore, you don’t add content to the Page or Index template. The content from a page or post will be pulled in by the Post Content block or the Query Loop block. The reusable parts are the static parts of the template that will stay the same, for example, the header and the footer.

So let’s go and visit a page that has been assigned to this template. So I’m happy with my footer and with my header. But I would like to remove the Post Title, Post featured image and the Separator block as well as the Spacer block above the post Content block. And once I’ve clicked Save, we want to make our way to the front end of the website. But before that, let’s open up the page that we want to view from the front end. As you will notice, I’ve added some dummy content and on the right in the sidebar settings, we can see this page has been assigned to the page template, which is the default template. And now, if we make our way to the front end of the website and open up this page, we will see the structure that we have created with our page template.

Let’s also talk about template parts. As mentioned, a template usually has a header and a footer, and these are called template parts. When you make your way to template parts, we will see template parts that we’ve created ourselves and template parts that have been provided by our theme. And if you see a dot above the template part icon, you will know that this template part has been customised. To create your own template part, click on Add new top right, 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 see how we can change the template part that a template is using. So I’m going to make my way to the Index template, which displays posts. I’ll open up my list view, select the header. Now we can edit the template part header that has been provided by our theme in Template Editing Mode or we can go back, select the header again, click on the three vertical dots and select Replace header. And here, you are able to select an existing template part or a pattern.

To end off, let’s talk about the Template Editor. The Template Editor lets you edit, create and assign templates to individual posts and pages. So let’s say, for example, I created a custom template for a landing page that I wanted to use on my site. I can name it appropriately and then click Create. And now, I have updated my landing page template with a new header and a new footer but let me show you how the Template Editor works by making our way back to our test page.

Now, as you would have remembered, this page has been assigned to the Page template. But the Template Editor will allow you to assign this page to a different template if you wish to. You can also create a custom template in the Template Editor by clicking on Add template and following the same process as we did before. Let’s see how it works when we assign a new template to this page. In this case, I’m going to select the landing page template that I just created. Once I’ve updated, we can make our way to the front end of the website and when we open up the page now, we will notice the new template with the new template parts have been assigned to this page.

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