Creating Page Templates with the Gutenberg Block Editor’s Reusable Blocks

Introduction

I recently used the block editor that comes with WordPress and found it much better to use than Element or Divi. I wrote an article that compares the various page builders and gave my initial impression of the block editor. My initial impression was that I was impressed with what I saw so far because the block editor was simple to use and does not require a heavy page builder like Elementor or Divi. So I used the block editor some more and wanted to share with you how I use it to create page templates. This took some planning and designing first, but I saw how it was coming along, it made a lot of sense. I am able to modify my pages very easily because my page templates are organized and follow a design. The page templates were not just created without prior careful planning. That would just be a mess and be impossible to maintain in the future. The goal here is long-term as your website grows, you need to follow a proper protocol in not only building it, but maintaining it also. 

Creating Page Templates: A Very Quick Summary of the Process

After using the block editor some more, I found it very easy to use in creating page templates and widgets using reusable blocks. I drew all of my page templates first using PhotoPea. Then I created what I call widgets using reusable blocks. Then I combine the widgets into a page template and then assign a page template to an actual page. Any widgets that have dynamic content, I use a WordPress plugin called Insert PHP Code Snippet, which allows me to use shortcodes to add PHP to my widgets. This is the basic process in creating page templates. In the following sections, I will detail how I design my page templates and how I make them modular. The goal is to reuse your widgets so that when you change them, every single place that uses your widget gets updated also. This makes maintaining and updating your page templates simple. So let us start with what is the most important piece of the page template, the reusable block.

Reusable Blocks: The Key to Making Manageable Page Templates

Reusable blocks are a key component that allows you to create the pieces of your page templates. I call these small reusable blocks widgets because that is a common term used for a reusable piece of content. Once you have enough widgets, then you can combine them together to create page templates. A widget can either contain static or dynamic content. If the content is static, then it is the same for every single instance that you use the widget. A dynamic widget is one that has content that changes based on the page that the widget is used on. For example, page A might say, “We can provide you with this service”. If you use the same widget on page B, you can change it to say, “We can provide you with this product”. Different content can show up on the same widget using the PHP snippet plugin. I will explain how to do that later in a section dedicated to displaying dynamic content inside your widgets.

Organizing Page Templates: Templates, Widgets and PHP Snippets

The order to create page templates using widgets and PHP snippers is as follows. You have your page templates on the outside. This is the main container that will hold your widgets. So we start with a page template that has widgets inside. If the widget is static, then it is done. Static widgets do not need a PHP snippet because these snippets are only used for data that changes page-by-page. So inside dynamic widgets is a shortcode that represents a PHP snippet. Organizing page templates are very important because you want to make it as easy as possible to modify your pages in the future. You definitely do not want to have to go through every single age and update a single line if it ever changes on your website. With page templates and widgets, you do not have to because the fewer templates and widgets you have, the easier your website content will be to maintain. So what we want is fewer page templates and widgets being used as much as possible across as many pages.

You can sort of think of page templates being organized as follows:

Page Template -> Widgets -> PHP Snippets

Page Templates: Basically Just Groups of Reusable Blocks Contained Within Other Reusable Blocks

The beauty of the block editor is being able to figure out who to use its true potential through its modular reusable block design. After I found out how great reusable blocks are, I discovered how easy it is to create page templates. Especially if you design your pages first in PhotoPea. Having your design in PhotoPea first really helps with being able to visualize which widgets to create and which page templates they will be used on. So having a proper standardized process in place, understanding it and adhering to it is very important in getting the most out of the block editor. You have to have your design before you even use the block editor. The reason why is because you want to piece your widgets together and make sure that they are exactly what you want before you get too far into building page templates. The problem with skipping design is that you will spend a lot more time thinking and moving your widgets around because you do not have an actual design to follow. Also, consider how important it is to organize your content for both users and search engines. You need to write some content inside your widgets that makes sense to both of them. Your content needs to flow properly from top to bottom and answer the questions that your website visitors are looking for.

Upper and Lower Half Page Templates: Providing Full Pages and Still Having Unique SEO Content

I was thinking about how to leverage page templates in a way where you can have modular widgets but still have unique content for each page so that they are not duplicates of each other. This is very important for SEO as the search engines need to be able to tell if each of your pages have content that differs on each page. Otherwise, Google will have issues knowing which of your pages to rank for certain keywords if it cannot tell the difference between two nearly identical pages. So this is where upper and lower page templates come in. Basically, you have a upper half that contains your reusable widgets. Then you unique content follows in the body. This is where you create content that makes this page different than your other pages. Then you place your lower page template under your unique content, so that you can continue to provide your users with either more information or call to action buttons. This way, you have have complete full pages and still have unique content that sits right in between your upper and lower page templates.

Widgets: The Small Little Pieces That Build Your Page Template

I have spoken a lot about widgets so far so I want to talk about them individually. I started to mention that your content needs to flow smoothly and you also need a design. This means that widgets themselves cannot just exist on their own. When I meant “individually”, I was referring to widgets as being a single piece of a puzzle, which when completed, is your page template. Each individual puzzle piece needs to connect to other pieces in order for your web pages to address visitor concerns and also satisfy SEO content requirements. Besides, the best way for people to find your beautiful designs is if you can get your pages to rank on Google. So this is where SEO content comes in. Also helps if you use a lightweight fast WordPress theme like GeneratePress that has high page speed scores and therefore loads pages fast. Every time that you connect your widgets together, you come closer to finishing your puzzle. Eventually you connect all of your pieces together, complete your puzzle and can finally tell your story. Your story is what tells people what you are about and what you can offer to them. This is why it is so important to have everything organized beforehand. What will your widgets look like? What images will tell you your story? What words will you use to convey your thoughts? These are important questions to answer ahead of time, so we need to have a design where each widget tells a little bit about your story. Think about a completed puzzle showing a whole picture, which tells your whole story. People can only understand what you are trying to do with your web pages with a completed story.

PHP Snippets: For Dynamic Content

As mentioned previously, dynamic content is important for your widgets because it can be used to generate different content for each page. This is important for SEO because you need to use dynamic content to show different content on each page. Different content will give you different keywords that you can use to rank on Google. I found this WordPress plugin good for this purpose. I am sure that there are many different ways that you can target each page for dynamic content. You can use the page title, page ID, or page slug. I like to use the page slug because your permalinks for each page should follow a pattern depending on how you categorized your pages. So I can read the page URL and use that to determine what kind of content I want to show on the page. 

For example, let us say that you have to pages like this:

• https://www.domain.com/products/red-shirt
• https://www.domain.com/products/white-shirt

What you can do is take that URL apart and just use the last section. So first each of those two URLs the last parts are “red-shirt” and “white-shirt”. Then you can use some PHP functions to perform string manipulation to get “red shirt” and “white shirt”. Then you can print out these keywords to your widget. So if you are on the red shirt page, then you can print out some message promoting the red shirt on your widget. The same can be done for the white shirt. You can either use an if-else or switch statement to control the dynamic content based on what page is being accessed. This is a very simple example of how to create dynamic content using that WordPress plugin. You basically would have a PHP snippet that contains a list of different strings that you would output based on your statements. There is another option that I was thinking about that I will discuss in the next section.

This other idea that I had involves using the WordPress Advanced Custom Field plugin. With this plugin, I believe that you would make a custom field for each widget and then enable that custom field on pages that use the custom field. Then on the page, you would fill out what content you want in your widget. This prevents the need to store a bunch of static hard-coded strings inside a PHP snippet. Using the custom fields plugin might be more organized but I want to see how it works with the hard-coded strings first. The reason why is because I want to see how this method works as more pages are created and therefore more hard-coded strings are needed. I believe that the first method will work well because all hard-coded strings are isolated to a PHP snippet. So the dynamic content is still organized as long as each list of hard-coded strings are contained within separate PHP snippets.

Knowing HTML/CSS/JS Helps Fill in the Rest of the Block Editor

I also want to bring up that the custom HTML block is really nice when I need to create something that is available in the predefined block list. Sometimes I need to create a widget that is too specialized and unique that a predefined block does not provide. This is where knowledge of HTML, CSS and JS come in handy. I can build my own custom widgets and then just add them to page templates. This is very nice because I can still use skills without having to completely rely on the block editor. I am sure that other page builders have this feature also but I am here to just talk about the block editor and what I like about it. The nice thing about the block editor is that as long as you do not modify too much of the core that relates to the responsive design, your page design will still automatically switch between desktop, tablet and phone devices without you having to do anything. I just need to check your changes using the developer tools in Chrome to see if you modified anything that alters responsive design.

Summary

I really enjoyed writing this article because I thought that I would never find a page builder in WordPress that I would like. Not only does the block editor work well for my needs, but it is the default page builder. So no need to deal with installing other page builders and possibly dealing with paying for them. So far, I am really happy with the block editor and starting to understand how to leverage both a page builder and custom code. I think what helps me is starting with GeneratePress and then not having to spend so much time on page speed scores but rather learning the page builder. I believe that this was the key that made me feel that the block editor was the one. It all started with the theme, then the design. I hope there is something that you can take away from this article. I know that I have written some articles expressing my opinions on certain topics. So I really wanted to do an article where I actually show you how to do something the way that I would do it.