Stop WordPress automatically adding <br> tags to post content

Question

Is there a way to stop WordPress from automatically inserting <br> tags when adding returns in the WordPress text editor.

I would like for it to behave more like a code editor where I can structure the code how I like and make it easy to read.

The code I am using in the editor is:

[one_third][team_member image_url="team_member.jpg" name="Laser vision" role="WordPress Designer"][custom_button url="#"]For more information[/custom_button][/team_member][/one_third][one_third][team_member image_url="team_member.jpg" name="Laser vision" role="WordPress Designer"][custom_button url="#"]For more information[/custom_button][/team_member][/one_third][one_third][team_member image_url="team_member.jpg" name="Laser vision" role="WordPress Designer"][custom_button url="#"]For more information[/custom_button][/team_member][/one_third]

I would like to structure it like this so it is easier to read and edit:

[one_third]
[team_member image_url="team_member.jpg" name="Laser vision" role="WordPress Designer"]
[custom_button url="#"]For more information[/custom_button]
[/team_member]
[/one_third]

[one_third]
[team_member image_url="team_member.jpg" name="Laser vision" role="WordPress Designer"]
[custom_button url="#"]For more information[/custom_button]
[/team_member]
[/one_third]

[one_third]
[team_member image_url="team_member.jpg" name="Laser vision" role="WordPress Designer"]
[custom_button url="#"]For more information[/custom_button]
[/team_member]
[/one_third]

However, when do this there will be invisible <br> tags added to the post content which will mess up the layout of my page.

Answer 1

The answer by shea is not ideal as in many cases:

• You don't want to strip everything from <br>, <p> etc. You want it as a default behavior for your WP visual composer which the above code will delete
• In many cases it is considered as "hacking the core" as this is changing the default core behavior of WP - for example such a thing will not pass on ThemeForest

As I can see you mainly have issues with you shortcodes. The right way to approach this is not to change the default behavior (hack the core) but to just filter the content. So just add a filter and in a variable pass an array of your shotrcodes you want to filter like this:

function the_content_filter($content) {
    $block = join("|",array("one_third", "team_member"));
    $rep = preg_replace("/(<p>)?\[($block)(\s[^\]]+)?\](<\/p>|<br \/>)?/","[$2$3]",$content);
    $rep = preg_replace("/(<p>)?\[\/($block)](<\/p>|<br \/>)?/","[/$2]",$rep);
return $rep;
}
add_filter("the_content", "the_content_filter");

The content inside will be filtered and therefore your shortcodes will be free of <br>, <p> etc. but the other parts of content - for example standard text in the WP editor created by user - will still have full functionality of WP.

References:

1. the_content WP filter
2. Regex "translator"
3. join PHP function
4. preg_replace PHP function

Answer 2

The wpautop() function adds <p> and <br> tags to your content in order to preserve line breaks. If you would rather add these tags yourself, then you can remove the filters which apply this function to the post content:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

If you would like to keep the automatic paragaraph creation (inserting <p> tags) and just remove the additional <br> tags, you can use this code instead:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );

See this link if you're not sure where to put this code.

Answer 3

Install the plugin "Don't Muck My Markup".

It adds a checkbox option to each page disabling auto insertion of <p> and <br> tags.

There is also an option to do this site-wide.

Answer 4

Probably it ís the text editor that makes a mess. This is what I did:

I use TinyMCE. Under settings for the text editor, I unchecked "Stop removing the "< p >" and "< br / >" tags when saving and show them in the HTML editor". Worked for me.

Answer 5

Maybe you could simply use do_shortcode() if all you have in your content is shortcodes, as long as you don't have any other content that need the filters.

I don't know the context, but if you're in the loop :

echo do_shortcode($post->post_content);

Answer 6

Borek's answer didn't work for my use case, which is writing raw HTML.

For that I used the Code Snippets plugin (lets you easily add arbitrary PHP snippets that get run) to create a snippet for an [html][/html] shortcode. What's cool about this shortcode is that it's compatible with the toggle-wpautop plugin which lets you disable the automatic insertion of <br> and <p> tags on an entire post. You can use either, mix & match.

function html_shorttag_filter($content) {
  // Based on: https://wordpress.org/plugins/lct-temporary-wpautop-disable-shortcode/
  $new_content = '';
  $pieces = preg_split('/(\[html\].*?\[\/html\])/is', $content, -1, PREG_SPLIT_DELIM_CAPTURE);
  // don't interfere with plugin that disables wpautop on the entire page
  // see: https://plugins.svn.wordpress.org/toggle-wpautop/tags/1.2.2/toggle-wpautop.php
  $autop_disabled = get_post_meta(get_the_ID(), '_lp_disable_wpautop', true);
  foreach ($pieces as $piece) {
    if (preg_match( '/\[html\](.*?)\[\/html\]/is', $piece, $matches)) {
      $new_content .= $matches[1];
    } else {
      $new_content .= $autop_disabled ? $piece : wpautop($piece);
    }
  }
  // remove the wpautop filter, but only do it if the other plugin won't do it for us
  if (!$autop_disabled) {
    remove_filter('the_content', 'wpautop');
    remove_filter('the_excerpt', 'wpautop');
  }
  return $new_content;
}
// idea to use 9 is from: https://plugins.svn.wordpress.org/wpautop-control/trunk/wpautop-control.php
add_filter('the_content', 'html_shorttag_filter', 9);
add_filter('the_excerpt', 'html_shorttag_filter', 9);

Answer 7

This function only removes the <p> and <br> tag for the shortcode.

function bnd_fix_shortcodes_extra_line_break( $content ){
  $array = array (
    '<p>['    => '[',
    ']</p>'   => ']',
    ']<br />' => ']'
  );
  $content = strtr( $content, $array );
  return $content;
}
add_filter('the_content', 'bnd_fix_shortcodes_extra_line_break');

Answer 8

for those who are not familiar with code hack or don't want to use plug in , you can do this.

1) copy all current code from WP pages ( text editor)

2) then paste to notepad and continue require edit ( add short code , html code or css code)

3) Copy paste from notepad to the same scree on WP pages ( text editor)

4) Hit [UPDATE] button which is located at the right hand side of the same WP pages to publish the pages

5) Finally preview it on live site

The trick here is dont switch back to [visual editor] for this particular pages then auto append for [p] or [br] wont happen anymore.