Global Settings and Styles

Templates

Welcome to this lesson on using the theme.json file, we will register a custom template we create from scratch.

With this lesson, you will:

  • build a custom template from scratch and export it to your local theme folder,
  • register a custom template using the theme.json file, and
  • familiarize yourself with the workflow of updating templates using the Create Block Theme plugin.

Creating custom templates

The quickest way to build out your theme is to work within the Site Editor, and using a plugin like Create Block theme, you can push your changes directly to your theme files.

Let’s go into the Site Editor. We’ll take a look at the templates available within the default Twenty Twenty-Four theme. We can see the author here for all of these templates is Twenty Twenty-Four. We can go into a code editor now and take a look at these files. We find them all listed here in the templates folder.

Registering custom templates in theme.json

The custom templates are all registered within theme.json. We have several for pages and one for single posts. We see here that the name corresponds with the name of the file.

Adding a new template

Back in WordPress, we create a custom template by first clicking Add New Template. We’ll choose Single Item Post and All Posts. Next, choose a pattern to save time, or you can start from scratch. If you hit Save, the template is saved to the database.

If we go into templates, we will see it there, Single Item Post. And if we go into Manage All Templates, we see it there as a user change which means it’s in the database and not part of our theme files just yet.

Using the Create Block Theme plugin to update theme files

In order to export the template, we need to use the Create Block Theme plugin. We start with making changes and saving those changes to the database. And each time, we can save changes using the Create Block Theme plugin to push those changes from the database into our theme files.

If we go into our code editor, we see the custom template, Single-Post. Now we can rename this if we want to something more descriptive. I’ll put No Image.

Register a custom template

You can now register the new custom template using the theme.json file. This gives us the ability to give the template a custom name. We would give the name No Image corresponding with the file name and then give it a title. And this is what the user sees in the front end.

Save those changes and then go back to the Site Editor and reload. Now go into All Templates and scroll down where you can see that the single No Featured Image template is now part of the theme files.

Next steps

As always, you can refer to the theme handbook available on WordPress.org. In the next module, we’ll be taking a deep dive into creating templates, the template hierarchy and template parts.

This is a preview lesson

Register or sign in to take this lesson.

Suggestions

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