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.www.ads-software.com/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 4 years, 7 months ago by Jan Dembowski.
Viewing 3 replies - 1 through 3 (of 3 total)

  • 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

    (@managerslo)

    Thank you for your reply Joy (@joyously)

    Hmmm…

    I saw this code at codepen:

    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

    , 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

    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.