Beginner’s Guide: WordPress Template Editing Mode and Site Editor

With WordPress 5.8, you got access to the WordPress Template Editing Mode. Then, shortly after, WordPress launched the Full Site Editor (FSE). These tools give you much more control over your templates and template parts. However, you might still not fully understand how to use them.

In this post, you’re going to learn everything you need to know about WordPress Template Editing Mode, including 📚:

• What it is
• How to access it
• How to use it to design custom templates

We’ll also introduce you to the WordPress Site Editor feature, showing you ⏩ how to access the editor and ⏩ how to customize all templates and template parts.

What is WordPress Template Editing Mode? 🤔

WordPress Template Editing Mode is pretty much what the name implies. Instead of letting you edit the content of a post, it lets you edit the template that controls how that content is displayed.

For example, you can control where to put the post title, post content, post author, and so on. When you assign a template to a post, that post’s content will automatically display according to your template.

You may already be familiar with WordPress theme builder tools like Elementor Pro Theme Builder, the theme building in Divi 4.0, or the Beaver Themer extension for Beaver Builder. WordPress Template Editing Mode uses the same basic approach as all of those tools.

The key difference is that WordPress Template Editing Mode uses the native WordPress Block Editor. As such, it doesn’t require installing any additional plugins, nor does it require that you have any knowledge of code.

How to access WordPress Template Editing Mode 🚇

To access the Template Editing Mode for an individual post or page, you’ll start in your WordPress dashboard. You’ll need to create a new page or open an existing one.

Then, in the Post settings, there will be a section labeled Template:

In the example above, this is currently set to Single. If you click on this link, you’ll see a dropdown menu where you can select a new template for your post:

You can also click on the Edit template link. This will take you to the Template Editor.

Alternatively, select the icon highlighted in red in the following screenshot to add a new template:

Next, you’ll be asked to choose a name for your custom template. Then click on Create:

After that, you’ll arrive in the Template Editor.

Note – you’ll only able to create and edit templates if your theme supports Template Editing Mode. If you don’t see the Edit link within your posts and pages, that means your theme doesn’t support Template Editing.

You can ask your theme’s developer to add support, or you can manually include support by adding the following code snippet to your child theme’s functions.php file or a plugin like Code Snippets:

add_theme_support( 'block-templates' );

How to use WordPress Template Editing Mode ⚙️

Once you’ve opened Template Editing Mode, you can use it to design your site’s templates. The Template Editing Mode uses the exact same editor you use to create posts and pages.

You’ll get the exact same content editing interface, use the same block-based design system, and so on. The key difference is that, instead of creating a static design, you’re creating a dynamic template that will automatically pull in content from your site.

During this tutorial, we’ll be using the Jaxon theme. Jaxon is a great choice for ecommerce stores, blogs, small business sites, and portfolios. Thanks to its minimalistic design, you can create a sleek, consistent layout:

Better yet, Jaxon is completely compatible with Template Editing Mode (and the FSE). It supports global styles, provides access to predefined patterns, and offers a range of stylish templates. This makes it quick and easy to design all the pages of your site.

Using theme blocks

To customize your template, you’ll use a special set of blocks called theme blocks. Rather than letting you add static content, these theme blocks let you dynamically fill your template with content from your site.

For instance, you’ll get access to the following theme blocks:

• Post Title – automatically displays the title of a post.
• Post Content – automatically displays the main content of a post.
• Post Featured Image – automatically displays the featured image of a post.
• Post Date – automatically displays the post’s publish date.
• Post Excerpt – automatically displays the excerpt of a post.

Future releases of WordPress will add more theme blocks to give you even more flexibility.

For example, let’s say you want posts that use this template to have their featured images displayed above the post titles. To accomplish that, all you need to do is add the Post Featured Image block above the Post Title block:

You can also add static content to your templates. For example, maybe you want to add a Call To Action (CTA) box below the post content. To create it, you can use the regular blocks. All the posts that use this template will automatically display that static CTA below their content.

Using block patterns

Within Template Editing Mode, you can also create and use block patterns. These group various blocks together into one complete layout. Therefore, they are a great way to speed up your website building experience.

Plus, you can save your block patterns and reuse them across multiple posts and pages. This way, it’s super easy to add complex sections of content to your posts and pages in a matter of seconds.

To access block patterns, open the Block Editor and switch from Blocks to Patterns:

You can browse all patterns or focus specifically on CTA patterns, testimonials, headers, and featured content. Once you apply your block pattern, you can configure the block settings to display it in the exact way you want:

Additionally, you can edit each of the components within the block patterns, such as the heading, image, or button.

What’s more, you’re able to apply block patterns across your entire website. Then, when you edit the pattern within one of your posts or pages, it won’t affect other sections created from it.

Assigning your templates to posts

Once you’ve created some templates, you can easily assign them to content using the Template dropdown in the Post settings sidebar:

All you need to do is use the dropdown box to select one of the templates you’ve created. Remember – if you ever update the template in the future, those changes will apply to every single post that uses this template.

An introduction to the WordPress Site Editor 🔧

While WordPress Template Editing Mode is currently focused on creating custom post templates, you’re also able to edit all of your theme templates including your header, footer, blog listing page, and more.

One of the best parts about the Full Site Editor is that you can create site-wide templates for nearly all aspects of your website. For example, you could create a template that all blog posts use by default. Additionally, you’ll be able to edit and customize the header and footer of your website.

How to access the WordPress Site Editor

You can access the Site Editor from your WordPress dashboard. All you need to do is go to Appearance > Editor. However, in order to access the WordPress Site Editor, you’ll need to be using a WordPress theme that supports Full Site Editing.

These themes are known as block themes, and their templates are composed entirely of blocks. This is how you’ll edit all parts of the template using the Block Editor. You can find these themes by using the Full Site Editing filter at WordPress.org.

If you’re using a block theme, you’ll see an Editor option in the WordPress dashboard sidebar when you click on Appearance. If you’re on the welcome screen, you can also access it by clicking on Open Site Editor in the middle of the screen:

If you don’t see this option, you’re likely using a classic WordPress theme. Therefore, you’ll need to switch themes to take advantage of full site editing.

How to use the WordPress Site Editor

The WordPress Site Editor interface is totally flexible and enables you to constantly switch between templates and template parts. For instance, you might start by editing your homepage, then use the dropdown menu at the top of the editor to select a completely different template.

All you need to do is click on Show template details at the top of the screen. Then, select Manage all templates to choose a new template or template part to bring to the editor:

Here, you can see all templates available with your chosen theme. If you want to create a new template, simple click on Add New in the top right-hand corner of the screen:

When you land in the editor, you can choose to edit Templates like 404 pages, your front page, and more. Or you can choose Template parts to customize your header and footer:

Meanwhile, if you want to create a new template, click on the + icon besides the Template heading. Then, choose what type of template you want to create:

If you choose Custom template, you’ll be asked to give your template a name. Then click on Create:

At this point, you’ll access the Full Site Editor where you’ll see your website’s new template appear in the Block Editor.

You can use the FSE in the exact same way as the Template Editing Mode. For instance, you’ll build your templates using blocks like galleries, testimonials, CTAs, and more. Plus, you can use block patterns. However, you’ll also be able to apply global styles across your site.

Using global styles

Global styles are another excellent feature to take advantage of within the Full Site Editor. You can change almost every aspect of your website’s appearance, including the typography, colors, and dimensions of your main content areas.

What’s more, you’re able to customize the appearance of specific blocks across your site without access to the page or post where the block resides. To access global styles within the editor, switch from the Settings tab to Styles in the top right-hand corner of the screen.

The icon is presented as a half filled-in circle:

Here, you can manage the font for all your links, headings, and buttons. You can also set a color palette for your website, and create default styles for blocks like buttons, galleries, post titles, and more.

Get started with WordPress Template Editing and Full Site Editing Today 🏗️

When you opt for a block-based theme that supports FSE, you can use the Block Editor to design templates for posts and pages. Plus, you can visit the same editor to customize all template parts like headers and footers. This gives you full access to your theme’s underlying site-wide templates.

Do you still have any questions about WordPress Template Editing Mode or the upcoming WordPress Site Editor feature? Let us know in the comments!