How to use codepen code to wordpress?

hi, i need a little help here , how can i use a codepen “html+css+java” code to my wordpress post/pages?

i tried to edit the code so many times but fail,what im doing wrong here. plus i dont know where to put my javascript, thanks for help!!

i.imgur. com/becWeRt.png <---- second link

Its not an easy thing to do if you are not familiar with WordPress hooks and filters and PHP.

You would need to add the JavaScript and css to a PHP script to make them available, and then add the HTML, although the HTML would need to be typed into the PHP, you cannot simply include it as you would the css and JavaScript.

He is an article on adding css and JavaScript to PHP. Including CSS & JavaScript

This is going to take some reading and effort on your part to get this to work. It is worth it however, this type of task is essential for a WordPress Developer, its a core skill to know.

1 Like

If you want to do Wordpress development, install this on your machine

Then install WordPress. Now you have a local copy of WP running. Then just go to the theme directory of WP, and make/play with your changes there using an IDE or text editor. When you’re happy it’s working, ZIP the whole theme directory and you can use that to upload to your production WP installation.

Sorry to say this can not work for what the OP has in mind. Its fairly complex to get an HTML/CSS/JavaScript package to work on a page or a post in WordPress. You would have to add the HTML embedded inside PHP to the functions.php file, enqueue the CSS and the JavaScript separately, then ‘hook’ that into a page or post using an add_action targeting a specific hook.

This is basically what a widget plugin is, and that takes some WordPress chops to do. But again, if you plan on working with WordPress in any serious way it is worth taking the time to learn how to do.

Maybe I misunderstood the OP. I thought he wants to do Wordpress development.

Yes, I know. I did this on my local WP installation running on my machine (via virtual AMPPS). In functions.php enqueued custom scripts and styles, then did an add_action, created the widgets_init, register new functions, etc. I just edit the PHP files directly, then refresh the browser… repeat. (Instead of editing php files, zipping, uploading to a remote WP installation, test, repeat, etc).

When finally everything is working, only then would I zip the entire directory, upload and do final testing on the remote WP install.

Are you sure you need Wordpress? What are you trying to make and what’s your goal? If you just want “a website” and you’re learning HTML etc. you’d be better off building a static site with eg; Jekyll.

Wordpress is very popular but running it well is a full time job (just google “wordpress hacked” to get a taste of all the things that can go wrong) and (in my opinion) unless you actually want to be a Wordpress professional, it’s just not worth the effort.

Well I could have easily misunderstood as well. The way I read the question was that @EllenG found a package of code on Codepen ( HTML/CSS and JavaScript ) that s/he wanted to integrate into an existing WordPress page or post. @EllenG 's question was how to add these files to make the Codepen module work. My reply was that it is more work with WordPress than if you were trying to do it on a standalone website.

1 Like