Today CodePen announced oEmbed support and just as quickly a free plugin is already available to add it to WordPress. CodePen oEmbed allows you to drop a Pen URL into your content area on its own line and have the pen automatically embedded.
Currently, you cannot customize the output, so the embed will use the default theme and 300px height.
The plugin only works for post/page content but if you want to add it to your comments, you’ll need to install the oEmbed for Comments plugin as well.
Pippin Williamson and Andrew Norcross created the plugin to make it easier for WordPress users to embed Pens and also to gauge interest in adding CodePen oEmbed support to the WordPress core. A trac ticket submitted today proposes to add CodePen to the official whitelist of WordPress oEmbed providers, but the decision seems to be tabled for the time being until more data is available for how many people are actually using the plugin. One of the qualifications for making this list is that the service is well-established, popular, and mainstream.
In January, CodePen released an official WordPress plugin for embedding Pens. This plugin offers more robust customization options beyond what’s offered in the oEmbed plugin, although it’s not as easy to use. Chris Coyier confirmed that the CodePen team will continue to support the official CodePen plugin in addition to seeking adoption as an official oEmbed provider.
For now, if you want to embed Pens to inspire your readers with creative front-end development snippets, you can do so via a plugin. Download the CodePen oEmbed plugin from WordPress.org if you like the default embed theme for Pens. If you need further customization options, CodePen Embedded Pens Shortcode is a better option.