CodePen IO WordPress Shortcode funktioniert nicht WordPress Shortcode does not work

6. February 2020

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.




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 (‘) 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=’;>Natural Stacking Order</a> by Markus Winkelmann (<a href=’;>@designerzone</a>) on <a href=’;>CodePen</a>.</p><script async src=”//”></script>




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:


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


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


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


&amp;#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.


Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!


Bitte hinterlassen Sie uns eine positive Bewertung.


Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen


Tell us what you think! Reply now

Your email address will not be published.