Home Blog Embed a CodePen Pen in WordPress with Shortcode

Embed a CodePen Pen in WordPress with Shortcode


CodePen describes their platform as a “playground for the front end side of the web. It’s all about inspiration, education, and sharing”. The platform takes HTML, CSS, and JavaScript, and runs the code serverside for a result displayed in your browser. It’s a great way of finding bugs, showcasing your work, learning, making yourself feel inferior… or just browsing the brilliance of others. CodePen is more addictive than YouTube and more inspiring than Wikipedia – it’s awesome.

This quick article will provide you with WordPress shortcode that’ll render a Pen into your post or page. Using a shortcode rather than the default embed code makes sense for a number of reasons, not the least of which is that a shortcode makes the returned result more adaptable to the inevitable changes likely to take place in the future.

The Result

Using Tearable Cloth for our example, the shortcode of [codepen id="http://codepen.io/dissimulate/pen/KrAwx" name="Tearable Cloth"] will return the following:

See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

The id (URL) and name of the Pen is required. While the height can be altered, the width cannot (without additional formatting).

The Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

PHP Function

Used outside of WordPress, the following PHP function may be used.


Title: Embed a CodePen Pen
Description: Embed a CodePen Pen in WordPress with Shortcode (or with a PHP Function).
Download: Shortcode (V0.2) | WP Plugin (V0.1) | PHP Code (V0.2)

Shortt URL for this post: http://shor.tt/1XN9


Please enter your comment!
Please enter your name here