Intro to the Site Editor and Template Editor

This workshop provides an overview of accessing and using 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

How to use the WordPress Stylebook with your block theme

Site Editor

Template Editor

Transcript

Hi, welcome to Learn WordPress. In today’s session, 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: Editor. And when you click on the Editor, you’ll be taken to the Site Editor, where you’re able to modify templates, template parts, and also customise the style of your whole website.

The Site Editor provides a template List View, as you will see on the left, allowing users to navigate between 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 return to your Dashboard, click on the site icon or WordPress icon top left.

How to Edit styles? When you click on the template, you can make your way to the styles icon top right, and here you have the ability to change the style combination of your theme. And you can change your entire site’s typography, colours and layout. 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. Firstly, you can browse styles that come with your theme. And if you click Typography, you can 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? Templates are groups of blocks combined to create a design for a web page. 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. To modify a template, click on the template on the right or Edit at the top of your Template List View. And when you click on the plus icon next to templates, 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 template part, a content area, and, specifically, the Post Content block that pulls in the content from the page that it is assigned to. And then a footer template part. 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 this template. Remember, therefore, you don’t add content to the page or index template. The content of 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. Please also note that when you go to Browse mode, you can click on Manage all templates at the bottom. And here, you’re able to add new templates, clear customizations or delete custom templates.

Since we have looked at the page template, let’s visit a page assigned to the page template to see what it looks like from the front end. So let’s make our way to the Dashboard and open up the About page in this case first. As you will notice, I’ve added some dummy content and in the sidebar settings we can see that this page has been assigned to the page template which is the default template. If we preview the page, we will see the design and structure we created with our page template by using a header and footer template part.

Next, let’s talk about managing template parts. As mentioned, a template usually has a header and a footer, and these are called template parts. When we view our template parts, we will see template parts that we’ve created ourselves and ones that have been provided by our theme. To create your own template part, click on the plus icon at the top. And when you add a new one, 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 it a descriptive name.

Lastly, 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 I want to assign a custom template to my About page to have a different look and feel than my other pages. First, we need to create a custom template and name it appropriately, in this case, my About page. Now we have a blank template to work from.

So the first thing I’m going to do is insert a header, and I will select a header template part that I already created and then below the header, our Post Content block will pull in the content from the page to which it has been assigned. And then lastly, the footer. I will choose a footer template part that I already created named Black footer with social icons. Something to take note of while we are here is that template parts are unique blocks with a synced nature. They are now outlined with a different colour in various parts of the interface to help you identify when you are editing them.

Now we can make our way to our Dashboard and then open up the About page and if we open up our sidebar settings, we will again see that this page has been assigned to the page template. But we will change that now by assigning the custom template we just created. Once we have assigned the new template, we can click update and make our way to the front end of the website. And now we will see our homepage still has the original header and footer template parts. But if we click on our About page, we will see that this page now has the design of the custom template that we created.

The last thing to mention is that when you’re in your Template Editor, you can create a custom template from here as well as edit your template in Template Editing Mode.

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