{"id":13634,"date":"2021-06-06T12:34:43","date_gmt":"2021-06-06T12:34:43","guid":{"rendered":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/?post_type=docs&p=13634"},"modified":"2021-06-06T12:34:43","modified_gmt":"2021-06-06T12:34:43","password":"","slug":"embed-codepen-codes-in-wordpress","status":"publish","type":"docs","link":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/docs\/embed-codepen-codes-in-wordpress\/","title":{"rendered":"How To Embed CodePen Codes In WordPress"},"content":{"rendered":"

With <\/span>EmbedPress<\/b><\/a>, you can easily embed CodePen codes in WordPress.\u00a0<\/span><\/p>\n

CodePen<\/b><\/a> is an online community or social development environment for front-end and back-end website developers. It acts as an online code editor and open-source learning environment, where developers can create code snippets, called “pens,”, using HTML, CSS, and JavaScript.<\/span><\/p>\n

How To Embed CodePen Codes With EmbedPress<\/strong><\/h2>\n

Here are the steps to embed any code into your WordPress site, using the<\/span> EmbedPress <\/b>plugin and a URL.<\/span><\/p>\n

Step 1: Install The EmbedPress Plugin<\/b><\/h3>\n

EmbedPress is a very helpful plugin that expands and improves WordPress\u2019s capabilities. Install EmbedPress, and your WordPress site will have far more powerful media options. <\/span>Click here to find EmbedPress on WordPress.org<\/b><\/a>.<\/span><\/p>\n

Step 2: Get The URL Of The CodePen Code File<\/b><\/h3>\n

Before you can embed CodePen code into WordPress, you need to get the URL. To do this, g<\/span>o to the <\/span>CodePen<\/b><\/a> website.<\/span><\/p>\n

\"embed<\/p>\n

Next, use your login credentials to sign in (this is optional). <\/span>Look for the code you want to embed into your WordPress website. <\/span>On the code page, copy the URL<\/span> from the browser address bar. <\/b>Or, click on the \u201c<\/span>Share<\/b>\u201d button, and a pop-up window will appear. Afterwards copy the link.<\/span><\/p>\n

\"embed<\/p>\n

Step 3: Publish Your WordPress CodePen embed<\/b><\/h3>\n

Now you have the URL, you can use it to embed the code in WordPress.<\/span><\/p>\n

Open your WordPress site and <\/span>\u2018Add\u2019 or \u2018Edit\u2019 a post or page that can be on <\/span>Gutenberg Editor<\/b><\/a>, <\/span>Classic Editor<\/b><\/a>,<\/span> or <\/span>Elementor Editor<\/b><\/a>.<\/span><\/p>\n

\"embed<\/p>\n

Let\u2019s get the complete guideline on how you can easily embed CodePen codes on your preferred editor below:\u00a0\u00a0<\/span><\/p>\n

How To Embed CodePen Codes Using Gutenberg Editor:<\/b><\/h2>\n

Click on the <\/span>\u2018+\u2019 <\/b>icon on your post content area in the <\/span>Gutenberg editor<\/b> and select the \u2018EmbedPress\u2019 block. You can also insert EmbedPress from the \u2018<\/span>Add Block<\/b>\u2019 button at the top of the page.\u00a0<\/span><\/p>\n

\"embed<\/p>\n

Once the block appears, enter the URL into the block as shown below.\u00a0<\/span><\/p>\n

\"embed<\/p>\n

Your URL will automatically be transformed into an embed of your CodePen code file. Then, p<\/span>ublish your WordPress content, and the code will be embedded on the published page or post for users to see.<\/span><\/p>\n

While editing your WordPress content, you can also edit your embed, thanks to EmbedPress.<\/span><\/p>\n

To edit the embed in Gutenberg, follow the steps given below:\u00a0<\/span><\/p>\n

Click on the EmbedPress block on your editor – t<\/span>he block customizer will appear on the side panel of the Editor.\u00a0<\/span><\/p>\n

\"embed<\/p>\n

You can change the dimensions of the embedded code by modifying the width and height and customize it the way you need with absolute ease.\u00a0<\/span><\/p>\n

How To Embed CodePen Codes Using Elementor Editor:<\/b><\/h2>\n

You can embed CodePen code using EmbedPress in <\/span>Elementor<\/b><\/a>.\u00a0<\/span><\/p>\n

Drag & drop the \u2018<\/span>EmbedPress<\/b>\u2019 widget onto the Elementor editor.<\/span><\/p>\n

\"embed<\/p>\n

\u00a0Next, paste the code URL onto the \u2018<\/span>Content Setting<\/b>\u2019 of the widget from the Elementor side panel.\u00a0<\/span><\/p>\n

\"embed<\/p>\n

You can edit the embedded code on the Elementor editor with a few easy steps.<\/span><\/p>\n

First, go to the \u2018<\/span>Style<\/b>\u2019 tab on the Elementor side panel. Then, <\/span>Change the dimensions, aspect ratios, and background color as necessary.<\/span><\/p>\n

\"embed<\/p>\n

How To Embed CodePen Codes Using Classic Editor:<\/b><\/h2>\n

You can effortlessly embed CodePen codes onto your <\/span>Classic Editor<\/b> with just a click.\u00a0<\/span><\/p>\n

Paste the URL directly onto the \u2018<\/span>content area<\/b>\u2019 of the editor interface. A purple background with a \u201c<\/span>Loading your embed\u2026<\/b>\u201d message will appear in the content area for a few seconds. Once the content appears on the editor, p<\/span>ublish your WordPress content and click preview.\u00a0<\/span><\/p>\n

\"embed<\/p>\n

The URL will be automatically converted into an embed of your CodePen code.<\/span><\/p>\n

\"embed<\/p>\n

Your code embed will be fully responsive on your website.<\/span><\/p>\n

Still getting stuck? Feel free to <\/span>contact our support team<\/b><\/a> for further assistance.<\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

You can now easily embed CodePen codes into your WordPress websites with just a single click with EmbedPress. All you need is the URL of the code you want to embed into your site and the EmbedPress plugin installed on your site. <\/p>\n","protected":false},"author":398,"featured_media":13640,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[2221],"doc_tag":[2253,2231],"class_list":["post-13634","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-embeds","doc_tag-codepen","doc_tag-settings"],"year_month":"2026-07","word_count":605,"total_views":"3429","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Tasnia","author_nicename":"tasnia","author_url":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/author\/tasnia\/"},"doc_category_info":[{"term_name":"Embed Sources","term_url":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/docs-category\/embeds\/"}],"doc_tag_info":[{"term_name":"codepen","term_url":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/docs-tag\/codepen\/"},{"term_name":"settings","term_url":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/docs-tag\/settings\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/docs\/13634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/users\/398"}],"version-history":[{"count":5,"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/docs\/13634\/revisions"}],"predecessor-version":[{"id":13666,"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/docs\/13634\/revisions\/13666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/media\/13640"}],"wp:attachment":[{"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/media?parent=13634"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/doc_category?post=13634"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/embedpress.com\/wp-json\/wp\/v2\/doc_tag?post=13634"}],"curies":[{"name":"wp","href":"https:\/\/round-lake.dustinice.workers.dev:443\/https\/api.w.org\/{rel}","templated":true}]}}