CodePen Embedded Pens Shortcode
Allows the use of a special shortcode [codepen_embed] for embedding Pens from CodePen.
The facts
- Rating
- 4.3★ from 6
- Active installs
- 800+
- Price
- Free
- Last updated
- 1 Oct 2024
- Added
- Jan 2014
- Requires WP
- 2.6
- Tested up to
- WP 6.6.7
- Downloads
- 33,613
Our analysis
AI-assistedCodePen Embedded Pens Shortcode is a WordPress plugin that enables you to embed CodePen Pens using a shortcode. This is particularly useful if you use the Visual editor in WordPress, as standard CodePen HTML embeds do not function correctly in that context.
The plugin allows you to specify various attributes in the shortcode, such as height, theme, and user, providing some flexibility in how the embedded content appears. It is suitable for users who want to incorporate interactive code examples or demos from CodePen into their WordPress posts or pages.
Best for: This plugin is best for WordPress users who want to embed CodePen content easily.
What it does well
- ✓Enables embedding of CodePen Pens using a shortcode
- ✓Works in the Visual editor of WordPress
- ✓Allows customization of embed attributes like height and theme
Where it falls short
- •Limited functionality; no advanced UI for selecting Pens
- •Future updates for additional features are uncertain
Verdict
CodePen Embedded Pens Shortcode provides a straightforward way to embed CodePen content in WordPress, though its functionality is currently basic and may need further development.
From the developer
Chris Coyier's own description of CodePen Embedded Pens Shortcode, lightly tidied.
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
-
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.
-
You can set a default theme, or override any theme set via Shortcode attribute.
-
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.