posts - post layout - v4

WordPress Shortcode Whitespace (Empty Paragraph Tags)

Comments

I know shortcodes are going out, but for anyone stuck in the past, here's a hack to help clear up empty paragraph tags from your shortcodes in WordPress.

There's an older site I am helping maintain that uses shortcodes. The last time I was helping clean up a few things, I noticed the shortcodes were producing empty paragraph tags around the content of the shortcode. One way to take care of this is with a short bit of CSS (assuming you don't have any other place this would cause a problem).

p:empty {
  display: none;
}

One problem for me was they were putting HTML comments in the page content <!-- something --> and that little trick wasn't working. This is really hacky, but the quickest solution was to run the content through a "cleaning" method before returning the shortcode.

function some_shortcode($atts, $content = null) {
    $content = clean_shortcode_text($content); // <-- adding this to the shortcode functions
    return do_shortcode($content);
}
add_shortcode('the_shortcode', 'some_shortcode');

function clean_shortcode_text($text = '') {
    // Replace all empty paragraph tags that WordPress adds
    $tags = array("<p>", "</p>");
    $text = str_replace($tags, "\n", $text);

    // Remove any extra line breaks tags
    $tags = array("<br>", "<br/>", "<br />");
    $text = str_replace($tags, "", $text);

    // Remove HTML comments that will create empty paragraphs with the HTML comment inside
    $text = preg_replace('/<!--(.|\s)*?-->/', '', $text);

    // Add back in the paragraph (<p>) and line break (<br>) tags again, remove empty ones
    return apply_filters('the_content', $text);
}

That's it. I know there has to be better ways to do this. If you have suggestions, leave a comment!