Adding jQuery dependency prevents my script from enqueuing/loading

Question

This works:

add_action('wp_enqueue_scripts', 'custom_script_enqueue');
function custom_script_enqueue() {
  wp_enqueue_style(
       'customstyle',
        get_template_directory_uri() . '/css/theme.css',
        array(),
        '0.1',
        'all'
  );

  wp_enqueue_script(
     'customjs',
      get_template_directory_uri() . '/js/js.js',
      array(),
      '0.1',
      true
  );
}

But my custom JS is going to use a couple of jQuery calls. It's currently failing because jQuery is loaded after this custom script and so jQuery is coming back as being undefined on page load.

I read some answers here and tried this:

add_action('wp_enqueue_scripts', 'custom_script_enqueue');
function custom_script_enqueue() {
  wp_enqueue_style(
      'customstyle',
       get_template_directory_uri() . '/css/theme.css',
       array(),
      '0.1',
      'all'
   );

   wp_enqueue_script(
      'customjs',
      get_template_directory_uri() . '/js/js.js',
      array('jQuery'),
      '0.1',
      true
   );
}

Now, my custom script doesn't load at all. It's nowhere to be found when I view-source: on the page.

I tried replacing wp_enqueue_script with wp_register_script and then calling wp_enqueue_script('customjs'); below, but although it throws no errors, I get the same (lack of) result.

Note that these snippets were edited to remove the get_template_directory_uri(); for readability. — armadadrive
– armadadrive, Commented Feb 23, 2017 at 21:25
I'd suggest leaving get_template_directory_uri(); in the code. Use concatenation if it will help with readability. Not everyone reads the comments and there's a big difference between using get_template_directory_uri() and not, in this case. — Dave Romsey
– Dave Romsey, Commented Feb 23, 2017 at 21:29
The string for the jQuery dependency is actually, jquery (all lowercase). — Dave Romsey
– Dave Romsey, Commented Feb 23, 2017 at 21:29
@DaveRomsey That's it! Please add it as an answer and I'll mark as correct. Thanks for the comment. — armadadrive
– armadadrive, Commented Feb 23, 2017 at 22:09

Dave Romsey · Accepted Answer · 2017-02-23 22:14:58Z

4

The handle for the jQuery dependency is actually, jquery (all lowercase and case sensitivity matters).

The complete list of JavaScript handles are documented here in the Theme Developer Handbook.

answered Feb 23, 2017 at 22:14

Dave Romsey

18k11 gold badges56 silver badges70 bronze badges

1

Awesome. Those little things that trip us up when we think everything "looks right". Thanks!

armadadrive
– armadadrive

2017-02-23 22:18:54 +00:00
Commented Feb 23, 2017 at 22:18

Add a comment |

Stack Exchange Network

Adding jQuery dependency prevents my script from enqueuing/loading

1 Answer 1

Your Answer

Hot Network Questions

Adding jQuery dependency prevents my script from enqueuing/loading

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions