0

I created a child theme of the theme twenty-seventeen. I want to add some scripts, especially Jquery libraries and some custom Jquery to animate the homepage. This is what I have in functions.php (child theme folder):

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

function enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
   wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), null, false);
   wp_enqueue_script('jquery2', 'https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js', array(), null, false);
   wp_enqueue_script('jquery3', 'https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js', array(), null, false);
   wp_enqueue_script( "homejs", get_stylesheet_directory_uri()."/custom-js/home_js.js", array(), null, false);

}


?>

On the Network tab, when I inspect the page, it shows that all of the scripts were imported (paths and typography are correct) but the animation does not proc. Why? This is the JQuery code itself:

$(document).ready(function(){
    $('#nav-icon').click(function(){
        $(this).toggleClass('open');
    $(".overlay").toggleClass("open");
    $(".overlay a").toggleClass("open");
  $(".overlay p").toggleClass("open");
    });

  // Scroll Reveal
  // ScrollReveal().reveal('.services .grid .card');

  $('.square.blue').on('inview', function(event, isInView) {
    if (isInView) {
      // element is now visible in the viewport
      $(this).addClass("in-view");
    } else {
      // element has gone out of viewport
      $(this).removeClass("in-view");
    }
  });
});

I have no idea of what I am doing wrong. Thanks in advance for the answers.

  • 1
    First, you shouldn't need to enqueue jQuery - your parent theme most often does this for you. Second, WP loads jQuery in compatibility mode, so you have to write it slightly differently - search for "jquery no conflict wordpress" or see the article here: digwp.com/2011/09/using-instead-of-jquery-in-wordpress – WebElaine Jan 14 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.