Share Code With CodePen Embed Plugin For WordPress

Share Code With CodePen Embed Plugin For WordPress

CodePen is becoming an increasingly popular social network for front end developers. It provides an easy way for members to build, store and share code created with HTML, CSS and Javascript.

Individual projects are referred to as “pens”, which include the HTML, CSS, JS and the resulting live demo beneath. It’s essentially a front end developer’s playground for exploring and creating handy, beautiful snippets for the web.

CodePen Embed is a brand new WordPress plugin that will allow you to easily embed a CodePen “pen” into a WordPress post. The plugin adds a button to the visual editor and a quicktag to the HTML editor, both of which will generate a shortcode for embedding a pen.

An example pen embedded in WordPress

I tested the plugin today and it works exactly as advertised. The output fits nicely in your post content area and its height can be customized within the shortcode. You can embed any pen as long as it is public. Use of the plugin does not require a CodePen account, so you can share other members’ pens as well.

If you’re an active member of CodePen and want a cool way to share your snippets, install the free CodePen Embed. After you’re done favoriting, forking and exploring, you’ll be able to share a few snippets on your WordPress blog.