In this post, we’re looking at the Beaver Builder theme, the Beaver Builder Child Theme and why you’d want to use the Beaver Builder shortcodes in your layout. Let’s dive in…

The Beaver Builder Theme

If you’ve bought the Agency or Pro version of the Beaver Builder Page Builder then you’ll get the beaver Builder theme and child theme. Visit your Beaver Builder account and download the files. As we mentioned in previous posts, the theme is not a pre-requisite for using the Beaver Builder plugin. However, it is 100% compatible with the plugin and many seasoned WordPress designers and developers that otherwise would have used 3rd Party themes are now converting sites to the Beaver Builder theme for consistency and ease of use.

The theme is built on the Bootstrap 3.0 framework, so if you’re familiar with that it opens up a host of customisation options to you. The theme also uses Font Awesome 4.0 so, again, great for displaying font icons anywhere on your site. For instance to add this bell to your page, just drop in the Font Awesome code and your set:

The beaver Builder theme offers all of the standard page design element controls you would imagine with a WordPress theme and everything is controlled from the WordPress Customiser. Beaver Builder is investing a lot of time improving the features of the theme but there are a lot of powerful settings, options and tools available to do just about anything with the layout and design.

To find out about the Customiser theme settings, head over to the Beaver Builder knowledge base where you find a comprehensive description of all of the options.

If you’re wondering whether or not you should use the Beaver Builder theme or any other theme, BeaverAddons has a great article that might help you make a decision.

Working with the theme

The Beaver Builder theme, like any other WordPress theme, is comprised of 4 basic editable areas – header, footer, body and sidebar; collectively known and the content area. You can set options for any of these areas in the Customiser.

Beaver Builder Presets

There are a number of theme presets available if you’d like to get started with a theme framework design. For the most part, you’d want to build up a unique design so we always use the default preset.

Header Options

The Beaver Builder theme header options control the look and feel of the header for your site – you have options for menus, logo, layout and top bar. On this site, we’re using a top bar and a Nav Centred header layout which places our logo and menu centrally stacked on the page.

Explore the options including, side header layout, general header colours and more.

The one limitation with the Beaver Builder theme is transparent headers and that’s planned for the next version of the theme. To achieve the look, you currently need to use one of the available hacks or install Jon Mather’s excellent Beaverlodge Transparent Header plugin.

Content Options

The body and sidebar areas of your site make up the Content area and is controlled by the Content tab. Here you can set options for the general background colour for your site, the blog, archive and post layouts, and if you have WooCommerce installed, you can set options for that too.

The Beaver Builder blog page is any page you assign as your posts page in the WordPress–>Settings–>Reading settings. You can style this page using the Blog Tab in the Content Customiser.

Navigating to the Blog tab, you’re given the option to display a sidebar and set display options for the post meta; author, date and comment count.

The Archive tab offers further styling options for your blog, category, tags and author archives and you can choose to display header images, excerpts and read more links.

The Post Layout tab probably offers the most opportunity for improvement in the Beaver Builder theme. These options determine how your single posts are displayed and for many Beaver Builder theme users, these options are fairly limited. More options to control the header image size and position, the title layout options and meta text positions would be most welcome but for now, you’ll need to use child theme hacks or add-ons to achieve advanced controls. There is a lot of work being done by Beaver Builder and 3rd party developers in this area so expect quick changes here…

Footer Options

The footer tab controls the display of widgets in your footer and the layout and style of the footer below your widget area. Beaver Builder allows you to manipulate 4 columns in your footer where you can add widgets from the WordPress–>Appearance–>Widget settings or within the Widgets tab of the Customiser.

One of the cool features in the Beaver Builder footer theme is the Parallax Effect – enable this to allow the content area of your site to slide up over your footer and make the footer look as if it’s stuck to the base of your page. Scroll to the bottom of our site to see the effect.

Custom Code

You can add custom CSS and JavaScript to your theme by using the Code tab in the customiser. This is for global CSS and script resources and will render on every page on your site – Beaver Builder allows you to also insert code in specific areas; within the Head, the site Header and footer. For instance, you can use the code tab to insert your Google Analytics tracking code for your site.

WordPres Menu

The Beaver Builder Menu tab gives you access to the menus you would like displayed on your site. Beaver Builder includes three menu locations; Top Bar, Header Menu and Footer Menu. Use the menu settings as you would for any WordPress site and if you’d like to add a mega-menu just add the CSS class ‘mega-menu’ to the top level menu item to achieve this.

Beaver Builder Child Themes

Child themes are the best way to achieve a unique look for your site and enable you to customise your site without messing with the main Beaver Builder theme files – if you do, you may lose your customisations when you update the Beaver Builder theme.

Beaver Builder supplies you with their own child theme which means you can alter and add your own code without worrying about overwriting your work when you update the main theme. The Beaver Builder child theme is a good starting point for your own customisations. If you’re code savvy then the child theme offers plenty of opportunity to build on the main theme.

Other 3rd party designers have already customised and published their own Beaver Builder child themes. There are plenty of theme authors creating Beaver Builder child themes that you can buy and install to get you started quickly. For the most part, these child themes are designed for specific industries, so find one that suits your target audience and customise it further for a unique look.

An example child theme for fitness sites by BeyondBeaver

In our next series we’ll talk you through where to find great child themes but if you search for child themes on our site, you’ll find plenty of cool resources.

Beaver Builder Shortcodes

Beaver Builder makes website creation super simple and it does so without leaving you with nasty shortcodes if you ever decide to stop using it. Some of the more well-known page builders use shortcodes to display content whereas Beaver Builder leaves your content intact if you ever decide to stop using it. This is one of the best features of the plugin because it means your carefully crafted content is always available no matter what theme or plugin you decide to use for page building.

Beaver Builder does let you use shortcodes to display content on your site, so if you’ve built a page with a subscription form on it, you can add that page to a post on your site by adding shortcodes:

You can use the shortcode with a slug or page id and you can even add multiple layouts by adding multiple IDs in the code.

Shortcodes are great for re-using content so you can centralise a layout design and update multiple pages at once wherever your shortcode is displayed. You can find out more about using the shortcode on the Beaver Builder knowledge base.

Wrapping up

So that’s about all for the third post in our series. Be sure to visit some of the resources in our sidebar where you’ll find more information about today’s topic. If you get stuck you can always check out the knowledge base for answers. Beaver Builder has a ton of great resources and articles on their knowledge base where you discover more tips and how-to articles.

Our next post will take a closer look at 3rd part developers and designers and community resources to help you create an awesome Beaver Builder site.

Subscribe

Subscribe to our blog posts to be notified just as soon as we hit that publish button!

However when you create a custom post type with custom taxonomies, BB doesn’t display the information as it’s only looking up standard taxonomies:

What we need is a way to replace the standard templates Beaver Builder uses with our own by using a Beaver Builder child theme and custom post templates.

The first thing to do is download or create your own Beaver Builder child theme. Once you’re done and you’ve installed and activated your child theme you need to copy over the template files that Beaver Builder uses to display single posts.

What we’re going to do:

1. Create a custom post type called ‘Distributors’ to handle storing contact details for our network of international selling agents
2. Create custom taxonomies called ‘Regions’ and ‘Countries’ to group our distributors according to their locations
3. Copy the Beaver Builder single.php file from the bb-theme folder into your child theme folder and call it single-distributors.php
4. Copy the Beaver Builder content-single.php file from the bb-theme folder into your child theme folder and call it content-distributors.php
5. Adjust each of the files above so that Beaver Builder uses them to display your custom ‘Distributors’ posts and displays the custom taxonomies as desired.

We’re presuming you’ve already created your custom post type and taxonomies, but if not use either ‘custom post type ui’ or similar plugin or code it yourself. Make a note of all the post type and taxonomy names you use as we’re going to use those to name our files and later in our code.

Copy the single.php and content-single.php files into your child theme folder and rename them according to your custom post type slug – in our case, it’s ‘distributors’ so we’ve named our filess single-distributors.php and content-distributors.php. It’s vital you name these files according to your post type slug otherwise, WordPress will not use your customised template files to display the custom posts.

Once you have renamed the files, you’ll need to adjust them as follows.

Amend your single.php file

For single-distributors.php, we added the Template name at the top of the code and adjusted line 16 to call our new content-distributors.php file instead of the normal content-single.php file.

What this file does is lay out the basics of the page: line 7 renders the header, lines 9 to 23 render the content section including the content and sidebar and line 25 renders the footer. Next, we’ll need to head over to the content-distributors.php file and make some adjustments there.

Amend your content-single.php file

What the standard content-single.php file is doing is running through some options to determine whether or not, and where to show the featured image (lines 1 to 14 and lines 24 to 40), it renders the post title and post top meta (lines 16 to 22) and then renders the post content (lines 42 to 59).

It’s from line 61 onward that we’ve added our custom code to handle our taxonomies. In lines 62 to 63 were introducing a few DIVs with standard BB classes to enable our categories to sit in line within the content above. The classes also handle the way the output is styled and should render as your theme customisation options.

In lines 64 to 74, we are asking BB to render the selected REGIONS for our post, adding a counter to make sure the comma on line 71 isn’t rendered on the last category. We also make sure on line 70 to render the output as a URL to the slug archive.

Going through the same process on lines 76 to 86, we’re outputting the COUNTRIES associated with the post, including the URL for the archives for each. After that, we close the DIVs.

Lines 90 to 95 are the original elements of the content-single.php file with line 90 commented out as we don’t want BB to try and render any other post taxonomies after our own.

Once all that has been put together, create a new custom post type and you should have working custom taxonomies displayed in the single posts. If you have a better solution or have any tips to improve this method, let us know in the comments below.