Title: CodePen Embedded Pens Shortcode
Author: Chris Coyier
Published: January 6, 2014
Last modified: October 1, 2024
---
Search plugins
This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.
# CodePen Embedded Pens Shortcode
By [Chris Coyier](https://profiles.wordpress.org/chriscoyier/)
[Download](https://downloads.wordpress.org/plugin/codepen-embedded-pen-shortcode.zip)
* [Details](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/#description)
* [Reviews](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/#reviews)
* [Installation](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/#installation)
* [Development](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/#developers)
[Support](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/)
## Description
Allows the use of a special shortcode `[codepen_embed]` for embedding Pens from
[CodePen](https://codepen.io).
You can learn more about CodePen [here](http://codepen.io/hello) and about this
plugin [here](https://blog.codepen.io/documentation/features/wordpress-plugin/).
### Basic Usage
```
[codepen_embed height=300 theme_id=1 slug_hash='jwGBh' user='arasdesign' default_tab='html' animations='run']
See the Pen Flat minion by Amin Poursaied (@arasdesign) on CodePen
[/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
* [[
* An Embedded Pen
* [[
* Settings Page
* [[
* Editor with Shortcode
## Installation
For old school manual installation people: copy the folder “codepen_embed” into
the /wp-content/plugins/ folder. Then go to the Plugins area of the Admin and activate.
Otherwise, search for “CodePen Embed” from the admin area of your WordPress site
in Plugins > Add New.
## FAQ
### What is CodePen?
[CodePen](https://codepen.io) is a web app that allows anyone to create things with
HTML, CSS, and JavaScript.
### Why is this useful?
Shortcodes are clean! You can already copy and paste JavaScript or iframe code to
embed a Pen onto a WordPress page, but you need to make sure to be in the “HTML”
tab of the writing area. If a user is in the “Visual” (default) tab, the embed code
will not work. Short codes will work either way.
You can also manage the default theme of the embeds with this plugin.
## Reviews
### [Buggy and Not Supported](https://wordpress.org/support/topic/buggy-and-note-supported/)
[DarkMG73](https://profiles.wordpress.org/darkmg73/) October 8, 2024
Light theme does not work after the last compatibility update and the dev does not
reply to anything in the support forum for this plugin. This means this plugin is
not being supported, beyond rare and limited compatibility updates. It is much better
to use a different code tool than CodePen, and there are many others, or just posting
the CodePen embed directly.
### [top notch](https://wordpress.org/support/topic/top-notch-63/)
[pixelmort](https://profiles.wordpress.org/pixelmort/) April 5, 2017
👌
### [its works](https://wordpress.org/support/topic/its-works-15/)
[admin625](https://profiles.wordpress.org/admin625/) September 3, 2016
light and it works.
[ Read all 6 reviews ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/)
## Contributors & Developers
“CodePen Embedded Pens Shortcode” is open source software. The following people
have contributed to this plugin.
Contributors
* [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/)
[Translate “CodePen Embedded Pens Shortcode” into your language.](https://translate.wordpress.org/projects/wp-plugins/codepen-embedded-pen-shortcode)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/codepen-embedded-pen-shortcode/),
check out the [SVN repository](https://plugins.svn.wordpress.org/codepen-embedded-pen-shortcode/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/codepen-embedded-pen-shortcode/)
by [RSS](https://plugins.trac.wordpress.org/log/codepen-embedded-pen-shortcode/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
* 0.1 – Beta
* 0.2 – Adding line_numbers attribute
* 0.3 – Default for `data_animations` is now `run`, as documented.
* 0.4 – Added `preview` attribute. Removed line numbers attribute.
* 0.5 – Defaulting to v2 of Embeds by default
* 0.6 – Make sure `theme_id="light"` and `theme_id="dark"` work.
* 0.7 – Making sure `data_edtiable` support editable embeds.
- 0.7.1 – Fixing naming thing
* 0.8 – Updating location of CodePen’s embed script
* 1.0.2 – Bug fixes
* 1.0.3 – Bug fixes
## Meta
* Version **1.0.3**
* Last updated **2 years ago**
* Active installations **900+**
* WordPress version ** 2.6 or higher **
* Tested up to **6.6.5**
* [Advanced View](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/advanced/)
## Ratings
4.3 out of 5 stars.
* [ 5 5-star reviews ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=5)
* [ 0 4-star reviews ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=4)
* [ 0 3-star reviews ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=3)
* [ 0 2-star reviews ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=2)
* [ 1 1-star review ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/)
## Contributors
* [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/)