CodePen Embedded Pens Shortcode

Allows the use of a special shortcode [codepen_embed] for embedding Pens from CodePen.

Author:Chris Coyier (profile at wordpress.org)
WordPress version required:2.6
WordPress version tested:5.6.4
Plugin version:1.0.0
Added to WordPress repository:06-01-2014
Last updated:09-02-2021
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:100
Rated by:5
Plugin URI:
Total downloads:26 080
Active installs:1 000+
plugin download
Click to start download

Allows the use of a special shortcode [codepen_embed] for embedding Pens from CodePen.

You can learn more about CodePen here and about this plugin here.

Basic Usage

[codepen_embed height=300 theme_id=1 slug_hash='jwGBh' user='arasdesign' default_tab='html' animations='run']
  See the Pen <a href='https://codepen.io/arasdesign/pen/jwGBh'>Flat minion</a> by Amin Poursaied (<a href='https://codepen.io/arasdesign'>@arasdesign</a>) on <a href='https://codepen.io'>CodePen</a>
[/codepen_embed]

The Point

  1. You can use shortcodes in the “Visual” editor. CodePen Embeds are copy-and-paste HTML that don’t work when using the editor that way. If you ever use the Visual editor in WordPress, you’ll probably want to use this plugin.

  2. You can set a default theme, or override any theme set via Shortcode attribute.

  3. Hopefully eventually this plugin will have more functionality. Like have a fancy UI for picking Pens to embed and more control over the HTML output.


Screenshots
FAQ
ChangeLog