GeneratePress was one of the first, general purpose, page builder friendly themes. The pro version of GeneratePress has recently added a theme builder and in this walk-through I’ll use it to create the single and archive templates for a Custom Post Type and we will see how it works. I created the Custom Post Type using CPT-UI and Advanced Custom Fields. If you are not familiar with that process, the first article in this series provides a walk-through.
GeneratePress first launched seven years ago. It is known for its ease of use, clean design, amazing support, and speed. GeneratePress does not have as many Customizer options as some general purpose themes, but it has enough to get the job done and it focuses on ease of use and good performance.
There is a free version available on the WordPress theme directory. The theme has more than 300,000 active installs, is regularly updated, and has about 1,200 five star reviews.
GeneratePress pro installs as a plugin and is available from the developer’s website. The GeneratePress website also hosts the theme’s documentation and support forum. GeneratePress is well documented and the support forum response times are good.
When you activate the pro plugin you get the ability to enable these modules. Note the tabs at the top. You create content templates using Elements, so we will visit that area below.
The tab on the right gives access to the site library. There are more than 60 pre-designed sites available. Most of them are built for Gutenberg, but there are some that are made especially for Beaver Builder or Elementor. The Page Builder dropdown lets you filter for those.
Although GeneratePress was first released 7 years ago, it was recently rewritten, using modern web best practices, so that it works well with Gutenberg and stays current.
The same developer also has a Gutenberg blocks addon, GenerateBlocks, that has a free and a premium version. We will use the free version of GenerateBlocks when building our templates.
About the Theme Builder
GeneratePress has an extensive hooks system and this is used to assign the content templates. The Kadence and Blocksy themes have a similar hooks system, but they have not implemented a theme builder. WordPress announced plans for a feature called Full Site Editing (FSE) which uses Gutenberg for creating the theme templates. Many themes, such as Kadence and Blocksy, have been waiting for FSE before proceeding with their theme builders. However, FSE was originally supposed to land in May of 2021, was postponed to July, and now there are questions if it will even be available in December. The GeneratePress developer decided not to wait and implemented his own version, which is available now, and hence the title of this article, “the future is here now.”
I have a test site with the GeneratePress theme, the pro plugin, and the free GenerateBlocks plugin installed. There are a number of test posts and here is the home page.
There is a Custom Post Type call “Books” and I entered a number of book records.
The Book Custom Post Type uses the featured image for the book cover image, has a custom taxonomy called Genres, and has two custom fields: one for the book author’s photo and the other for a link to the book author’s website.
Using the book cover image as the featured image usually means you need to adjust the layouts. Here is the default book archive on the frontend. You can see it looks pretty bad.
And here is the book single page, which also needs help.
Creating the Single Template for a Custom Post Type
We use the “Elements” feature to add the content template. An element is basically a bit of content that you selectively place.
To start, we go to the Appearance menu in the admin. Remember you can select the Elements tab from the GeneratePress page, or you can click on the Elements menu item once Elements are enabled. Once on the Elements page, I clicked the Add New Elements button.
Then you get a dialog to pick the Element type. A Block element is some content that you will place somewhere on your site. GeneratePress Hook locations allows you to execute some code or add a shortcode in specific locations. The Layout type lets you define the page layout, such as the placement of the sidebar, based on rules that are applied site wide. The Header type lets you define the section at the top of the page, below the site header, which people often use to for an image, title, and post meta information. In our case, we will select Block.
Before we start designing our template, we need to fill in and select some options. On the top left we add a title. This only shows in the admin and is for us to know that the block is for. Below that is the area where we will add the blocks and under that is the place were we define the rules about which location the block will apply to. On the right there are two option boxes, one where we select the type of block and the other the tag type and what it applies to. Notice under that is the toggle for the container. I turned this on to use the padded content option, which is the default for posts.
Here you can see the type of block elements we can create.
These are the applies to choices.
These are the blocks we will be working with that are provided. The top two come with the theme’s premium addon. The other four come with the free version of GenerateBlocks, but have dynamic options when used with the pro version of the theme. A couple of things to note. The first is that the Container block is used a lot when you need to add multiple blocks inline (in a row) and if you need to space or align blocks within a container with other blocks. The second thing to note is that the Headline block is not just for HTML header levels, but it also lets you pick the HTML tag to use. So, we use this a lot to add different bits of dynamic data.
I start by adding the Container block and then within that I add a two column grid.
On the left side I add the Dynamic Image block. The three choices are featured image, author avatar, and Post meta. I pick featured image.
There is no preview of the image. I add a Headline block. You click on the database icon for dynamic data.
These are the dynamic items you can pick for use with the Headline block. I pick Title. You also need to click on the H2 button and change it to H1 (not shown).
We end up with the title for the Hello World post and not a book title, even though we previously set book as the post type.
Under the post title I add the Dynamic Content block. These are the dynamic data options for it. Note that they are different than the ones available with the Headline block. I pick Post content
In between the title and content I add another Container block. Here we will add the post meta. There are two advantages to use the container block. One is the option to show the items inline and the other is that we can set the spacing and typography option once and it applies to all of the blocks we add inside. The container has 20px spacing all around. I change that to 0 for left and right and 10 above and 15 below. I set the font size to 15px. I also toggle on inline.
I first add a Headline button. I change the tag to a DIV. It has the option for an icon. I pick the calendar icon and give it spacing.
Then I pick the Post date dynamic option. I added another Headline block, set it as a DIV, and add a divider. I give this 8px on the right and left.
Next I repeat the process for the author, and link it to the author archives.
Repeat again to show the genre, picking list of terms, and linking this to the term archives.
Now, under the featured image I add a container and inside that I add another Dynamic Image block. For this one I pick Post meta. This means we will need to add the name of the custom field. I give this block some top and bottom margin.
I get the names of the fields from the ACF screen.
I add the one for the author’s photo into the Meta field name text box. I also set the image size options.
Under the author’s photo, I add a GenerateBlocks button block. I change the text and then click on the database icon. I add the field name for the author’s website.
I save, and here is the final version of the book single on the frontend.
Creating the Book Archive
Next is to create the book archive template. I go back to the Elements page, click Add a New Element, choose Block as the element type, and make the option choices before adding blocks.
With the archive option, you design the layout for one of the posts and then GeneratePress uses that for the others. So I added a Container block and a Row block like before.
Like before, I added the Dynamic Image block into the left and picked the featured image. On the right I added the Headline block and picked the page title. Under that I added the Dynamic Content block and picked the excerpt.
I adjusted the excerpt settings.
This is the result on the front. Looks pretty good.
One test of the flexibility of the tool’s archive builder is to see if you can add a custom field to the archive. This was easy with GeneratePress. I added a Container block under the featured image and in that added another Dynamic Image block. I picked the author’s photo.
And this showed as expected on the front.
Discussion and Conclusions
Before starting to build the templates I watched the videos about block elements in the GeneratePress help documentation. I didn’t get 100% of the info I needed, but it was enough to show me the way and I appreciated having that resource.
I did notice a few areas where there could be some improvement to make the process easier. For example, even though I had chosen books as the location rule, it seemed to be using the Hello World post as the sample preview data. I would have been nice to use a book record here. Next, there were no previews of the images. Finally, when you chose a custom field you needed to add the name of the field manually instead of pick from a list. Still, it was all doable.
If you are not familiar with GenerateBlocks, then you would have noticed that there were not fancy blocks like flip boxes or image hotspot blocks. The GeneratePress philosophy is to get what you need as the building blocks to cover all of the basics. The Dynamic Content and Dynamic Image blocks, along with the Container, Headline, and Buttons blocks were the content building blocks. The Grid helped the Container with the layouts.
I was pleased that I was able to create the single and archive templates as I desired and it seemed like all of the bases covered. Using the GeneratePress theme builder, I didn’t need to add a page builder or another plugin to create the Custom Post Type templates. Also, the GeneratePress theme builder was more flexible than several I’ve tried. I was easily able to add a custom field to the archive, for example.
Overall,the GeneratePress theme builder is a lightweight and flexible theme builder. Other theme developers have been asked to add something like this and I applaud GeneratePress for going ahead and doing it. I think other theme developers may have feared that there might be conflicts with supporting Full Site Editing when it becomes available, but GeneratePress showed that would not be the case. There would be nothing stopping GeneratePress from adding a hybrid FSE option, should they decide to do so. The ability to create content templates is a boon for GeneratePress users and I expect other themes to copy the feature. Again, GeneratePress stands out as a leader.