(Disclaimer: Any links with an * is an affiliate link. Although prices are the same, Mr. Technique, Inc. earns a commission on any purchases made using the link. Read more in our privacy policy)

Beaver Builder LogoHow We Started Using the Beaver Builder Plugin

Brad Iroff, a known WordPress web designer/developer in the Atlanta area who passed away earlier this year, pitched Beaver Builder* to me in a Skype call. He told me that Beaver Builder was a game changer for people that work with WordPress. I didn’t believe him. We had our go-to premium WordPress themes, but we started coding our own WordPress themes with the Bootstrap framework for our clients that wanted a custom web design solution. With the exception of the Divi theme from ElegantThemes, I wasn’t a believer in drag and drop WordPress content editors. I had no interest in using Beaver Builder, so Brad’s words went in one ear and went out the other.

At the 2016 WordCamp Atlanta where I spoke on the subject of SEO, I saw that Aaron Reimann of Sideways 8, was giving a talk on Beaver Builder. Despite hearing about Beaver Builder again, I still didn’t pay it any mind. A few months later, one of our web designers mentioned it again and told me how it would cut down on development time. Third time was a charm, so I agreed to give the plugin a shot. We’ve been using Beaver Builder for a few months, and we have to say that I’ve become a believer!

Gravity Forms Display Issues

If you’re a WordPress web designer or developer that is using Beaver Builder, you may have encountered the extra break tag issue. Perhaps, you saw something like this when adding a Gravity Form.

Gravity Form with Extra Break Tags

The first and last name fields are supposed to be on the same line and so are the email and phone form fields. I had used gf_left_half and gf_right_half which are predefined Gravity Form CSS classes to put the email and phone form fields on the same line. The extra break tags were also showing up on pages that used Beaver Builder’s blog post module.

Every theme and plugin is going to have glitches, and the first thing that I do when I don’t have the answer to a problem is Google the problem. Usually, someone has written a blog post about the problem and given a solution. I wasn’t able to find a solution by searching Google this time, so I contacted Beaver Builder’s support team.

I have to say that Beaver Builder’s support is top notch. After a few emails, they mentioned that the problem was the wpautop function. Their support team said that these types of errors usually are caused by a theme that has wpautop that somehow seem to only affect front-end editors like Beaver Builder. This WordPress function was outputting the extra break tags.

How to Fix The wpautop Glitch

Another one of our web developers that was no longer with us had created the theme, so I didn’t know where the wpautop function was, so I searched the theme with my code editor to see which files had wpautop in them, and Voila! The functions.php file was the culprit. We found these lines:


function das_custom_wpautop($content) {
 if (get_post_meta(get_the_ID(), 'wpautop', true) == 'false')
 return $content;
 else
 return wpautop($content);
 }

remove_filter('the_content', 'wpautop');

add_filter('the_content', 'das_custom_wpautop');

We deleted these lines and tested the page with the Gravity Form again. Everything was fixed!

Gravity Form displaying properly with Beaver Builder

Since no one else wrote about this issue with Beaver Builder, I figured that I would share the news. If you found this post helpful, please feel free to share and/or comment.