We build stellar websites!

FREE 1 Hour Consultation!
RSS feed

Blog » Solution to WordPress adding br and p tags around shortcodes

The Problem:

Sometimes I find stray p or br tags appearing inside a block of content that I’ve enclosed in shortcodes and this can mess up the layout by adding extra spacing where I don’t want it. It occurs because of the default order in which WordPress processes your content – wpautop (the function which converts line breaks to p or br tags) is run before the shortcodes are processed.

The Solution:

  1. Change the execution priority of wpautop so that it executes after the shotcodes are processed instead of before. Add this in your functions.php file:

    remove_filter( 'the_content', 'wpautop' );
    add_filter( 'the_content', 'wpautop' , 12);

  2. Now there will be no extra p or br tags added inside your shortcode block. In fact there will not be any automatic conversion of line breaks to p and/or br tags at all. So if you want the legitimate line breaks to convert to p and br tags, you will need to run wpautop from inside your shortcode function, e.g.:

    function bio_shortcode($atts, $content = null) {
       $content = wpautop(trim($content));
       return '<div class="bio">' . $content . '</div>';
    }
    add_shortcode('bio', 'bio_shortcode');

Share |

22 Responses to “Solution to WordPress adding br and p tags around shortcodes”

  1. Sebastian Says:

    Thanks so much! :-)

  2. @kingjeffrey Says:

    This fixed so many of my issues. If only my therapist was so effective! Thank you sincerely.

  3. Keiran Says:

    Perfect – this was such a better solution than others I’ve been finding – thanks heaps!!

  4. Christina Hooper Says:

    For some reason, this isn’t working for me at all. If I just do the remove_filter line, then it fixes the issue around the shortcode, but removes the other paragraph tags. If I add the add_filter line, it fixes the other paragraph tags, but my shortcode is still wrapped in p tags again. Here’s my site: http://www.ebs-consulting.com/Wordpress/consulting-services/human-resources/wage-and-salary-administration/

    Do you have any idea what’s going on???

  5. Aidan Says:

    Hi Christina,
    This solution is for the extra p gags inside the shortcode block, but it sounds like your issue is with p tags outside the shortcode block as you say ‘my shortcode is still wrapped in p tags’. Try removing the whitespace & line breaks before and after the shortcode tag – that should get rid of the paragraph wrapping arond the outside of it.

  6. Christina Hooper Says:

    What I have in WordPress editor on that page:

    In order to develop a [PopUp id="1"]corporate compensation philosophy[/PopUp], total compensation must be

    This is my function:

    //Custom PopUp Shortcode for Modal Dialog hottness
    function PopUp($atts, $ShortcodeContent = null) {
    extract(shortcode_atts(array("id" => '5'), $atts));
    $content = parse_shortcode_content( $content );

    global $post;
    $post = get_post($id);
    $postSlug = the_slug($id);
    $myPostContent = $post->post_content;

    return '
    ' . $ShortcodeContent . '

    ' . $ShortcodeContent . ''. $myPostContent . '
    ';
    }
    add_shortcode('PopUp', 'PopUp');

    And then you can see what gets generated by all that on this page:
    http://www.ebs-consulting.com/Wordpress/consulting-services/human-resources/wage-and-salary-administration/

  7. Christina Hooper Says:

    urg… wrong code, this is what’s in my fuctions.php file:


    //Custom PopUp Shortcode for Modal Dialog hottness
    function PopUp($atts, $ShortcodeContent = null) {
    extract(shortcode_atts(array("id" => '5'), $atts));

    global $post;
    $post = get_post($id);
    $postSlug = the_slug($id);
    $myPostContent = $post->post_content;

    return '
    ' . $ShortcodeContent . '

    ' . $ShortcodeContent . ''. $myPostContent . '
    ';
    }
    add_shortcode('PopUp', 'PopUp');

    remove_filter( 'the_content', 'wpautop' );
    add_filter( 'the_content', 'wpautop' , 12);

    I’m not sure what exactly is happening to be honest.

  8. Aidan Says:

    Hi Christina, I think your functions.php might be ok. What I was referring to in my previous comment wan not the functions file but in the actual WordPress page/post editor itself.

    e.g. This would cause <p> tags around the outside of the shortcode content:

    some text some text some text

    [myshortcode]

    some text some text some text

    whereas this wouldn’t:

    some text some text some text
    [myshortcode]
    some text some text some text

    or at least this wouldn’t:

    some text some text some text [myshortcode] some text some text some text

  9. Christina Hooper Says:

    That’s why I put the code that’s in my WordPress editor too… it doesn’t have any spaces or line breaks:

    In order to develop a [PopUp id="1"]corporate compensation philosophy[/PopUp], total compensation must be

    I’m really not sure what’s causing the tags.

  10. Sanco Says:

    Hi! Thank You so much!!!! After five days of seeking solution of this problem I’ve finally found the right code that works for me… and because of You. Again…Thank You!

  11. Apartments in Seville Says:

    Thanks a lot! it helped me with the “Group” plugin for wordpress… the was killing my layout! Thanks again.

  12. Tonyzg Says:

    Awesome! Thanks a bunch dude! ;)

  13. CK MacLeod Says:

    Good first step, but the simple solution will turn complicated if you are using shortcode to display certain forms, especially lengthy ones, especially ones that may even have been composed with the more typical WP functionality in mind. A solution from Stack Overflow that removes the filter only on Post Type (via WP get_post_type() looks like this (to be added to theme functions.php):

    remove_filter(‘the_content’,'wpautop’);

    //decide when you want to apply the auto paragraph

    add_filter(‘the_content’,'my_custom_formatting’);

    function my_custom_formatting($content){
    if(get_post_type()== “post-type”) //if it does not work, you may want to pass the current post object to get_post_type
    return $content;//no autop
    else
    return wpautop($content);
    }

    However, I was dealing with just one specific page where the normal functionality was creating ps and brs I didn’t want, so I used get_the_ID() instead:

    As someone else noted, it’s an inelegant solution, since it removes the filter from all pages then adds it back in… however, it works fine, and I’m already way overtime on this relatively minor formatting/output problem with my installation – may return to it later.

  14. CK MacLeod Says:

    seem to have forgotten the hacked code

    remove_filter(‘the_content’,'wpautop’);

    //decide when you want to apply the auto paragraph

    add_filter(‘the_content’,'my_custom_formatting’);

    function my_custom_formatting($content){
    if(get_the_ID()==’1709′) // specific page only
    return $content;//no autop
    else
    return wpautop($content);
    }

  15. CK MacLeod Says:

    oh well – that fix didn’t work after all – since for reasons I haven’t yet figured it, it throws errors involving pluggable.php, am still investigating…

  16. Anyssa Says:

    Thank you!

  17. Oisin Conolly Says:

    Wow! Thank you so much for this. wpautop is driving me insane, I’ve been so close to just downright disabling it so many times now!

  18. Vanessa Says:

    Thanks for this solution. Fixed my and problems. Much appreciated for posting!

  19. chris Says:

    To begin…yes Im a Hack trying to hack! However if you guys could help I would greatly appreciate it. Im self taught so this might seem basic but I have no idea where to place this code inside my functions.php file. Would providing my function code help?

  20. Vlado Says:

    I would just like to suggest adding do_shortcode in shortcode function, so it would be like this:

    function bio_shortcode($atts, $content = null) {
    $content = wpautop(trim($content));
    return ” . do_shortcode( $content ) . ”;
    }
    add_shortcode(‘bio’, ‘bio_shortcode’);

    This way if you have shortcode it gets parsed.

  21. Ardalan Naghshineh Says:

    Thank you Aidan :)

  22. Ryan Says:

    Thanks for this! Solved the problem fantastically.

Leave a Reply

Loading Quotes...