You’ve got a variety of options for using Embedded Pens on a WordPress site.
| Self-Hosted WordPress | WordPress.com | |
|---|---|---|
| Block Editor (Gutenberg) | Use an HTML Block | Use an HTML Block |
| Block Editor (Gutenberg) | Use our Block Editor Plugin (recommended for most control) | With the Business or eCommerce plan, you can install plugins, so you can install our Block Editor Plugin. |
| Block Editor (Gutenberg) | Use our codepen_embed Shortcode Plugin | Shortcode plugin not supported |
| Block Editor (Gutenberg) | Just paste the URL and let the Embed Block handle it | Just paste the URL and let the Embed Block handle it |
| Classic Editor | Use our codepen_embed Shortcode Plugin | N / A |
| Classic Editor | As long as you’re not in the “Visual Editor”, you can paste in the HTML | N / A |
| Classic Editor | Drop the URL in content, and allow oEmbed to embed it, which requires either Jetpack installed or our oEmbed Plugin. | oEmbed works automatically |
Block Editor Plugin
WordPress’ Block Editor (aka Gutenberg) is a great opportunity for a custom block just for Embedded Pens, so that’s what we made available with our plugin.
You can create a CodePen Embed block (or just paste a URL, it should detect it) and the Embed will visually show up with some block options to control it.
This is the most powerful embed option, as it allows you to easily control attributes of the embed like the theme, heigh, and what you want showing.
Block Editor HTML
You don’t have to use our plugin in the Block Editor in order to do embeds. You can also use the HTML block and copy/paste the provided code there.
You still have all the control here, it’s just not as visually fancy.
Block Editor Default Embed
If you don’t have our Block Editor plugin installed and you don’t make an HTML block, another option is to just paste in the URL and it will transform into an embed automatically:
That’s awfully fast and handy, but it offers very little in the way of customization. The click-to-run option is on, you can’t control the height, you can’t control the theme, etc.
Using Shortcodes
Now that we’re in the days of the WordPress Block Editor, shortcodes are becoming more and more discouraged. But we do have a shortcode plugin. The main purpose of this was to have a shortcode that worked in the Visual Editor of the Classic Editor. In that scenario, pasting HTML didn’t work well, but the shortcode offered all the same control.
The syntax for usage is like:
[codepen_embed height="257" theme_id="1" slug_hash="Fxaml" default_tab="result"]See the Pen <a href='http://codepen.io/rickyeckhardt/pen/Fxaml'>Contact Form - Pen a Day 20</a> by Ricky Eckhardt (<a href='http://codepen.io/rickyeckhardt'>@rickyeckhardt</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]Which then transformed into the HTML syntax when output by WordPress.
You can use shortcodes in the Block Editor too, so even if you have legacy content using the shortcodes, that’s fine, it will continue to work. Our plugin also has a little settings page that allows you to do stuff like set a default theme, so you can control all the embeds on your site with one setting (it behaves like a fallback though, so you’d have to leave off theme_id="" on the shortcodes themselves, or use the option to force a theme).
Remember that themes are very useful for controlling the look of Embeds across an entire site!