I have this in my functions.php file and I can't get jQuery to load in the footer. The includes file loads in the footer fine, though. What else do I need to do?

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery', '', '', '', true );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

I have this in my functions.php file and I can't get jQuery to load in the footer. The includes file loads in the footer fine, though. What else do I need to do?

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery', '', '', '', true );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

• jquery
• wp-enqueue-script

• If you're doing this for performance reasons, you could consider adding defer to your script tags instead: matthewhorne.me/defer-async-wordpress-scripts – diachedelic Commented Aug 25, 2017 at 4:06
• WP dev here, I made a plugin to deal with this: wordpress/plugins/jquery-manager – Remzi Cavdar Commented Jul 4, 2019 at 9:55

6 Answers 6

To do that you will first have to deregister your jQuery script and then register again. If you use jQuery comes with WordPress then following is the function your are looking for.

function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

If you use Google CDN hosted version of jQuery then let me know I will modify this code for Google CDN URL.

Here's another option which avoids having to de-register and re-register:

/**
 * Move jQuery to the footer. 
 */
function wpse_173601_enqueue_scripts() {
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'wpse_173601_enqueue_scripts' );

This solution mimics WordPress core by setting the group to 1, which is how WordPress determines if a script should be in the footer or not (I'm not aware of the reasoning for 1, as @jgraup noted in the comments it seems a bit arbitrary).

A better solution:

add_action( 'wp_default_scripts', 'move_jquery_into_footer' );

function move_jquery_into_footer( $wp_scripts ) {

    if( is_admin() ) {
        return;
    }

    $wp_scripts->add_data( 'jquery', 'group', 1 );
    $wp_scripts->add_data( 'jquery-core', 'group', 1 );
    $wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}

Why its better then the accepted answer IMO

1. Changes it at the very core not at a later stage where other things might already messed with it.
2. The version string it kept in place and not removed!
3. It does not unregister and reregister a script but it just sets the group value that is essentially the same as if the script would be registered with $footer = true.

About not doing this to the admin

If plugins add inline jquery to the wp_head it will fail when jquery is not loaded at that point, so I suggest you avoid that until you have millions editing your site and you try to performance optimize your admin. This is true for frontend as well so you should watch out for bad coded themes or plugins that assume jquery in the head by using inline jQuery code. WP and plugins register other scripts to the admin head with jquery in deps so it would not work anyway I think.

About it not working

You need to be aware that if any other script is loaded to the head that has jQuery in its dependencies, it will also make jQuery load in the head right before itself. And this is good and expected, the reason the wp_enqueue system exists. This means you will learn soon if you use a few plugins that one of them will require cause jquery to the head. It the the default for enqueued scripts, sadly.

Radical Solution

I think it will brake any inline JS that assumes jquery but should that should be rare. This will force all scripts to the footer regardless of how they are enqueued.

add_action( 'wp_enqueue_scripts', 'js_to_footer' );

function js_to_footer() {
  remove_action( 'wp_head', 'wp_print_scripts' );
  remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
  remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
}

I have developed a plugin for this specific problem. This plugin doesn't mess with WordPress jQuery as it is only loaded in the front-end. See: jQuery Manager for WordPress

Why yet another jQuery Updater / Manager / Developer / Debugging tool?

Because none of the developer tools lets you select a specific version of jQuery and/or jQuery Migrate. Providing both the compressed minified / production and the uncompressed / development version. See features below!

✅ Only executed in the front-end, doesn't interfere with WordPress admin/backend and WP customizer (for compatibility reasons) See: https://core.trac.wordpress/ticket/45130 and https://core.trac.wordpress/ticket/37110

✅ Turn on/off jQuery and/or jQuery Migrate

✅ Activate a specific version of jQuery and/or jQuery Migrate

And much more! The code is open source, so you could study it, learn from it and contribute.

Almost everybody uses the incorrect handle

WordPress actually uses the jquery-core handle, not jquery:

https://github/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

// jQuery
$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

The jquery handle is just an alias to load jquery-core with jquery-migrate

See more info about aliases: wp_register_script multiple identifiers?

The correct way to do it

In my example below I use the official jQuery CDN at https://code.jquery I also use script_loader_tag so that I could add some CDN attributes.
You could use the following code:

// Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
// See: https://core.trac.wordpress/ticket/45130 and https://core.trac.wordpress/ticket/37110
function wp_jquery_manager_plugin_front_end_scripts() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    // jQuery
    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    }
    else {
        // Deregister WP core jQuery, see https://github/Remzi1993/wp-jquery-manager/issues/2 and https://github/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
        // Deregister WP jQuery
        wp_deregister_script( 'jquery-core' );
        // Deregister WP jQuery Migrate
        wp_deregister_script( 'jquery-migrate' );

        // Register jQuery in the head
        wp_register_script( 'jquery-core', 'https://code.jquery/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
         * see https://wordpress.stackexchange/questions/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * https://wordpress.stackexchange/questions/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * https://stackoverflow/questions/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
         */
        wp_register_script( 'jquery', false, array( 'jquery-core' ), null, false );
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_jquery_manager_plugin_front_end_scripts' );


function add_jquery_attributes( $tag, $handle ) {
    if ( 'jquery-core' === $handle ) {
        return str_replace( "type='text/javascript'", "type='text/javascript' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 );

add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true for footer
   wp_enqueue_script( 'someScript-js', 'https://domain/someScript.js' , '', '', true );
}

Hey only change your code to like this

function starter_scripts() {
        wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'starter_scripts' );

i think it work fine

add this lines into your functions.php file

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

then it add script into footer