WordPress wrapping shortcodes with p tags

Been struggling over the last day or so to stop WordPress wrapping p tags around a shortcode. I’m using Arnan de Gans Events plugin on a WordPress site for a client. One of the pages just includes this shortcode:

[events_show]

This shows a list of events. I’ve configured the plugin so each event is in its own div. And it all works fine, except WordPress insists on wrapping the whole thing in a couple of p tags, making the code invalid, producing this:

<p><div class="event>.........</div></p>

Irritating. The WP shortcode API site says “wpautop recognizes shortcode syntax and will attempt not to wrap p or br tags around shortcodes that stand alone on a line by themselves”. Nooooo.

I finally solved this by adding the following to my functions.php file:

function simonbattersby_shortcode_format($content){
$content = preg_replace('/(<p>)\s*(<div)/','<div',$content);
$content =  preg_replace('/(<\/div>)\s*(<\/p>)/', '</div>', $content);
return $content;
}

add_filter('the_content','simonbattersby_shortcode_format',11);

Points to note – the filter needs to be set with priority 11 (or higher) because otherwise the shortcode won’t have produced its output, and it’ll have no effect. All the preg_replace lines are doing is looking for a <p> tag followed by <div>, with any number of whitespaces between them, and replacing with just a <div> tag. Brute force, inelegant, but it works, and I couldn’t find any other way….

Tags:

8 responses to “WordPress wrapping shortcodes with p tags”

  1. Bolzan says:

    To be a better solution I suggest to use this preg match:
    $content = preg_replace(‘/(]*>)\s*(<div)/','<div',$content);

    so you will match also p tag with eventually attribute (ex. ) that the editor could add.

  2. Simon says:

    Not clear at all what the problem is. You’ll have to post your rendered code.

  3. web development company says:

    I would post a link, but it is a non-public development version on my local machine. I am using a child theme of the oxygen theme with custom css in the child theme’s CSS file.

    Per my note above, the problem is that the php is resisting being styled. When I wrap the above-mentioned php script with span tags, and add some borders, then what happens is I’ll get one line with a blank space in a border box, then a line with the php excerpt output (but with no styling applied) and then another line with another blank space inside the CSS border box.

  4. galtzhayek says:

    wow MAN! this is awsome!

  5. Erik says:

    This is an amazing solution, thanks for sharing.

  6. Ron Goodman says:

    This worked for me as well. On Julie’s point, because I have lots of shortcodes that generate various tags, instead of replacing the div parameters, I replicated the two preg_replace lines and modified them for and . Plus, if I am using a shortcode that includes other html or php code from an external file, which I do a lot, now I simply wrap that code with div tags when I create the file so this code can do its thing.

  7. Julie Blair says:

    YAY!

    THis worked!

    (Not right away.)

    The shortcode I was using generated an unordered list instead of a div, so I just replaced div with ul and your code and it totally worked!

    Thanks for explaining what this code was doing otherwise I would have never known why it didn’t work immediately!

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.