Wordpress Plugin doesn't load JS files

Question

I am writing my first plugin for wordpress and I'm attempting to load scripts in with my plugin.

function somadome_enqueue_script() {   
    wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
    wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . 'js/slick.js',array('jQuery'), '1.0');
    wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . 'js/somaslick.js',array('jQuery'), '1.0');
    wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
    wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}

/*Create Plugin Parts*/
add_action('init', 'create_carousel');
add_action('wp_enqueue_scripts', 'somadome_enqueue_script');

The issue is the CSS loads (two lines at the bottom) but the code at the top (the scripts) doesn't Load and I'm trying to figure out why the Javascript/JQuery code isn't loading.

I echo'd the paths to check them and they load into the browser fine, so they exist. But aren't being loaded by wordpress.

Answer 1

From looking at the code, I'm assuming it's not loading because you've missed the forward slash from the JavaScript files in the enqueue function.

function somadome_enqueue_script() {   
    wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
    wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('jQuery'), '1.0');
    wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('jQuery'), '1.0');
    wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
    wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}

...should get things working.

Answer 2

I guess its just a dependencies issue. You've set your logoslickjs depends on array('jQuery') and The dependencies argument of wp_enqueue_script() is case sensetive, so it should be array('jquery')

But, since you're loading a custom version of jQuery called 'somajQuery' , you need to change the script depends array('jQuery') to array('somajQuery') so your code should be:

function somadome_enqueue_script() {   
    wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
    wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('somajQuery'), '1.0');
    wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('somajQuery'), '1.0');

    wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
    wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}

Now, logoslickjs and logoslider are depends on custom jQuery somajQuery and so on.