Skip to content

Fixing Extra Break Tags in Beaver Builder

Home » Blog » Fixing Extra Break Tags in Beaver Builder

Fixing Extra Break Tags in Beaver Builder

Last Updated on

(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:

[php]

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’);

[/php]

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.

2 Comments

  1. rob on November 23, 2016 at 10:02 am

    I’ve been trying for days to get a 2 or 3 column form working in beaver builder, and no luck. You hit the nail on the head with my problem, but this solution didn’t work for me… even tried the plugin that removes the wpautop glitch, but no luck. Also couldn’t find the code in the beaver builder functions.php file, but then again I’m not a coder or a techy. I can’t believe there aren’t more bb users with this same issue. Did you happen to find other resources on this topic? Thanks!!!



  2. Tom Nguyen on December 13, 2016 at 12:32 pm

    I didn’t find any more resources on this. I would suggest contacting Beaver Builder support about this problem.

    https://www.wpbeaverbuilder.com/beaver-builder-support/



Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll To Top