This post is part six of a series looking at Custom Post Types and the theme building functionality of page builders. Premium page builders now have the ability to create theme templates, but the process, difficulty, and limitations are different for each page builder. This series provides a walk-through of options so you can see what is involved, the strengths and weaknesses, and so that you can choose and can get a running start with the page builder of your choice.
- In part one I created a Custom Post Type using CPT UI and Advanced Custom Fields. If you are unfamiliar with Custom Post Types and want to follow along, then take a look at this post first.
- Part two looked at how to create the single template and archive template for the Custom Post Type using the new Divi 4 theme builder.
- Part three showed the process using Beaver Builder and Beaver Themer.
- How to create theme template using Elementor Pro was covered in part four.
- Toolset now has the ability to create single and archive templates in the Gutenberg block editor and is covered in part five.
The Brizy page builder is relatively new. The free version launched in April 2018 and the first beta of the Pro version was released in August of the same year. While the ability to work with dynamic content was released in the Fall of 2018 for the Pro version, the process was buggy and uneven. Now, however, Brizy has matured to the point where it is possible to create theme templates and that is the focus of this installment in the series.
I have a test site created using the free version of the Astra theme. I used CPT-UI and Advanced Custom Fields to create a Custom Post Type called Books and an associated taxonomy called Genres. This process is covered in the part one of the series. One difference is that for the Books Custom Post Type I enabled “Excerpts” in CPT-UI. This lets us manually enter an excerpt for a post, instead of letting the theme or page builder do it. This is discussed more in the section where the Books archive is created.
I entered several book records.
If we look at one we see that in addition to regular parts of a post (title, content, and featured image) there are also two custom fields: Author’s Website and Author’s Photo. The book also uses the custom taxonomy Genres and has one assigned.
When we view this record on the front-end of the site, these custom fields don’t show. This is a characteristic of WordPress and to have them output we must create a template that includes them.
Also, if we look at the default archive page for books, we can see that it needs some layout and styling also. The page title, featured image sizes, image placement, and call to action (read more button) need work.
The good news is that we can create these templates using Brizy Pro.
Creating Theme Templates With Brizy Pro
Brizy Pro is actually an addon for the free version of Brizy, so you will need to have both installed. Once they are installed there is a Templates menu item. You click the Add New button to get started.
Creating the Single Book Template
After you click the Add New button you then give the template a name and set the display conditions. I set the template for the Single Book records. Note that you need to click the Add button to apply the condition. I then clicked Publish to save it and the Edit with Brizy button to go into the Brizy editor.
Brizy gives us a blank canvas. I’ve labeled the various buttons in the screenshot. We will be using most of them as we continue.
To start, I clicked on the big blue button with the plus sign. This opens the block library. On the left you can pick the “kit,” which is a very large design set, light or dark backgrounds, and filter by category. I just want to insert a black block, so I pick that from the upper left side. When you do that, it inserts a single column row.
For this layout, I want three columns: a featured image on the left, content in the middle, and sidebar on the right. I first clicked the plus sign in the new area and then dragged over the column widget.
When you hover over a column a small blue control icon shows in its upper right corner. Clicking on that displays a context menu where there is a duplicate button. I clicked that to add a third column.
I then clicked on the right-most blue plus sign in the right column. That opens the Content Element list, which is very long. I scrolled to the bottom and found the sidebar element. I dragged that over into the right column.
I adjusted the width of the columns so the right and left were 25% and the center 50% by dragging the little blue pill icon in the column divider.
I clicked on the circle with a plus sign in the upper left and scrolled down the list of content elements to the bottom. I then dragged the Post Title element into the center column.
I did the same for Post Info and Post Content. I left aligned the post meta by clicking into it and then in the popup menu I clicked on the align icon. If you click on the “W” icon then you can turn on or off post meta items.
I then clicked on the left column blue button, which opened the content element list, and dragged over an image element. I clicked on it to open the context menu, then clicked on the image icon on the left, and then instead of picking an image from the media library, I clicked on the database icon to the left of the image box and picked Featured Image.
To get the correct aspect ratio of the image, I clicked on the gear icon and adjusted the size so it was 100% wide and 200% high. I know that the book cover images are usually twice as tall as wide. Since no preview shows, some trial and error might be necessary. I saved and previewed using the controls in the lower right until it was correct.
I want the author’s photo custom field to show below the featured image, so I dragged another image element over and this time picked the Author’s Photo field. Yes, Brizy automatically listed the image custom field.
I adjusted the size on that also until the full photo showed. I then dragged over a button element and dropped it under the author’s photo. I clicked on the chain link icon and then the database icon and picked the Author’s Website field. Brizy also showed that in the list automatically.
I changed the text on the button by selecting it with the mouse and typing in the new value. I saved the template. All done.
I then went to the front and looked at a couple of book records. Here is one for an example. There was a problem: the page layout didn’t have the header and footer showing.
I went back into the editor and clicked on the page template icon near the bottom left. I selected the Default option and saved.
I went back to view the records and they looked great. The button worked correctly to go the author’s website.
Creating the Book Archive Template
To create the book archive, exit the editor by clicking on the hamburger icon in the lower left and exiting to the dashboard. Then create a template like before, but this time set the condition for Archives Books. Don’t forget to click the Add button. Then click the Publish button and Edit with Brizy.
Like before, when you get into the empty editor, click the center blue button and select the blank block option. We will skip the sidebar for the archive layout. Now click the plus sign and drag over the archive element.
The default view when you drag in the Archive element looks like this. Other than the button and paging, everything else is a placeholder.
If you hover over the right top of the row you can find the context menu for the archive settings. The column controls are blue and the archive controls are grey. I selected the archive element controls and then clicked on the “W” icon. There are options to set the number items across (columns) and rows. Three across and one row was fine.
I clicked on the first image placeholder and then on the image icon in the context menu. I saw that it was correctly set to the Featured Image.
I then clicked on the gear icon and adjusted the image size. A cool thing is when you change the settings on one element the others pick that up, so there was no need to go into the settings for the other ones.
The Post Excerpt is center aligned by default, so I clicked into that field and then in the context menu I clicked on the alignment icon. It is a toggle that cycles through the three options (left, center, right), so I clicked it twice to get it left aligned.
Some themes and page builders create an excerpt on the fly based on a number of words or characters, but Brizy expects a Post Excerpt to be defined. This is a bit of extra work and you need to remember to do that when creating your content.
This time I remembered and switched the page template to Default before saving and going to view the result.
I clicked on the Update button in the lower right corner and then went to view the archive on the front. Everything looked good.
Summary and Conclusions
Creating the single and archive templates for the Custom Post Type was very fast and easy. The results looked clean and sharp. I was easily able to add the custom fields to the single book template.
I found that the archive element works well, but doesn’t have many options. I didn’t see any way, for instance, to include a custom field in the archive. Also, it would be easier to work with the settings if there was a preview of the content instead of placeholders. Working with a placeholder made getting the image size a bit of a trial and error. I usually create a list type of archive with a single record per row with the image on the left and the title, excerpt, and read more button to the right. There wasn’t that flexibility.
Brizy is a relatively new page builder that I’ve been keeping an eye on. Aside from the archive element limitations, I was pleased to see that the Brizy templates options now work well for Custom Post Types. It was nice that the custom fields showed automatically when you clicked into set the dynamic content. With other page builders you need to drill down several layers. The Brizy team is continually adding new features, the builder has lots of nice styling options, and intuitive shortcuts. For example, when you change one setting on an archive element, the others change also.
Brizy Pro is still, technically, in beta, but the builder is maturing and the feature set is pretty extensive. I expect to see Brizy Pro emerge from beta status with a real version one later this year.