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

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>';
}
  • 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 – Pieter Goosen May 12 '14 at 17:07
  • I won't call that well documented though. – Pieter Goosen May 12 '14 at 17:28
  • @PieterGoosen I've updated my answer. – asked Feb 12 '12 May 13 '14 at 4:48
  • Unfortunately I can't upvote you twice. This is really well constructed. Thanks – Pieter Goosen May 13 '14 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.
  • And how is it used?? Please add an example and properly structure your answer – Pieter Goosen May 12 '14 at 16:40
  • See answer above! – pascalvgemert May 12 '14 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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