custom post types and theme builders beaver builder and beaver themer

Custom Post Types and Theme Builders – Part Three Beaver Builder and Beaver Themer

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.

book 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.

book record in the editor

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.

book on front end

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.

beaver builder
beaver themer

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.

beaver themer layout menu

I gave the layout a name of “Book Single,” selected “Themer Layout” from the Type drop down, and “Singular” from the Layout menu.

Themer add new 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.

themer layouts menu

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.

single layout in editor

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.

single layout delete the defaults

I now had a blank slate.

blank themer layout

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.

layout inserting three columns
layout 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.

module list sidebar module
sidebar module dialog

If you have more than one sidebar defined then pick the one you want from the list. Then click save.

layout with sidebar

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.

list of themer modules
layout with featured image added

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.

layout with content added

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.

photo module dialog

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.

acf field list

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.

acf author image field dialog
layout with author image

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.”

button dialog pick acf field

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.

button style tab
button general tab

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.

single layout final

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.

return to the themer layouts menu area

Then in the dialog fill in the Title and select “Archive” as the type of Layout.

themer ad new archive dialog

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.

default themer archive

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.

adjust the archive heading

By default, Beaver Themer uses the Posts module. It has several layout options including List, Columns, Masonry, and Gallery layouts.

posts module layout options

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.

post listing image width adjusted

I then clicked the Done and Publish buttons and we are done.

themer final archive

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.

themer post module custom layout

When you select Custom Layout, you get an option to edit the Custom Layout.

themer edit post module custom layout link

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.

dialog for the posts module custom layout editor
posts module custom layout add custom fields

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.

Visit the Beaver Builder and Beaver Themer Website

Affiliate Disclosure: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

>

Pin It on Pinterest

Share This
Scroll to Top