Codepen Wordpress Integration - How To Add Codepen HTML, CSS and JavaScript To WordPress
Вставка
- Опубліковано 29 вер 2024
- Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: wplearninglab....
Check out the free WP & Online Marketing Summit For Beginners. The online event is June 18, 2019: events.wplearn...
Codepen Wordpress Integration - How To Add Codepen HTML, CSS and JavaScript To WordPress • Codepen Wordpress Inte...
Join our private Facebook group today! / wplearninglab
Link to code on blog: wplearninglab....
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!
Grab your free 17-Point WordPress Pre-Launch PDF Checklist: vid.io/xqRL
Download your exclusive 10-Point WP Security Checklist: bit.ly/10point-...
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.
wplearninglab....
Connect with us:
WP Learning Lab Channel: www.youtube.com...
Facebook: / wplearninglab
Twitter: / wplearninglab
If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist focused on adding functionality to Wordpress without a plugin: ua-cam.com/video/I4ciH6RrfM8/v-deo.html
Awesome! Had been waiting for this for a long time! Txs!
You're welcome, better late than never :) Thanks for watching!
How do you see the code like that, mine is just (normal) text? I dont know of you use some plug-in ? thanks
Yeeeew shot man, was scratching my head all day with script plugins etc and no joy, stumbled on this and boom works instantly. thanks
Awesome, I'm glad I could help Graeme. Thanks for watching!
That's so cool! I feel I am getting more and more independent! Needed that! Thanks a lot!
Practice makes perfect and independence saves money :) Good work Shanti, thanks for watching!
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..!!
That's a great idea. I don't have any suggestions because I've never made an Elementor widget before, but this would be awesome. But it should be as easy as you describe. Replace the code in the widget with the one you're after. There will be functions Elementor uses to create the color selectors and point and click options on the side panel. Make sure you know how that process works and make sure you test your widget for responsiveness.
@@wplearninglab Or maybe donut throught the Unlimited Elementor plugin...lol...that may be easier. But I will still give it a try..it will be like discovering the ,..,'Lost city' of Indiana Jones...🤣
How come the syntax of my code doesn't show the different colours like in your video? when putting it into the HTML block
What I want to add is this prntscr.com/lvfzx6
Basically it's a custom made calculator (html/javascript/boostrap)
but when following the steps and all this happens
prntscr.com/lvfz8a
can you make more vid on code pen or help me finding it. for example changing menu bar css
not working it mostly end up......damaging the website
Sir can we apply this method to a blog post
Yep, you can add HTML, CSS and JS to blog posts no problem. The process would be the exact same as you see in this video.
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
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.
Hi,
How does something like this get integrated, button spinners when clicked so the user knows something is happening to wait:
1: codepen.io/valentingalmand/pen/MYMZZK
2: loading.io/ 4/5 down the page will see this: prntscr.com/pwpkn7
3: Bottom of this page: getbootstrap.com/docs/4.2/components/spinners/
4: codepen.io/jmalatia/pen/HkmaA
Be good to know how to implement these
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?
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
Why can't the CSS go in the custom html page in the edit-page screen using style tags?
How To Add Codepen HTML, CSS and JS To Html template files?
Why do have an annoying text rolling on your video!??
This was exactly what I was looking for ! Thx!
Thanks so much for this video. Just when a thought crossed my mind, I got a spot-on answer.
I’m happy I could help Jimmy, thanks for watching!
i followed all the steps but the Javascript code isn't working, i can see on comments some fans have the same issue.
did you fix it?
Thanks alot
You're welcome, thanks for watching! Let me know if you have any questions :)
can anyone show me how to do this on WIX?
I tried it on my site with page builder but not lucky enough :(
I followed all your steps. Unfortunately, nothing is showing up.
did you fix it?
Thanks a lot.
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.
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
Nice tutorial, very innovative. Keep it up.
Thanks, I plan to. Thanks for watching!
Thak you brother
Nice WP tutorial...Very Informative
Thanks Andre and thanks for watching!
WordPress Tutorials - WPLearningLab No Problem
Its working thanks for that, but my wasn't responsive after adding it to wordpress, what should i do
Your are god sent ,.
I'm happy to help, thanks for watching!
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?
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
Thanks for sharing man.
Codepen looks pretty interesting, as like some times we want to show two titles on a page.
Hi Jatin, if you browser through Codepen, there are some really great elements.
Thanks for watching!
!NEWBIE ALERT! Could someone let me know what that plugin is with the block editor in the top right-hand corner? 🤔
Bollocks, I meant top left hand corner*
Hi James, luckily we're very newbie friendly around here :)
I skimmed through the video just now and the block editor is Gutenberg. It's built right into WordPress 5+. If you have WordPress 5 or higher, but you don't have the block (Gutenberg) editor, then you may have a plugin installed that disables Gutenberg and brings the Classic editor back. The most popular one is this one: en-ca.wordpress.org/plugins/classic-editor/
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
@@wplearninglab Hey buddy, I just updated to WP 5.2 and the Gutenberg block editor magically appeared! Newbie error lol! Thanks for the great content bro, keep up the good work, you are awesome!
Grammarly
Thanks for this. I tried implementing what you showed, but I feel like I'm missing something due to the fact that it is not working for me. Would it have to do with the External Scripts/Pens or the External Stylesheets/Pens? Perhaps that it was coded with SCSS originally? I am working in WordPress with Divi and a child theme. Thanks in advance.
Hi Bev,
Sorry for the delay. We just had our third baby and it's been a bit of a gong show around here 👶
It could be due to any number of things. It being SCSS originally shouldn't hurt as long as you're using the final CSS on your page.
I would use the "inspector" to make sure that all the scripts and CSS are being loaded onto the page.
I would check the "console" in the inspector to make sure there isn't an issue with the javascript. I would check to make sure the javascript is being loaded after the HTML.
I may also try getting it to work on a plain HTML file if none of the above work. If you can get it to work in a plain HTML file and not in WP and all the scripts and CSS are being loaded to the page properly then there could be a conflict the theme or a plugin on the site.
I hope that helps and thanks for watching!
You're soo goood.
Thanks man!
Nice tutorial but I cannot find the HTML code on your blog side
Hi Ilaria,
Thanks for letting me know! The HTML code is on the blog post now. You may have to refresh the page to see it.
Please let me know if it's still not working.
Thank you for coming back to promptly, I've just checked and the HTML code is now there :-) Brilliant! Thank you again!!
No problem, I'm pretty fast when I can be, which is not all the time :)
Hi, some way to use a js animation as a background in elementor?
How can I get this medicine cards CodePen
Very helpful, thank u!!
thank you..but how to embed this code inside already existing page? not to a new page as you mentioned.
many thanks
You do the exact same thing, but on a different page : )
Nice tutorial. I like it.
Thanks Sartul and thanks for watching!
Please Update, Show that how people can easily use these styles using css tags or class
Can you clarify what you mean? I'm pretty sure CSS and classes are used in this tutorial...
You are the boss!
Thanks! And thanks for watching!
hi sir pls make a video on wpclassified plugin.
I've put it on the list, thanks for the suggestion!
awesome. thanks dude!
You’re welcome and thanks for watching!
Очень топово ☻
Having your headshot is only distracting. I prefer seeing the code alone. Otherwise, good tutorial.
Thanks for your feedback Natasha and thanks for watching!
The mumbling combined with distracting and meaningless text animation is just a great touch. Miss the mouse pointer wiggle though.