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

Chris Coyier

<p>Allows the use of a special shortcode <code>[codepen_embed]</code> for embedding Pens from <a href="https://codepen.io" rel="nofollow ugc">CodePen</a>.</p>
<p>You can learn more about CodePen <a href="http://codepen.io/hello" rel="nofollow ugc">here</a> and about this plugin <a href="https://blog.codepen.io/documentation/features/wordpress-plugin/" rel="nofollow ugc">here</a>.</p>
<h3>Basic Usage</h3>
<pre><code>[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]
</code></pre>
<h3>The Point</h3>
<ol>
<li>
<p>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.</p>
</li>
<li>
<p>You can set a default theme, or override any theme set via Shortcode attribute.</p>
</li>
<li>
<p>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.</p>
</li>
</ol>


Alternatives to CodePen Embedded Pens Shortcode

Top alternatives