Recently I set out to see if I could find another solution for adding dynamic content. One that would allow a greater variety of sources and that would not require anything more than the Beaver Builder plugin itself. What I came up with does just that.

The background

At I’m Not Marvin, most of our work is internal applications that are tracking and reporting on workflows or other business processes built on WordPress. Beaver Builder should make it easy to create dashboards or other report pages, but the module settings for most modules are not able to receive data dynamically, which is the point of any report.

Take the Number Counter module for example. It would be a helpful module for displaying totals, but it only allows you to set a number at the time you edit the module. For a dashboard you would need this to update automatically as the data changes. I needed a way to link the Number setting to my data, that could be in custom fields (post meta) or stored within other plugins, such as Formidable Pro or Gravity Forms.

I decided the best solution would be to customize the module to accept a shortcodes instead of a static number. A shortcode gives me near universal since they are supported by WordPress and many of the major plugins already provide them for extracting data.

Another goal of this project is to avoid creating another number module if I could help it. I wanted to see if I could customize Beaver Builders module instead. Not that this wouldn’t be a worthy purpose for a new module, but why add an additional module if all I really want to do is add a little extra functionality to what’s already built-in?

Overriding built-In modules

Beaver Builder has provided a method of overriding any of their built-modules that is so simple that the documentation explains it perfectly in a mere eight sentences!

While this still requires at least an intermediate level of web development experience, it’s as easy as working with any other PHP templates in WordPress and reminds me even more of the WooCommerce template system.

Any of Beaver Builder’s built-in modules can be overridden within your theme by following these steps:

1. Create a new folder inside your theme (or child theme) folder named fl-builder.
2. Create a new folder within your theme’s fl-builder folder named modules. (fl-builder/modules)
3. Copy the module you want to override from wp-content/plugins/bb-plugin/modules to your theme’s fl-builder/modules folder. ( as in fl-builder/modules/numbers for my example)

That’s really all there is to setting up the folder and files in your theme so that when you customize them, your changes will override the built-in module. Just find the module you want, copy it’s folder and all the file within it to your theme, and make your changes to these copied files.

This is what I did to get started with my customized Numbers module. Have you spotted it in action yet?

Dynamic data in membership CTA

For my test project, I edited the Number Counter module to add a new drop down field to the General options called Number Source. Now I can select either Static or Shortcode.

If the default option of Static is selected, the other settings remain exactly the same as the before and the I can enter a static number in the Number field.

By selecting the Shortcode option, the Number field changes to a field called Shortcode where, you guessed it, I can enter any shortcode that will produce a number. In fact to be safe, if the field ends up being anything but a number, the module just falls back to using the static Number field.

This article is not meant to be a code tutorial. Rather than getting into the specifics of my changes to the PHP and JavaScript for my test project, I will make my files available for members to download at the end of the article.

You can see my test project in action up in the site header where the bar graph shows the total Beaver Brains members!

One more thing

There is a down side to this that is worth taking note of. By overriding the built-in plugin, you are taking ownership of it. If there are changes made to a module you have copied to your theme folder in the future, they will not be applied to the version in your theme folder.

There is no easy way to turn the display of the hooks on and off – you need to uncomment the lines in the functions file to do so. Perhaps a plugin developer could create a handy tool from this to make it easy to switch on and off from the toolbar?

I like to give as many visual clues as possible to help users understand the context and depth of my site. Highlighting menu items is an important way of indicating where they are on the structure of the site. It also reinforces the main sections of your site – the sections that should be the basis of your header menu.

So keeping main menu items highlighted when viewing subpages is really important to me. There are two ways to achieve this:

Nested Menu Items

The first way expects that you have nested sub-menu items in your header menu.

Add nested menu items to your header menu as per the screenshot below.

With ‘Themes’ and ‘Modules’ nested below ‘Products’ in this example and using the CSS code above, ‘Products’ will always remain highlighted when navigating to either of these sub-pages. The screenshot below shows that I am on the module page and the ‘Products’ menu item is still highlighted.

Nested Pages

This next option expects that the pages and subpages of your site are nested. See the screenshots below for an example. In the CSS code, you’ll notice that the only thing that has changed, is instead of – ‘.current-menu-ancestor’ – we now write ‘.current-page-ancestor’. This ensures that any pages nested below your main menu item will remain highlighted.

In the screenshot above you can see that Modules is a subpage of Products so using the CSS will ensure that when you are on the Modules page, the Products menu item will remain highlighted.

Add either CSS snippet to your style.css file in your child theme, or add it to the Beaver Builder Global settings CSS tab, or in the theme Customiser –> Code –> CSS Code tab.

This solution is in part thanks to the Beaver Builder support article I found here.

To find out what action hooks are and how to use them in the Beaver Builder theme, read this article by Grant Ambrose on BeyondBeaver.

For a good guide on where action hooks exist in the Beaver Builder Theme, consult this page over at ProBeaver.

Beaver Tunnels uses the Beaver Builder Theme hooks to ‘inject’ templates into your layouts. Find out more about Beaver Tunnels here.

Obviously, the Beaver Builder theme is 100% compatible with the plugin but many developers use Genesis and Genesis Child themes in combination with Dynamik Builder with great success. GeneratePress is fast becoming another popular choice.

David Waumsley has written an extensive post on this subject – a must read if you’re trying to decide on a suitable theme for your next Beaver Builder project.

Other themes offer varying levels of success – you’ll find specific settings like hiding page titles in your theme require some fiddling to get to work. However since most of the page builder functionality resides within the content element of your theme, you should find the Beaver Builder plugin works well with just about any well-coded theme.

In this video, Adam Preiser talks through GeneratePress, Studiopress and Dynamik Builder as theme options for Beaver Builder.

For WordPress themes we know to work well with Beaver Builder, see our theme product pages here.