0

I'm trying to make scripts load in a certain order, and am getting unexpected results. I'm using this script:

function tallulah_scripts() {
  wp_enqueue_script( 'header-js', get_template_directory_uri() . '/js/header.min.js', null, '1.0', false );
  wp_deregister_script('jquery');
  wp_enqueue_script( 'footer-js', get_template_directory_uri() . '/js/footer.min.js', null, '1.0', true );
  wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js', null, '2.1.0', true );
}
add_action( 'wp_enqueue_scripts', 'tallulah_scripts');

...and when I load the page the scripts appear like this:

    <script type='text/javascript' src='http://tallulah/wp-content/themes/tallulah/js/jquery.min.js?ver=2.1.0'></script>
    <script type='text/javascript' src='http://tallulah/wp-content/themes/tallulah/js/footer.min.js?ver=1.0'></script>
  </body>
</html>

odd right? How would I FORCE footer.min.js to load first? I've tried setting the dependency like so:

wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js', 'footer-js', '2.1.0', true );

..but it seems to have no effect. Any pointers please?

2 Answers 2

2

Simple Fix

The reason why your code does not work is because the third parameter of the wp_enqueue_script() function is expecting an array, not a string.

Just replace 'footer-js' with array('footer-js') and it will work:

function tallulah_scripts() {
  wp_enqueue_script( 'header-js', get_template_directory_uri() . '/js/header.min.js', null, '1.0', false );
  wp_deregister_script('jquery');
  wp_enqueue_script( 'footer-js', get_template_directory_uri() . '/js/footer.min.js', null, '1.0', true );
  wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js', array('footer-js'), '2.1.0', true ); // Note the footer-js dependency
}
add_action( 'wp_enqueue_scripts', 'tallulah_scripts');

Alternative Solution

The less common (and not so recommended) way to deal with this is to output your own tag to include jQuery anywhere you wish, literally.

The first step is to remove jQuery from the global scripts array just before WordPress is about to process it, we do so using the print_scripts_array filter hook and deleting the jQuery entry from the array.

The second step is to just echo a custom <script> tag pointing to the jQuery script, it could be echoed using any action hook, or even put in any template file manually (not recommended), in this example I'm using the wp_footer hook with a low priority so the script is inserted after any other elements associated with wp_footer (basically at the very end of the page).

// Force remove default jQuery
add_filter('print_scripts_array', 'remove_jquery');
function remove_jquery($scripts) {
    $key = array_search('jquery', $scripts);
    if ($key !== false) {
        unset($scripts[$key]);
    }
    return $scripts; 
}

// Print custom jQuery wherever you want
add_action('wp_footer', 'print_custom_jquery', 200);
function print_custom_jquery() {
    echo '<script src="'.get_template_directory_uri().'/js/jquery.min.js"></script>';
}
4
  • What should it do?? Please edit your answer and please explain what your code should do, and how does your code work. Please also add a description to what the OP did wrong May 12, 2014 at 17:07
  • I won't call that well documented though. May 12, 2014 at 17:28
  • @PieterGoosen I've updated my answer. May 13, 2014 at 4:48
  • Unfortunately I can't upvote you twice. This is really well constructed. Thanks May 13, 2014 at 4:56
1

Check out the following url: http://www.trembl.org/codec/832/

It says that the action wp_enqueue_scripts has a third param (priority)

-- EDIT --

If you need to load a script after the others, I guess you do this:

function load_latests_scripts() {                           
    wp_enqueue_script( 'footer-js', get_template_directory_uri() . '/js/footer.min.js', null, '1.0', true );

    // ... other scripts
}    
add_action('wp_enqueue_scripts', 'load_latests_scripts', 1);    // 1 is smaller than the default 10.

If you need to load a script before the others, I guess you do this:

function load_first_scripts() {                         
    wp_enqueue_script( 'header-js', get_template_directory_uri() . '/js/header.min.js', null, '1.0', false );

    // ... other scripts
}    
add_action('wp_enqueue_scripts', 'load_first_scripts', 20); // 20 is bigger than the default 10.
2
  • And how is it used?? Please add an example and properly structure your answer May 12, 2014 at 16:40
  • See answer above! May 12, 2014 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.