Clear up the messy HTML output produced by WordPress shortcodes with Jason Lengstorf’s handy function.

Quick tip: Remove crappy markup from WordPress shortcodes
Keine Kommentare

Image licensed by Ingram Image

Shortcodes in WordPress are a handy way to insert wrappers into our content for styling content without requiring our clients to learn HTML. Unfortunately, WordPress has a few quirks when rendering shortcodes that can introduce bugs in your layout.

The Problem

The easiest way to explain the issue is with am example. Let’s say we want to add a wrapper around a block of text to highlight it. A logical solution is to add a shortcode called , like so:

Content goes here...

When this shortcode is processed, it adds a

with the class highlight:

function my_shortcode_highlight( $attr, $content )
    return '
' . $content . '
'; } add_shortcode('highlight', 'my_shortcode_highlight');

The built-in WordPress wpautop filter will add junk markup to your output:

Content goes here...

These extra

tags can result in extra margin and padding, and it’s just generally ugly and undesirable.

The Fix

Fortunately, the fix is pretty painless. All we have to do is add a quick filtering function to functions.php and call that filter in our shortcode function.

Step 1: The Filtering Function

In functions.php, add a new function:


tags from a string * * @author Jason Lengstorf */ function copter_remove_crappy_markup( $string ) { $patterns = array( '#^s*

#', '#

s*$#' ); return preg_replace($patterns, '', $string); }

What we’re doing here is setting up two regular expressions („regex“ for short) in $patterns as an array.

The first regex, #^s*

#, starts at the beginning of the string (^), allows for zero or more whitespace characters (s), then matches a closing paragraph tag (

). This gets rid of the mismatched closing paragraph tag that shows up before the shortcode’s content.

The second regex pattern, #

s*$#, looks for an opening paragraph tag (

) and zero or more whitespace characters (s) at the end of the string ($). This prevents the shortcode markup from having an empty paragraph at the bottom, which is typically the culprit when formatting issues arise.

Both patterns, when present, are replaced with an empty string — thus removing them — and the modified markup is returned from the function. If the one or both of the patterns are not found, no changes are made and the markup is returned as usual.

Step 2: Calling the Filtering Function

With the filtering function added, the next step is to include it in any shortcodes that require filtering. As a general guideline, any shortcode that wraps output with a tag (such as a

) will need to be filtered.

All we need to do to filter the output is run $content through the copter_remove_crappy_markup() function and use its return value — stored in $clean — instead:

function my_shortcode_highlight( $attr, $content )
    $clean = copter_remove_crappy_markup($content);
    return '
' . $clean . '
'; } add_shortcode('highlight', 'my_shortcode_highlight');

With the filter applied, our previously janky shortcode output becomes a perfectly valid bit of HTML:

Content goes here...


WordPress outputs crappy markup when using shortcodes to add wrapper elements. We can correct the markup by adding a quick filtering function to our shortcode declarations.

Ps. If you like this tip, why not star the function on Gist?

Jason Lengstorf has spent the last decade or so solving problems on the Internet. He runs Copter Labs and writes about geeky things (such as his most recent book, Realtime Web Apps).

Unsere Redaktion empfiehlt:

Relevante Beiträge

Benachrichtige mich bei
Inline Feedbacks
View all comments
- Gib Deinen Standort ein -
- or -