Ensure an external javascript file called from plugin is loaded after jquery is called

Question

I am calling a javascript file from my wordpress plugin code using:

add_action('init','gallery_sugar_js_init');

    function gallery_sugar_js_init() {
        wp_enqueue_script( 'gallery_sugar_js', plugins_url( '/js/gallery_sugar.js', __FILE__ ));
}

But in source code for WordPress I'm seeing this (my javascript file loading first):

<script type='text/javascript' src='http://localhost/projects/lightbox/wp-content/plugins/custom-gallery/js/gallery_sugar.js?ver=3.7'></script>
<script type='text/javascript' src='http://localhost/projects/lightbox/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>

How do I make sure jquery is loaded first in my Wordpress plugin file?

Answer 1

Try this:

add_action('init','gallery_sugar_js_init');

function gallery_sugar_js_init() {
  wp_enqueue_script( 'gallery_sugar_js', plugins_url( '/js/gallery_sugar.js', __FILE__ ), array( 'jquery' ) );
}

Check Function Reference for more info.

Answer 2

The Codex has a specific example exactly for this instance.

The third parameter in wp_enqueue_script is where you can define your dependencies. By putting jQuery as a dependency it will force jQuery to be loaded prior to the script you're enqueing. Here would be an example with your code:

wp_enqueue_script( 'gallery_sugar_js', plugins_url( '/js/gallery_sugar.js', __FILE__ ), array( 'jquery' ) );