Search code examples
javascriptphpjquerywordpressgenesis

Slick and other JS Scripts with Genesis Framework


I'm working on a Wordpress site thats based on the Genesis framework.

Im trying to get various JS scripts to work but currently im trying to get Slick to work: http://kenwheeler.github.io/slick/

I have a very simple test page here: http://staging.seedcreativeacademy.co.uk/slick/ in which I have pretty much placed all of the code from the example on the slick site, but the slick 'slide' effect doesn't seem to be working at all.

I notice this trouble with Animate.cc and a couple of other JS libraries im trying to use - They seem to be enqueued correctly from the functions.php file but nothing.

Im mainly wondering is Genesis is blocking scripts of if I have added them the wrong order in functions.php (does that matter?)...

Any help would be greatly appreciated.


Solution

  • If you look at the browser console you can see that the custom scripts are not loading because the paths are incorrect.

    Failed to load resource: the server responded with a status of 404 (Not Found)
    

    This is how you should be loading the scripts if you are using a CDN. You'll notice I use the dependency parameter to ensure the scripts are loaded in the correct order.

    wp_enqueue_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js', array(), '3.2.1', false );
    wp_enqueue_script( 'jquery-migrate', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js', array( 'jquery' ), '3.0.1', false );
    wp_enqueue_script( 'slick-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array( 'jquery', 'jquery-migrate' ), '1.8.1', true );
    
    wp_enqueue_style( 'slick-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css', array(), '1.8.1' );
    wp_enqueue_style( 'slick-carousel-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css', array( 'slick-carousel' ), '1.8.1' );