Codepen Wordpress Integration - How To Add Codepen HTML, CSS and JavaScript To WordPress

This method of Codepen Wordpress integration will allow you to add pretty much any Codepen project to your WordPress site. Keep in mind, Codepen projects are not designed to be added to websites out of the box, so you may need to make adjustments.

Post videos of your WordPress success using the hashtag #WPLLCommunity!

I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.

--------------

If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.

Connect with us:

[graemecox]

Yeeeew shot man, was scratching my head all day with script plugins etc and no joy, stumbled on this and boom works instantly. thanks

[tagfat]

Very useful! I am currently learning Java and using Codepen, but needed a bit of guidance on how to put stuff that I make on a live site.
If possible I would love to have a more complete series of examples of how to insert the code: with Gutenberg, classic editor, Elementor, Divi.
For starters this is a lot better than nothing, which is what you get in most introductions to java programming.

[geeceephd]

This was exactly what I was looking for ! Thx!

[jimmyekisa]

Thanks so much for this video. Just when a thought crossed my mind, I got a spot-on answer.

[shachaha]

That's so cool! I feel I am getting more and more independent! Needed that! Thanks a lot!

[MikeHudsontek]

How come the syntax of my code doesn't show the different colours like in your video? when putting it into the HTML block

[grumpyguy]

Great tutorial - thank you! But I have the problem, that my JS is only "in action" if I open the "customizer"-Part. If the page is displayed "normal", the script doesn't work. Do you have a solution for this?

[tommyschilb]

I enjoyed the video. Question, I’m making a review page and have a CSS +HTML skill bar chart that I found online. How can I effectively put just this chart into my elementor page? I tried used Unlimited Elements plugin, but the HTML + CSS chart never shows up correctly on the page.

[davidglabais]

Why can't the CSS go in the custom html page in the edit-page screen using style tags?

[expressaagenciadigital]

Hi. Great video. But it doesn't work for me. I have elementor builder, and I did exactly you said on the video, but It doens't work. When I paste the html code on the wordpress editor - block Custom HTML - it doesn't appear the colors of the script, like you did on the video. Example: when you type <script= it appears the options. I didn't see any options. When I tried to preview it seems deconfigured.

[andonisr]

Hi Bjorn
Another great tutorial - especially about the part on making the javascript work inside a custom HTML, (opening/closing tags).
Have you ever tried to make this work as a widget in Elementor? That would truly be groundbreaking stuff :-) I may try implementing it by copying an existing widget and replacing its code with the one I'm after through codepen...?!
Any suggestions would be great..!!

[thevictoramos]

Good morning Sir, thank you for the video. It was very helpful. Please, how do I add codepen code as a page loader in wordpress website.
Thank you

[appdevelopernila]

Its working thanks for that, but my wasn't responsive after adding it to wordpress, what should i do

[succcesschallenge]

Nice tutorial, very innovative. Keep it up.

[juanchirinos]

Hi, some way to use a js animation as a background in elementor?

[segitterius]

i want to midnight snow on everytpage of my website
but i dont have nay clue cause in this code there is body tag which is conflicting with other

[raman-sharma]

Sir, can you help me to find a Math calculator code on codepan and also tell me how can I implement it into my Wordpress website?

[chandanam]

can you make more vid on code pen or help me finding it. for example changing menu bar css

[JatinChhabra]

Thanks for sharing man.
Codepen looks pretty interesting, as like some times we want to show two titles on a page.

[unknwn.unknwn]

can anyone show me how to do this on WIX?