Introduction
This post is part three of a series looking at Custom Post Types and theme builders. Most premium page builders now include a theme builder, the ability to create theme templates. However, the theming process, difficulty, and limitations are different for each page builder. The idea of this series is to get a walk-through of options, see what is involved and the strengths and weaknesses, so that you can choose and can get a running start with the builder of your choice. In part one I created a Custom Post Type using CPT UI and Advanced Custom Fields. In part two I looked at how to create the single template and archive template for the Custom Post Type using the new Divi 4 theme builder. Now, in part three, I’m going to show how to create the single and archive templates using Beaver Builder and Beaver Themer.
Video Version
Setup
In part one I created a Book Custom Post Type with some custom fields and a custom taxonomy “Genre.” I added some records.
Here is the view of one of the books in the editor. Note the custom taxonomy “Genre” and the book custom fields at the bottom.
When we view the book on the front end the the custom fields don’t display automatically. We need to do some “theming” to add them to a template so they will show. That is where the page builder comes in … in this case Beaver Builder and Beaver Themer.
Creating Theme Templates with Beaver Builder and Beaver Themer
It Takes Two Plugins
The Beaver Builder team separated the template building feature out into a separate plugin. You need to have the premium version of Beaver Builder AND the Beaver Themer plugins installed and activated. All of the other premium page builders include the theme builder. This makes the Beaver Builder solution more expensive, but that is offset by the 40% renewal discount.
Creating the Single Page Template
When Beaver Themer is active, you get a new sub-menu called “Themer Layouts.” I clicked the Add New button and get this dialog.
I gave the layout a name of “Book Single,” selected “Themer Layout” from the Type drop down, and “Singular” from the Layout menu.
After clicking the “Add New” button, I got this dialog where you choose the location and conditions for display. There was a long list of post types and category options for the location field. It is going to be the single template for all books. The Rules button lets you add conditions so, for example, you could restrict the layout to conditions, such as a particular post, author, or even a value in an ACF field. I clicked the Publish button and then the Launch Beaver Builder button.
You use Beaver Builder to create the layout. This is nice because by the time most people get to the point of creating theme templates then you are already know your way around Beaver Builder. The first time you go into the layout editor, there is an option for a quick tour. If you are not familiar with Beaver Builder then by all means, follow the quick 2 minute tour.
After the tour, you end up with a default single layout along these lines. The featured image is used as a background for a page header area and the title and meta are overlaid on top of it.
That isn’t close to what I want, so I delete the rows out by hovering the mouse over them until you see the row controls and then clicking the X for remove.
I now had a blank slate.
I clicked the blue plus sign in the upper right corner and got a dialog for adding modules, rows, templates, or saved items. I selected the Rows tab and the 3 column option. And got three empty columns.
Next, click on the blue plus sign again. This time select modules and scroll down to the “Sidebar” module. Drag that into the right most column. You then get a dialog for the Sidebar module.
If you have more than one sidebar defined then pick the one you want from the list. Then click save.
Repeat the process, but this time scroll down until you get to the Themer modules. Select the Featured Image module and drag it into the left most column. Accept the defaults and click the Save button.
Go back to the module list, Themer modules, and this time add the Post Title, Post Info, Post Content, and Comments modules one after another.
Now, lets add a Photo module under the featured image. Click on the small plus sign to the right of the Select Photo row. That plus sign is how you select the dynamic field for the template.
Scroll to the bottom of the list, where the ACF fields are, and select the first one. The other ones in the list are the post author’s photo, the user photo, or an option field. Click on the “Connect” link.
In the first drop down, select the field type. In this case it is going to be an Image. Then you have to supply the field name. Unfortunately, Beaver Themer doesn’t let you select from a list, so you have to remember or go back to the ACF custom fields area and look it up. Then select a fallback image (if desired) and the image size from the media library. Click save to close out the dialogues and you have the first custom field value.
Now let’s add a button under the author image to take the reader to the author’s website. Click the blue plus and drag a button under the author’s photo. In the Button module dialog we again click the small plus sign to access the options for the dynamic data.
Now we want to get the URL to the author’s website. After clicking on the small plus sign, scroll down to the bottom and click on the “ACF Post Field – URL.”
One interesting thing to note on the field connectors, is that there is support for the ACF Post Author object, ACF User Object, and ACF options fields. Beaver Themer also supports ACF Flexible Content and ACF Repeater fields through shortcodes that you can add using the Text or HTML modules.
Again, we have to remember or get the field name. Fill out the dialog and click Save to close that dialog. Then in the Button Style tab click the option to center align the button and on the General tab change the button text.
Now we have a basic layout that uses our custom fields. Click the Beaver Builder “Done” and then “Publish” buttons to save. Success, we have the single layout.
Creating the single layout was simple. You have all of the Beaver Builder modules as well as the layout and style options. The only thing that could be improved, is to show the user a list of the custom fields so you didn’t have to remember their names.
Creating the Archive Template
You start the archive template the same way. Go back to the Themer Layouts area and click the “Add New” button near the top of the page.
Then in the dialog fill in the Title and select “Archive” as the type of Layout.
Click the Add Themer Layout button and then on the next screen, select the “Location.” In this case Book Archive. Click the Publish button and then the Launch Beaver Builder Button.
We go into the Layout editor where a default layout is shown. There is a large title area and then a list of books with a large image.
I clicked on the row with the Archive Title and removed the large amount of padding around the Heading module. Then I went into the heading module and change the heading to say “Book Reviews” and on the style tab set it to align left.
By default, Beaver Themer uses the Posts module. It has several layout options including List, Columns, Masonry, and Gallery layouts.
I wanted to make the image smaller, so clicked on the post list and then on the Layout tab scrolled down until I found the image width setting. I changed that from 50% to 25% and clicked Save.
I then clicked the Done and Publish buttons and we are done.
There are a lot of settings for the Post Listing module, so it is possible to customize and add some design elements, such as borders and drop shadows.
Suppose you wanted to add a custom field in the archive? Beaver Themer has the option to manually modify the layout.
When you select Custom Layout, you get an option to edit the Custom Layout.
When you click the Edit Custom Post Layout you get an editor window. Note the dynamic field button. Clicking on that and you get the option to insert a custom field if you need to.
The ability to manually modify the layout and add custom fields provides a huge amount of flexibility.
Summary and Conclusions
Beaver Builder and Beaver Themer are straightforward and flexible to use. It lets you create the templates using a drag and drop GUI. The process is very quick. A nice feature is that as you create the layouts you preview them with real data, so there is no guessing how it will look.
Creating the single and archive templates was very easy. The single template experience was especially good. It was possible to use pretty much any layout options and modules desired and it was easy to include the custom fields. It would be nice to see a list of the custom fields instead of needing to remember the field names.
The archive template creation was also easy to use and straightforward. The Posts module has many layout options and you can even go in to customize the layout and add custom fields.
It should be mentioned that Beaver Themer supports conditional display using shortcodes. You can hide or show rows based, for example, on whether a custom field is empty or has a specify value.
In my experience Beaver Themer is one of the easiest and most powerful theme builder solution.
