CodePen.io WordPress Shortcode does not work

A short note for all who like to insert CodePens into their WordPress blog and do so via the plugin by Chris Coyier. For me the plugin did not really want to work. It didn’t output the pen, but only the content of the shortcut and it destroyed the page at the same time.

Problem

I use the WordPress shortcode to insert the pen, which can be copied in the embed options for each pen. Instead of the pen, the content of the shortcode is displayed a bit cryptically and the rest of the page content is missing.

Analysis of the page source code revealed that the apostrophe characters at the end of URLs (within the copied snippet) are converted by WordPress to the HTML entity (&#8216;) for the single left quote.

<p class=’codepen’ data-height=’266′ data-theme-id=’15823′ data-slug-hash=’YXVwGm’ data-default-tab=’result’ data-animations=’run’> See the Pen <a href=’http://codepen.io/designerzone/pen/YXVwGm/‘>Natural Stacking Order</a> by Markus Winkelmann (<a href=’http://codepen.io/designerzone‘>@designerzone</a>) on <a href=’http://codepen.io‘>CodePen</a>.</p><script async src=”//codepen.io/assets/embed/ei.js”></script>

Solution

For a long time I couldn’t explain why this happens. At some point I came across the function wptexturize of WordPress, which is active by default. It converts certain characters into typographically more correct versions and also applies to shortcodes. Fortunately, there is the no texturize shortcodes filter, which allows to exclude the CodePen shortcode from it.

To do this, simply add the following snippet to your functions.php:

PHP

add_filter( 'no_texturize_shortcodes', 'shortcodes_to_exempt_from_wptexturize' );
function shortcodes_to_exempt_from_wptexturize( $shortcodes ) {
    $shortcodes[] = 'codepen_embed';
    return $shortcodes;
}

Cause

By the way, I found the following line in the plugin source code for the behaviour:

$content = str_replace(‘&#8217;’, "’", html_entity_decode($content));

&#8217; stands for the right single quote. wptexturizesseems to replace the first quote with a right single quote and the second quote with a left quote for URLs in the code. However, Chris Coyier’s code only replaces the right single quote with a normal apostrophe.