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.

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
  • Worked like a charm thanks. – iSaumya Sep 22 '15 at 18:39
  • It worked perfectly in my project. Awesome, tremendous, marvelous, brilliant ..... So much excellent! – arefin2k Nov 2 '15 at 6:03
  • @Borek This is awesome and seems to work really well (+1), but to improve your answer you could explain WHAT it is doing? From the looks of things, it's removing <p> and <br> tags from near one_third and team_member shortcodes, but I'm not exactly sure (my REGEX skills are definitely not up to scratch). Can you outline what it does for us, and now we can configure it for other shortcodes? – dKen Feb 17 '16 at 11:26
  • @dKen It's doing exactly what you wrote. Apart regex it's really simple as the content is fitered by a built in WP filter the_content. We just need to give the content to filter via function in which we specify what (block) and how (rep) to filter. I've added references so you better understand this by checking out each function and filter. As for adding more shortcodes you just need to expand the $block array by simply adding shortcodes names to it like join("|",array("one_third", "team_member", "next_one", "another_one", "one_more")); – Borek Feb 17 '16 at 19:52
  • ...said the pro developer, well done. Upvoting. – fusion27 Aug 7 '17 at 22:54

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.

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.

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.

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

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

Alternate approach I've used: a js utility class. Handy if you don't feel like mucking with regex in all the content.

Have a class (like say, 'no-breaks') on the parent element:

<div class="no-breaks"> 
    ...content that is run through a wpautop here...
</div>

Then on js, use it to zap those br tags away:

// zap all the br tags wpautop adds
$('.no-breaks').find('br').remove();

A very simple solution: Do not use new lines in the wordpress editor. Yes, new lines do clarify. However, in this case no breaks may still be acceptably understandable.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.