CodePen Embed Block
An (official) block for CodePen Embeds.
The facts
- Rating
- 5★ from 2
- Active installs
- 600+
- Price
- Free
- Last updated
- 21 Aug 2026
- Added
- Jan 2020
- Requires WP
- 5.1
- Tested up to
- WP 6.7.7
- Requires PHP
- 7.2
- Downloads
- 14,484
Our analysis
AI-assistedThe CodePen Embed Block is a WordPress plugin that allows you to easily embed CodePen creations, known as Pens, into your site. It provides additional control over the embedding process compared to standard oEmbed functionality, enabling you to adjust settings such as height, theme, and default tabs. This plugin is suitable for users who want to enhance their blog posts, documentation, or forums with interactive code examples.
Designed for front-end developers and content creators, this plugin simplifies the integration of HTML, CSS, and JavaScript projects into WordPress. It is particularly useful for those who want to showcase their coding work or provide interactive tutorials directly on their site.
Best for: This plugin is best for developers and content creators looking to embed interactive code examples in their WordPress sites.
What it does well
- ✓Free to use from the WordPress.org directory
- ✓Allows for customisation of embed settings like height and theme
- ✓Supports embedding of interactive code examples from CodePen
- ✓Compatible with the Gutenberg block editor
- ✓Regularly updated and tested with recent WordPress versions
Where it falls short
- •Limited information on specific features beyond embedding
- •No details on support or documentation availability
Verdict
The CodePen Embed Block offers a straightforward way to integrate CodePen projects into WordPress, with useful customisation options. It is a practical tool for those focused on front-end development.
From the developer
Chris Coyier's own description of CodePen Embed Block, lightly tidied.
CodePen is an online code editor for front-end development. You build things (we call them Pens) with HTML, CSS, and JavaScript, and the languages and libraries that go along with those. Any Pen can be embedded on another site, making them useful for blog posts, documentation, forums, etc.
This block makes it easy to embed them. While oEmbed (just paste in a Pen URL!) also works for CodePen embeds in the block editor, this plugin allows for much more control, like setting the the height, theme, and default tabs.