How to add templates and template parts to the Miniblock OOAK theme


In this lesson we are going to see how to add templates and template parts to the Miniblock OOAK. Miniblock OOAK is a basic block theme (which you can get in the official repository, filtering by Full Edition of the site) that only comes with the “Index” template, as a home page or landing page. Let’s see how to add templates and template parts to it, as an exercise in the Site Editing. You will need WordPress 5.9 or install the Gutenberg plugin on a staging site. If you need to clarify any of the terms associated with Gutenberg, consult the FAQ.

We will use a series of JSON files (one for each template) that you will find in the zip that you can download here. Once you download the zip and unzip it, you will get the following files that we will use later.

  • 404.json
  • archivo.json
  • cabecera.json
  • indice.json
  • pagina.json
  • pie.json
  • post-individal.json

1. Install the Miniblock OOAK theme

In the GIF you can see how the Miniblock OOAK block theme is installed. Just go to the official WordPress theme repository and filter by “Full Site Edition”.

2. Install the Reusable Blocks Extended

With the Reusable Block Extended plugin you will get more ease when handling reusable blocks. But here we will also use it to import the json files that you must already have on the hard drive of your local computer.

Once installed and activated, following the GIF, you will see a new section -in the WordPress administrator- called «Blocks». If you need to edit any of the imported templates, go to that section and modify it using Gutenberg blocks.

3. Import the JSON files

In the GIF we see how the index.json file is imported to obtain the «INDEX» template in the form of a reusable block. Having reusable blocks has the advantage of being able to use them to insert them into the site editor templates, as we will see later. Operating in the same way, it imports all the json files.

We are now ready to add templates and template parts to the Miniblock OOAK block theme.

4. Add the «Front Page»

The “Front-page” template is the one corresponding to the home page. Remember that on a WordPress site it is not mandatory to have a home page (the home page can be the blog page, which is called «Index»).

In this GIF you can see how a new template is created from the Site Editor. Recall that Miniblock OOAK only comes with the “Index” template but actually customized as a home page. This is so because the Index template is the one that is shown by default, if there is no Front-page and, in Miniblock, we wanted to simplify it as much as possible.

You have to go to see all the templates (Browse all templates), click on “Add New” and choose the “Front-Page”. In this way, we already have two templates: the original «Index» (which we will turn into the one for the blog) and a new one for the home page (the Front-page).

5. Edit the Index template and copy it to the clipboard

What we want is to move the content of the Index template to the Front-page, so that the Index contains the blog page.

We will use the editor’s list view, which allows us to see the block structure from a bird’s eye view and manage blocks much more easily.

In the GIF, notice how, by means of the three ellipses -to the right of the Group block that contains all the blocks of the template- we copy it to the clipboard.

6. Edit the Front-page template and paste the content of the clipboard

The GIF shows how we edit the Front-page template, and in the first empty paragraph we paste the content of the clipboard (simply with CTRL-V or CMD-V, depending on whether you’re on Windows or Mac).

This is very interesting because you are discovering the potential that blocks have.

Now the Index and Front-end templates have the same thing. The next thing is to delete the contents of Index and paste the reusable block corresponding to the INDEX template and that we have created from the index.json file.

7. Edit the Index template, delete its content and insert the reusable «Index» block

Take a look at the GIF how we use the list view to delete the Group block that contains all the blocks from the “Index” template. A very useful “trick” follows from this. When creating Gutenberg layouts, always use a Container Group block.

Once the template is clean, we use the block inserter, choosing the reusable block «INDEX» from the «Reusable» tab (where all the reusable blocks are).

All the blocks that appear in that tab are also in the “Blocks” section and can be edited from there. The “Blocks” section remembers that you have it because we installed the Reusable Block Extended plugin. Now the “Index” template is ready to display the blog posts. You would only have to create a page called «Blog» (for example) and assign the «Index» template to it.

Now examine the blocks that make up the Index and Front-end templates. If you want to make changes you can do them directly with Site Edit.

8. Add all the default templates

From the site editor, we can add the templates that are default in the theme. In this case, we can add the Page, Archive, 404 and Search templates. His explanation is:

  • Page. If we are going to have pages like About, Contact, etc.
  • Archive. If we are going to have category pages, tags, etc.
  • 404. If we are going to have a not found page.
  • Search. If we are going to have a search results page.

In the GIF, we create the Page template and insert the content of the reusable “PAGE” block, corresponding to the pagina.json file.

As an exercise, you can create the rest of the templates (Archive and 404). A Search-specific json file was not created because the Archive json file is used by default, if it exists.

9. Add the template for the individual posts

Surely we would like to have different templates for the pages and for the individual posts. However, the template for the latter does not exist in the default ones. So we can’t do it from the site editor, but from the content editor.

In the GIF, we go to the sample page “Sample Page” and it can be seen that in the configuration of the page, there is a link that says “New” in the Templates section (where the templates are assigned to the pages). So we can create a new template, give it a name and we can edit it. The first thing would be to delete the blocks that come from the «Sample Page» page. And then we use the block inserter to add the reusable «POST INDIVIDUAL» block. We save and ready.

We start from a model template but you can modify them to your liking.

We already know how to add templates and template parts to a block theme.

To create template parts, such as the header and footer of the website pages, we will go back to the Site Editor and choose “Template Parts”.

In the GIF, we create the Header template part by inserting the reusable HEADER block.

You can create the footer as well, by choosing Footer and the reusable «PIE» block.

Conclusions

We have made some template models for you, in JSON files, so that you can start from something when adding templates and template parts to a block theme. From there, you can import them into your WordPress as reusable blocks and then insert them into templates you create.

In this way, we have turned the Miniblock OOAK block theme that was just a landing page into a whole website ready to be customized with Gutenberg.

Of course, it’s just an exercise to understand a little more how the Full Site Edition works.