Wordpress error when replacing local jQuery by externally-hosted

Question

I'm trying to load jquery from CDN instead of loading natively with wordpress. In my functions.php I have done it like below, making sure it should only happen on the front-end:

function replace_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery2', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');
        wp_enqueue_script('jquery2');
    }
}
add_action('init', 'replace_jquery');

nonetheless, when I try to log in the admin area, I get a bunch of error starting with:

Notice: wp_deregister_script was called <strong>incorrectly</strong>. 
Do not deregister the <code>jquery</code> script in the administration area. 
To target the front-end theme, use the <code>wp_enqueue_scripts</code> hook. 
Please see <a href="https://codex.wordpress.org/Debugging_in_WordPress">Debugging in WordPress</a> for more information. 
(This message was added in version 3.6.0.) in /app/public/wp-includes/functions.php on line 4204

Sometimes it does not throw this error, and sometimes it does. What am I doing wrong?

The PHP notice is pretty clear, IMHO: "Do not deregister the `jquery` script in the administration area. **To target the front-end theme, use the `wp_enqueue_scripts` hook.**" — cabrerahector, Feb 26 '19 at 03:48
@cabrerahector but that's what I'm saying: I specifically check `!is_admin()` for that purpose. — geochanto, Feb 26 '19 at 04:00
WordPress is telling you: "don't hook into `init` for this, use `wp_enqueue_scripts` instead." (See the highlighted text from my previous comment?) — cabrerahector, Feb 26 '19 at 04:07
yeah, ok, I did not really that's what a hook meant :P. I'm fairly to this. Makes sense now. Thanks. — geochanto, Feb 26 '19 at 05:48

awran5 · Accepted Answer · 2019-02-26T15:20:28.907

This question has been dealt with so many times over the years, and actually it is quite duplicated but anyway I'll try to summarize/update the "Best practice" approaches.

1. Do not replace the default WordPress jQuery unless you really have to. If you really care about performance you don't need jquery

2. Unless your theme or plugin does load jQuery, WordPress doesn't load it in the front-end area by default, usually we have to use wp_enqueue_script('jquery'); to load it. So first of all, make sure that you have jQuery enqueued. Use this code snippet to check your enqueued scripts:

// Show all enqueued scripts
add_action( 'wp_print_scripts', function () {
    global $wp_scripts;
    $enqueued_scripts = array();
    foreach( $wp_scripts->queue as $handle ) {
        $enqueued_scripts[] = $wp_scripts->registered[$handle]->src;
    }
    var_dump($enqueued_scripts);
} );

3. Do not using the wrong action hook init for adding your scripts, you should use wp_enqueue_scripts instead.

There are intentional safeguards in place to prevent critical admin scripts, such as jQuery core, from being unregistered. source

4. Most of solutions to replace the default jquery are outdated. Use this code instead (Tested on WP v5.1):

// Replace the default wp jquery with fallback
add_filter( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');
function replace_default_jquery_with_fallback() {
    // Change the version if needed
    $ver = '1.12.4';
    // Dequeue first then deregister
    wp_dequeue_script( 'jquery' );
    wp_deregister_script( 'jquery' );
    // Load from Google
    // Set last parameter to 'true' if you want to load it in footer
    wp_register_script( 'jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", '', $ver, false );
    // Fallback
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="'.includes_url( '/js/jquery/jquery.js' ).'"><\/script>\')' );
    wp_enqueue_script ( 'jquery' );
}

Please note that:

Using this way will also affect any plugin that depends on jQuery
The correct way to completely remove a style or script is to dequeue it first then deregister it.
init action hook is "Fires after WordPress has finished loading but before any headers are sent" use it with care.
wp_enqueue_scripts is used to handle front-end scripts.
admin_enqueue_scripts is used to handle admin scripts.
login_enqueue_scripts used for login pages.
Consider using jQuery Migrate if your code/plugins developed for jQuery versions older than 1.9.

Wordpress error when replacing local jQuery by externally-hosted

1 Answers1