Blog, WordPress, WordPress Plugins, WordPress 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.

<?php

Embed a CodePen Pen in WordPress with Shortcode

http://www.beliefmedia.com/embed-codepen-wordpress

function beliefmedia_embed_codepen_pen($atts) {

$atts = shortcode_atts(array(

'id' => 'http://codepen.io/dissimulate/pen/KrAwx', /* Full Pen URL */

'name' => 'Tearable Cloth',

'height' => '370',

'theme' => '0', /* 0 (default), light, dark */

'preview' => true

), $atts);

/* Get ID and username */

$id = rtrim($atts['id'], '/');

$data = explode('/', $id);

$penid = end($data);

$user = array_slice($data, -3, 1);

$user = $user['0'];

/* Build pen */

$return = '<p><p data-height="' . $atts['height'] . '" data-theme-id="' . $atts['theme'] . '" data-slug-hash="' . $penid . '" data-default-tab="result" data-user="' . $user . '"';

if ($atts['preview'] !== false) $return .= ' data-preview="true"';

$return .= ' class=\'codepen\'>See the Pen <a href=\'' . $id . '\'>' . $atts['name'] . '</a> by ' . $user . ' (<a href=\'http://codepen.io/' . $user . '\'>@' . $user . '</a>) on <a href=\'http://codepen.io\'>CodePen</a>.</p>';

$return .= '<script async src="//assets.codepen.io/assets/embed/ei.js"></script></p>';

return $return;

}

add_shortcode('codepen', 'beliefmedia_embed_codepen_pen');

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.

<?php

Embed a CodePen Pen in WordPress with Shortcode

http://www.beliefmedia.com/embed-codepen-wordpress

function beliefmedia_embed_codepen_pen($id, $name = '', $height = '370', $theme='0', $preview = true) {

/* Get ID and username */

$id = rtrim($id, '/');

$data = explode('/', $id);

$penid = end($data);

$user = array_slice($data, -3, 1);

$user = $user['0'];

/* Build pen */

$return = '<p><p data-height="' . $height . '" data-theme-id="' . $theme . '" data-slug-hash="' . $penid . '" data-default-tab="result" data-user="' . $user . '"';

if ($preview !== false) $return .= ' data-preview="true"';

$return .= ' class=\'codepen\'>See the Pen <a href=\'' . $id . '\'>' . $name . '</a> by ' . $user . ' (<a href=\'http://codepen.io/' . $user . '\'>@' . $user . '</a>) on <a href=\'http://codepen.io\'>CodePen</a>.</p>';

$return .= '<script async src="//assets.codepen.io/assets/embed/ei.js"></script></p>';

return $return;

}

/* Usage */

$id = 'http://codepen.io/dissimulate/pen/KrAwx'; $name = 'Tearable Cloth';

echo beliefmedia_embed_codepen_pen($id, $name);

Download

Title: Embed a CodePen Pen (WP Plugin)
Description: Embed a CodePen Pen in WordPress with Shortcode (or with a PHP Function).
Download • Version 0.1, 1.6K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (793.0B) PHP Code & Snippets, (724.0B)

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.