How to edit templates via the Site Editor

Each block theme comes with a set of templates that you can edit directly. After going to Appearance > Editor > Templates, you’ll see all templates on your site, including any you have created and any that come with your theme. To edit a template, just select the name and this will open up the Template Editor for you to customize and save.

Available templates that comes with the Twenty Twenty-Two theme. A red box highlighting Templates in the Template List View.
Templates that come with the Twenty Twenty-Two theme
An example of what a the Single Post template will look like when you edit it via the Site Editor.
Single Post template
An example of what a the Page template will look like when you edit it via the Site Editor.
Page template

How to clear customizations to templates provided by a block theme

When changes are made to templates that come with your block theme, you will see the option to clear customizations when viewing all of your templates at Appearance > Editor > Templates. Simply select the three-dot menu and choose the option to clear customizations.

A red arrow pointing to where you need to click if you would like to clear customizations made to a template.

How to add a new template

As mentioned, there are a limited number of templates you can add via the Site Editor. In particular, you cannot add custom templates in the Site Editor to use for your posts or pages. To do that, you’ll need to follow the previous section and use the Template Editor.

If want to add a new template provided by your theme, make your way to Appearance > Editor > Templates. When you select the ‘Add New’ button, a modal appears where you can choose between different template options.

A red arrow pointing to the new templates that you are able to add when using the Twenty Twenty-Two theme.

After selecting from the options provided, you will then be taken to the new template in order to customize it as you would like. For any new templates you create, you’ll see the option to delete them from the template list.

Practical: Edit the 404 Page

A 404 page is important in case a user stumbles upon a page that doesn’t exist or hasn’t been created yet. It is also important that your 404 page gives your visitors a way to arrive at the right place.  Full site editing and templates allow you to customize your 404 page to inform and redirect visitors.

An example of a custom 404 template.

Follow these steps in the video below to create a template for a 404 Page.

  1. Navigate to templates and select 404.
  2. Change the Heading block to read ‘Page not found’ and center it.
  3. Add a heading (H2) that says ‘Are you a little lost?’ and center it as well.
  4. Remove the Separator block.
  5. Insert a suitable image below the H2 heading and add a rounding effect.
  6. Remove the Spacer block and Paragraph block.
  7. Keep the Search block in place.
  8. Don’t forget to click ‘Save.’

Watch this short video

Click here to view the video transcript

Let us edit one of our primary templates via the Site Editor. Make your way to Appearance and click on Editor. Then top left, click on the WordPress icon and then scroll down and click on Templates. We are after the 404 template which displays when no content is found. Click on the 404 template and now you can start editing.

Firstly, we are going to change the heading to say Page not found and then use your block toolbar to align the text to the center. Next, we are going to add another heading (H2) and ask the reader a personal question; “Are you a little lost?” and use the block toolbar again to align the text to center.

Then, make your way to the List View and scroll down and click on the Separator. Use the vertical dots to remove the Separator from your template. Thereafter, use the Inserter to add an image block. Click on Media Library and select the appropriate image. If you cannot see your sidebar settings, click on the Settings icon top right and use the styles to give your image a rounded effect. Once again, I am going to use the List View to delete the Spacer block as well as the Paragraph block below. Now I have made the necessary changes. I will exit the List View; and remember to save changes.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.