Here’s the situation:
|[codepen_embed] shortcode||Use shortcode plugin||Not supported|
|oEmbed||Use oEmbed plugin, or Jetpack||Just works (paste link on own line)|
|Normal Embeds||Just works (paste in HTML editor)||Not supported|
About the [codepen_embed] Shortcode Plugin
CodePen has a WordPress Plugin specifically for Embedded Pens. It allows you to use a WordPress Shortcode to embed them rather than HTML. That’s pretty much the whole point. You don’t need to use it if you use self-hosted WordPress, but it might make some things easier if you choose to.
You can find the shortcode for any Pen in the Embed Builder. The default is HTML, but you can click over to “WordPress Shortcode”.
That code will look something like this:
[codepen_embed height="257" theme_id="1" slug_hash="Fxaml" default_tab="result"]See the Pen <a href='http://codepen.io/rickyeckhardt/pen/Fxaml'>Contact Form - Pen a Day 20</a> by Ricky Eckhardt (<a href='http://codepen.io/rickyeckhardt'>@rickyeckhardt</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
There are attributes in the embed just like there are attributes on HTML elements. Those control things like which Pen is being embedded and which theme it’s using.
When that Post/Page is viewed, that shortcode is transformed into this HTML:
<p class='codepen' data-height='257' data-theme-id='1' data-slug-hash='Fxaml' data-default-tab='result' data-animations='stop-after-5'> See the Pen <a href='http://codepen.io/rickyeckhardt/pen/Fxaml'>Contact Form – Pen a Day 20</a> by Ricky Eckhardt (<a href='http://codepen.io/rickyeckhardt'>@rickyeckhardt</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script>
The big win here is that you can use the Shortcode in the “Visual” mode of the WordPress editor and it will work fine.
The Visual editor is the default and many people like it, so this makes it possible to use that without worry. If you were to use HTML in the Visual editor, it would escape and basically not work at all. You can switch to the Text editor to drop in the HTML embed code, but if you switch back and forth at all it will get screwed up again.
If you use the Visual editor at all in WordPress, it’s probably best to embed with Shortcodes.
A benefit to using this plugin is possibly better long term theme control. The shortcode has the
theme_id="1" attribute for controlling which theme you want to use. That works, but this plugin provides some additional settings to help.
If you leave off the
theme_id attribute on any particular Shortcode, you can provide a theme ID for it to fall back to. This won’t override the setting on any particular embed, it’s just a fallback.
If somehow things get a little out of control on your site and different embeds have different themes and you don’t want that, the second setting will force a particular theme on embeds (that use the Shortcode). If you use this, it doesn’t matter what the fallback is or what is on your Shortcodes, this theme will be used.
Remember themes can be updated right from CodePen, so you shouldn’t have to monkey with updating theme ID’s too much. But if something gets out of hand this could be useful. Or perhaps you like saving old themes and making new ones, you could use this to replace the theme ID, allowing you to leave the old theme intact.
About oEmbed (Works with Plugin, or on WordPress.com)
Just drop the URL to a Pen on it’s own line, and it’ll convert into an embed.
There is a WordPress plugin specifically for activating CodePen oEmbed if you want to use it on your self-hosted site.
WordPress.com supports CodePen oEmbed automatically, so you can just do it. No special action needed.
Limitations of oEmbed
While you successful get an Embedded Pen with oEmbed, there isn’t much you can control. You can’t control the theme, height, or default tab, for example.
Installation of Plugins
- Go get the plugin: Shortcode or oEmbed (or both)
- Put it in your
- Activate it from the Admin area in the Plugins section
Alternatively, you could search for “CodePen” in the Admin > Plugins > Add New area and install it from there.