In WordPress 5.8, you got access to a powerful new feature – WordPress Template Editing Mode.
WordPress Template Editing Mode lets you design custom templates for your posts and pages using the regular WordPress block editor. It’s part of a new feature set called WordPress Full Site Editing, and it’s just the first in a number of upcoming features that will let you edit your WordPress site’s underlying templates using the block editor.
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 design custom templates.
We’ll also give you a peek at the future of template editing with the experimental WordPress Site Editor feature. While this last feature isn’t in the core WordPress software at the time of writing this post, it’s on the way so you’ll want to become acquainted with it soon.
What is WordPress Template Editing Mode?
WordPress Template Editing Mode is pretty much what the name says. 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, it lets you 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.
If you’re 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 the WordPress editor.
In the Post settings sidebar, you should see a Template section. To create a new template and launch Template Editing Mode, you can click the New option:
You can then give your template a name and click Create to launch the editing experience:
Note – you’ll only see this option if your theme supports Template Editing Mode. If you don’t see an option to create a new template, that means your theme doesn’t support it. You can ask your theme’s developer to add support or you can manually add 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, let’s get into how you can use it to design your site’s templates.
Let’s start with the basics – Template Editing Mode uses the exact same editor that you use to create your posts and pages. You’ll get the exact same content editing interface, you’ll 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.
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.
Currently, you get the following 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 that you want posts that use this template to have their featured image displayed above the post title. 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 this CTA, you can use the regular blocks. All the posts that use this template will then automatically display that static CTA below their content.
Assigning your templates to posts
Once you’ve created some templates, you can easily assign them to content using the Template drop-down in the Post settings sidebar:
Remember – if you ever update the template in the future, those changes will apply to every single post that uses this template.
WordPress Site Editor: The future of WordPress template editing
While WordPress Template Editing Mode is currently focused on creating custom post templates, you’ll be able to edit all of your theme templates at some point in the near future, including your header, footer, blog listing page, and more.
To edit these templates, you’ll use a different tool, currently called the WordPress Site Editor.
The WordPress Site Editor is very similar to Template Editing Mode, with the only real difference being the specific templates that you’re able to edit.
In general:
- Template Editing Mode – lets you edit and assign templates to individual posts or pages.
- WordPress Site Editor – lets you create site-wide templates for your site. For example, you could create a template that all blog posts use by default (you could still override this default template with another one that you’ve created using Template Editing Mode when needed).
How to access the WordPress Site Editor
The WordPress Site Editor mode is currently not available in the core WordPress software at the time that we’re writing this post. However, you can access it via the experimental plugin version of the Gutenberg project.
In order to access the WordPress Site Editor, you’ll need to meet two conditions:
- You’ll need to be using a WordPress theme that supports Full Site Editing. You can find these themes by using the Full Site Editing filter at WordPress.org.
- You’ll need to install the Gutenberg plugin, which is a beta playground that includes experimental features.
Because both of these elements are still in their experimental stages, we do not recommend doing this on a live website that’s receiving traffic.
Once you’ve met both of these conditions, you’ll see a new Site Editor option in the WordPress dashboard sidebar:
How to use the WordPress Site Editor
The WordPress Site Editor interface is almost exactly the same as Template Editing Mode. The only differences are that:
- You get interface options to quickly switch between editing different templates.
- You get access to even more dynamic theme blocks to design your templates.
You can open the template browser by clicking on the WordPress logo in the top-left corner. This will let you quickly switch between templates and create new templates if needed:
Get started with WordPress Template Editing Mode today
WordPress Template Editing Mode is a new feature that will play an increasingly larger role in WordPress as WordPress moves further into Full Site Editing.
Template Editing Mode is just the start. While the current feature lets you use the block editor to design templates for posts or pages, the eventual launch of the full WordPress Site Editor will give you full access to your theme’s underlying site-wide templates.
If you’d like to learn more about this topic, check out our introduction to WordPress Full Site Editing.
We also have some other useful posts on using the WordPress block editor, creating custom WordPress post templates, and using blocks in widget areas.
Do you still have any questions about WordPress Template Editing Mode or the upcoming WordPress Site Editor feature? Let us know in the comments!