Use latest jQuery in WordPress (admin interface)

I want to use the latest jQuery (and jQuery UI) versions on my admin interface (editing a specific post type that I created).

I tried this:

Read More
// jQuery 1.x
wp_register_script('jquery1x', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null, true);

// jQuery UI 1.8.4 PTBR
wp_register_script('jquery-ui-custom-pt_BR', THEME_URL . 'js/jquery.ui.datepicker-pt-BR.js', array('jquery1x'), null, true);
// jQuery UI 1.8.4  
wp_register_script('jquery-ui-custom', THEME_URL . 'js/jquery-ui-1.8.4.custom.min.js', array('jquery1x', 'jquery-ui-custom-pt_BR'), null, true);

// jQuery UI 1.8.4 CSS 
wp_register_style('jquery-ui-custom-css', THEME_URL . 'css/smoothness/jquery-ui-1.8.4.custom.css');

wp_enqueue_style('jquery-ui-custom-css');
wp_enqueue_script('jquery-ui-custom');

And it worked but on other WP admin pages I got some jQuery errors because the overrides of jQuery (since it’s loaded twice).

If I “deregister” the jQuery and register it again (using the latest) it won’t work.

That’s not the first time that I ran into this problem… All I need is to use the latest version of jQuery on my WordPress admin interface to use some features like Datepicker and Colorpicker.. But until now I can’t do this using register_script.

If I register it with “jquery” name, it won’t update because there’s already a jQuery loaded by WordPress on this line:

<script type='text/javascript' src='http://website.com/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils,nav-menu&amp;ver=2b05c108d9016a4caa470b8edaf40953'></script>

And I can’t hack into this load-scripts.php file to change the filename since I don’t want to change the WordPress core.

Related posts

Leave a Reply

2 comments

  1. Starting with version 3.6 WordPress actively discourages from deregistering “critical” scripts in admin at all.

    For posed scope (loading newer jQuery in specific part of admin) it would make more sense to load custom copy of jQuery normally and use noConflict() on it right away to isolate it in own variable to be used in custom JS code.


    Old andswer

    deregister doesn’t work for you because WP concatenates scripts in admin area by default. So when you make jQuery load from elsewhere it falls apart.

    You can disable concatenation to make it work (add conditionals as needed):

    add_action( 'admin_init', 'jquery_admin' );
    
    function jquery_admin() {
    
        global $concatenate_scripts;
    
        $concatenate_scripts = false;
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ), false, '1.x', true );
    }
    

    PS many thanks for trick with loading latest version from Google, I wasn’t aware of it 🙂

  2. If you have it working for your custom post type pages and thats all you want, you could just put in a conditional tag checking for the page:

    if (is_admin() && $_GET['post_type'] == 'custom_post_type') {
      // jQuery replacement
    }
    

    Possibly a better solution would be to take a look at this plugin: http://wordpress.org/extend/plugins/use-google-libraries/ it will override the default WordPress AJAX libraries with those in google’s CDN.

    A few nice things about this, since so many sites are using the libraries from google, they’ll already be cached, you don’t have to manually update your libraries.