Integrating A Page Builder With Your WordPress Themes

The days of mega themes packed with features appear to be on their way out while we see the rise of leaner themes that provide support for third party plugins moving in. Adding support for a page builder is a great way to give your users extra power when it comes to building a website with your themes. If that’s something you’re considering, we’d love to have you choose Beaver Builder as your page builder.

Out of the box, Beaver Builder works great with almost any theme. So far, I don’t think we’ve actually heard of a single theme that it doesn’t work with. Even so, there are still a few things you can do to make it work even better. Before I get into the nitty gritty details, here are some reasons why I think Beaver Builder is a good choice…

• It’s easy for your users to get started as there is a lite version available at wordpress.org they can get up and running on without spending a single dollar.
• You can create custom modules that can be bundled within your theme using our custom module guide.
• No bloat here. Beaver Builder only loads in the scripts and styles that it needs on a given page, not everything under the sun.
• We’ve built Beaver Builder to be easy to use while still packing enough power to get the job done. Simplicity is always on our radar, so you won’t see us overdoing it with features.
• Your users will be in good hands if any issues do arise. We provide some seriously amazing support.

If you’re looking for great examples of others that provide Beaver Builder support in their themes, look no further than our pals at WebMan Design and UpThemes. We’re extremely flattered that they chose to support our page builder and hope others will follow their lead.

Sound good? Here’s how to make it happen.

Targeting Elements With CSS On Beaver Builder Pages Only

One of the most common things you’ll see that needs to be done throughout this post is to target specific elements on Beaver Builder pages only. Whether it be your header, content wrapper, buttons or something else, that’s easily achieved because every Beaver Builder page has a class on the body named fl-builder (all of our stuff is prefixed with “fl” because Beaver Builder’s parent company is named FastLine Media). Knowing that this class is on the body allows you to write specific CSS for Beaver Builder pages.

How? Let’s say that you want to target your theme’s content wrapper and remove all of the padding on Beaver Builder pages. With the fl-builder body class, that’s as easy as…

.fl-builder #my-content-wrapper {
    padding: 0;
}

Boom! Done. No padding on Beaver Builder pages. There are a few specific use cases we will discuss for this later on, but feel free to apply this technique as you sit fit for the unique needs of your theme.

Disabling The Default Page Heading

Most of the time when Beaver Builder is active there is no need for the default page heading. It typically just gets in the way. Your users can disable that themselves by going to Tools > Edit Global Settings > Default Page Heading and entering the CSS selector for the page headings in your theme, but why not make things easier for them?

With a little bit of magic, you can have that CSS selector default to the one for your theme instead of ours by adding this code to your functions file.

function my_form_defaults( $defaults, $form_type ) {

    if ( 'global' == $form_type ) {
        $defaults->default_heading_selector = '.my-heading-selector';
    }

    return $defaults; // Must be returned!
}

add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

This technique is great for visually hiding the page heading, but it won’t remove it from the markup. If that’s a concern for you, you’ll need to add a bit more code to completely remove the page heading on Beaver Builder pages. First, add this helper function to your functions file…

static public function my_theme_show_page_header()
{
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {

        $global_settings = FLBuilderModel::get_global_settings();

        if ( ! $global_settings->show_default_heading ) {
            return false;
        }
    }

    return true;
}

Next, in the file that contains your page heading (possibly page.php), wrap your page heading in this code like so…

<?php if ( my_theme_show_page_header() ) : ?>
<h1><?php the_title(); ?></h1>
<?php endif; ?>

With that code there won’t be a single trace of the page heading in the markup when Beaver Builder is used to create a page.

Removing Or Adjusting Margins And Padding

There are a lot of things in terms of style that Beaver Builder leaves up to the theme, while some things it must take care of itself. One of those things is the padding and margins on rows and modules. Since Beaver Builder handles that, any padding or margins on your theme’s content wrapper won’t be necessary and can even get in the way of certain things such as edge to edge row backgrounds.

For example, using the Twenty Twelve theme, you can see that there is extra space around the builder layout that prevents the background photo from going edge to edge…

With a few CSS tweaks using the fl-builder class that I mentioned above, I was able to get it looking like this…

Unfortunately, every theme is going to handle its margins and padding differently. I won’t be able to give you a solution that works in every situation here, but if you have a good understanding of CSS, the following code is along the lines of what you’ll want to implement…

.fl-builder #my-content-wrapper {
    margin: 0;
    padding: 0;
}

Full Width Rows

Another popular feature of Beaver Builder that you may want to support in your themes is full width rows. Full width rows don’t just go to the edge of your content wrapper, they go to the edge of the browser. Wowzer!

By default, all rows in Beaver Builder have a maximum width that can be adjusted in the global settings and scales appropriately for smaller devices. Even if your content wrapper is full width, rows and their content will still be contained within a boxed layout like the screenshot below.

When a user chooses to make a row full width in the row settings, the maximum width is removed and that row will fill the entire space from edge to edge like so…

This is a great technique but only works if your theme’s content wrapper goes to the edge of the browser as well.

Just like margins and padding, every theme is going to handle the width of its content wrapper differently. Again, I won’t be able to give you a solution that works in every situation here, but if you have a good understanding of CSS, the following code is along the lines of what you’ll want to implement…

.fl-builder #my-content-wrapper {
    max-width: none;
    width: auto;
}

Default Button Colors

Beaver Builder provides great support for a wide variety of button styles, but the default, well, it’s pretty boring. Adding the following CSS to your theme and adjusting it to match your design will give Beaver Builder buttons a default appearance that better fits your style.

a.fl-button,
a.fl-button:visited,
.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
    background: #fafafa;
    color: #333;
    border: 1px solid #ccc;
}
a.fl-button *,
a.fl-button:visited *,
.fl-builder-content a.fl-button *,
.fl-builder-content a.fl-button:visited * {
    color: #333;
}

Just be careful not to override too many of the button’s default styles or you’ll run the risk of breaking the button module’s settings.

Be Careful With Z-Indexes

Chances are, if you’ve written any CSS in your life, you’ve run into z-index issues. What specifically am I talking about? Things on top of other things that make some things inaccessible. Whaaaaat?

Beaver Builder’s interface is supposed to sit on top of the entire page, nothing should be above it. As such, we’ve set the z-index ridiculously high, but not too high at the same time. After years of experience, my recommendation is that you keep your z-indexes as low as possible. I know that’s not always feasible, so if you try to keep them at least under 100000, you should be ok.

Recommend With The TGM Plugin

In the past theme developers had to bundle third party plugins directly within their themes to include them for their users. At the time, I’m sure that seemed like a great solution, and many still do it, but we all know these days why it’s not a great idea. Security and updates!

What happens if you bundle a third party plugin with your theme and a security hole is exposed? Guess what? It’s your responsibility to push an update to your users sites, the plugin developer wouldn’t be able to as the plugin lives in your theme directory. It’s happened before and my guess is that it will happen again until theme developers stop this practice.

Aside from that, you will also be responsible for pushing the latest updates out to your users. Just one more thing you have to think about in your busy life. Beaver Builder pushed 50 updates in its first year and we don’t plan on stopping there. Do you really want to be responsible for that?

Now that I’ve put the fear of god in you regarding embedding third party plugins in your themes, I’d like to tell you about an alternative that’s becoming quite popular.

TGM Plugin Activation: The best way to require and recommend plugins for WordPress themes (and other plugins). From their website…

TGM Plugin Activation is a PHP library that allows you to easily require or recommend plugins for your WordPress themes (and plugins). It allows your users to install and even automatically activate plugins in singular or bulk fashion using native WordPress classes, functions and interfaces. You can reference pre-packaged plugins, plugins from the WordPress Plugin Repository or even plugins hosted elsewhere on the internet.

In short, you should give your users the option to install third party plugins. If they do decide to, you can leave the updating up to WordPress core and the plugin author, not you.

Make Some Money

We’re beyond flattered that other developers have praised our work and have even gone as far as providing support for it within their own products. We’re so happy about this that we built in a thank you for those that do provide Beaver Builder support for their themes.

That little thank you is a filter that allows you to replace our upgrade links in the lite version with your affiliate link, essentially making you money any time someone that uses your theme decides to upgrade to the paid version of Beaver Builder.

How does it work? Just add the following code to your functions file while changing out the text that says YOUR_LINK_HERE with your affiliate link and presto! You’re in business.

function my_bb_upgrade_link() { 
    return 'YOUR_LINK_HERE'; 
}

add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

Wrapping Up

With a few tweaks here and there you can get your theme up and running with advanced support for Beaver Builder in no time at all. Don’t hesitate to let us know if you have any questions, and feel free to share if you decide to optimize your theme for Beaver Builder or feel like something is missing from this post. We’d love to have you on board!