I just discovered the beauty of working with WordPress shortcodes and the the frustration that can come along with it. If you’re building websites for clients, it can mean the difference between repeat calls about them breaking code in the backend and the peace and quite of a satisfied client who knows how to edit their content.

If you’re working with shortcodes, you’ve no doubt come across phantom <br> or <p> tags. WordPress automatically adds these in with the wpautop() function. These tags can effectively break your carefully coded content and cause you hours of frustration, not to mention calls from your clients.

Fortunately for you there’s an easy fix to the problem. We could just do away with the wpautotop() function, but that would cause a lot of other issues within the visual editor, a big problem when working with client sites. However with a simple php function we can eradicate those return and paragraph tags in your carefully coded shortcode content. In your theme’s functions.php file before your shortcodes, insert the following code:

function parse_shortcode_content( $content ) {

    /* Parse nested shortcodes and add formatting. */
    $content = trim( wpautop( do_shortcode( $content ) ) );

    /* Remove '</p>' from the start of the string. */
    if ( substr( $content, 0, 4 ) == '</p>' )
        $content = substr( $content, 4 );

    /* Remove '<p>' from the end of the string. */
    if ( substr( $content, -3, 3 ) == '<p>' )
        $content = substr( $content, 0, -3 );

    /* Remove any instances of '<p></p>'. */
    $content = str_replace( array( '<p></p>' ), '', $content );

    return $content;
}

									

And then add this line into your shortcode function or functions:

$content = parse_shortcode_content( $content );
									

Voila! You’re done. Now go test your now finally working shortcode.

Thanks goes to Donal MacArthur for this incredibly useful bit of information.

Charles Forster

Charles Forster

Creative Director and Partner at OCS
Passionate about personal & leadership growth for founders and entrepreneurs.
Charles Forster

I guarantee 100% privacy.
Your email will never be shared

Comments
  • Harvey Specter
    Posted at 3:57 am January 26, 2013
    Christi I. Aguirre
    Reply
    Author

    Users, here’s what theme developers are not telling you: By using their theme’s shortcodes, they are essentially locking you into using their themes forever.

    • Harvey Specter
      Posted at 8:08 pm March 18, 2013
      charles
      Reply
      Author

      Only if you don’t know how to edit your own code and functionality!

    • Harvey Specter
      Posted at 6:02 pm April 7, 2013
      Nick C.
      Reply
      Author

      Not quite true. That might be the intention of some developers, but responsible theme developers try to provide a plugin that retains the codebase for any shortcodes they use. They are not, however, held responsible for future-proofing your site by providing stylesheets that are cross-compatible with other themes. That’s the difference between plug-and-play and custom development.

      The problem with your argument is that you’re expecting themes that cost in the neighborhood of $40-70 to keep working for you when you decide you no longer wish to use that developer’s codebase. Chances are that yes- A developer’s collection of themes will all be cross-compatible since they reuse source code for compatibility, but this isn’t an attempt to “lock” you in. It’s just an attempt to keep their code clean, concise, and cross-compatible.

      If you don’t like built-in shortcodes, their are dozens of quality plugins that will keep working for you down the road- Just don’t be surprised if they don’t quite fit perfectly with the appearance of the theme you’re using. Shortcodes are an “add-on” and should be used with a certain amount of caution and planning depending on the size and scalability you expect from your site.

  • Harvey Specter
    Posted at 1:30 am March 15, 2013
    Matt
    Reply
    Author

    YES! I’ve been banging my head against the wall with this one for WAY too long. I’ve made numerous attempts to resolve but nothing I’ve found has worked… until now. Thanks so much for posting this. You’re a lifesaver.

    (And this page definitely needs a higher rank in Google’s search results…)

    Cheers!

    • Harvey Specter
      Posted at 8:06 pm March 18, 2013
      charles
      Reply
      Author

      You’re welcome!!

      And I agree about Google’s search results 🙂

  • Harvey Specter
    Posted at 2:41 am March 21, 2013
    Morgan Estes
    Reply
    Author

    Thanks for this writeup. I just put it to use in a theme and it works perfectly so far.

    One suggestion: the code styler you’re using here makes it nearly impossible for me to read the code in the post. The dark keyword colors agains the dark background is painful!

    Thanks again for sharing your code.

    • Harvey Specter
      Posted at 7:31 pm March 21, 2013
      charles
      Reply
      Author

      Thanks Morgan! You’re right about the colors, I definitely need to change that.

  • Harvey Specter
    Posted at 3:07 am July 17, 2014
    Paul
    Reply
    Author

    Brilliant!! Works on nested shortcodes too…. Thanks very much! 🙂

  • Leave a Reply

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>