Title: codepen html js css in wordpress – Easy
Last modified: March 31, 2020

---

# codepen html js css in wordpress – Easy

 *  [managerslo](https://wordpress.org/support/users/managerslo/)
 * (@managerslo)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/codepen-html-js-css-in-wordpress-easy/)
 * Hello
 * I am trying to buld a site for my business using wp and I am having some problems.
   I saw some interesting fullscreen menus and changing the arrow screen cursor 
   to a dot. I tried to integrate the codepen codes, but I am having problems.
 * I have read the enqueue tutorial here on wordpress
    [https://developer.wordpress.org/themes/basics/including-css-javascript/](https://developer.wordpress.org/themes/basics/including-css-javascript/)
 * but I am still having problems because it does not work. I am not from the IT
   or programing industry, so my knowledge is very basic. I googled it but nothing
   works. I am sure that due to the lack of my programing knowldge, basics, I am
   doing something wrong.
 * My process was:
    a) I created a child theme in Wp, still on my localhost, using
   wamp b) I found a code on codepen with html, css and js code. I downloaded those
   files. c) I copied the html code and inserted it in my Child theme header.php
   file d) On my pc, in C/wamp64/www/wordpress/wp-content/theme/my-theme-child/ 
   I created two files, one is caled js and the other is css; e) From the codepen
   downloaded file, where I had two maps dist and src, I copied from the dist map
   two files, one js called script and the other css called style; f) I pasted the
   js file to my-theme-child/js and the css file to the my-theme-child/css g) Than
   I went to my Child theme functions.php and I added this code:
 *     ```
       function add_theme_scripts() {
         wp_enqueue_style( 'style', get_stylesheet_uri() );
   
         wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', array(), '1.1', 'all');
   
         wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
   
           if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
             wp_enqueue_script( 'comment-reply' );
           }
       }
       add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
       ```
   
 * Now when I preview my page in my browser on top of the page the menu is not as
   it should be (there is only Home, about, contact text on the left side with white
   background, no hamburger button…).
 * I know I have done something wrong, but I can not figure out what.
 * I woud be very happy for any kind of help at resolving this problem.
 * Thank you & Best regards,
    BR
    -  This topic was modified 6 years, 3 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/codepen-html-js-css-in-wordpress-easy/#post-12598323)
 * It might help if you gave the link to the Codepen.
    The HTML probably shouldn’t
   be part of the header. You will need to adapt the script and CSS to work with
   the menu the way it is output by your theme. Your `add_theme_scripts` function
   has some problems. For `wp_enqueue_style`, the first parameter is the handle.
   Put something unique for your child style, and then use the correct handle for
   your parent theme’s style. It can’t be the same handle for both, and it should
   match the parent or it will be loaded twice. (Same for `wp_enqueue_script`.)
 *  Thread Starter [managerslo](https://wordpress.org/support/users/managerslo/)
 * (@managerslo)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/codepen-html-js-css-in-wordpress-easy/#post-12598388)
 * Thank you for your reply Joy (@joyously)
 * Hmmm…
 * I saw this code at codepen:
 * [https://codepen.io/feizc002/pen/bQqqPm](https://codepen.io/feizc002/pen/bQqqPm)
 * and wanted to use it in my Sydney child theme on my new wp website (still on 
   my localhost), and I have no idea how to have this code integrated in my wp.
 * I also saw this code:
 * [https://codepen.io/karlovidek/pen/KQzJoP](https://codepen.io/karlovidek/pen/KQzJoP)
 * , and also have no idea how to integrate it.
 * I know I should probably read some books and things about programing, but I tought
   that someone has an easy way tutorial of integrating this code in wp (put the
   html code there, css and js files there etc.), but as I see I am probably to 
   optimistic.
 * Thank you for your help
    BR
 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/codepen-html-js-css-in-wordpress-easy/#post-12598520)
 * So, your theme probably already has a button for the menu (at least on small 
   devices). So you would need to modify that to exist always. This is the HTML 
   part, which you mentioned. The other part of the HTML is the demo menu, which
   you should _not_ put into your header. It is just for demonstration, although
   the button close portion is needed. You will have to work out the parts that 
   differ with your theme’s menu HTML.
 * Then the CSS uses a Google font, which you won’t need, as you would use whatever
   font your theme uses. It also refers to the classes that are in the HTML, which
   you must change to match your theme’s classes (most themes use the standard classes
   output by WordPress for menus, but some themes change it all up.) There are styles
   for body and .hero and h1 that you probably don’t want. So pare that down to 
   just the menu stuff, then rename things to match your theme.
 * The JS is only for `active` and the button, so make sure the names match whatever
   your CSS ends up with.
 * The second Codepen uses a library, which you would need to also include for it
   to work. On the Codepen page, click on Settings, and choose JS on the left to
   see what library is loaded.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘codepen html js css in wordpress – Easy’ is closed to new replies.

## Tags

 * [codepen](https://wordpress.org/support/topic-tag/codepen/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [enqueue](https://wordpress.org/support/topic-tag/enqueue/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [js](https://wordpress.org/support/topic-tag/js/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [Joy](https://wordpress.org/support/users/joyously/)
 * Last activity: [6 years, 3 months ago](https://wordpress.org/support/topic/codepen-html-js-css-in-wordpress-easy/#post-12598520)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics