Load Google jQuery UI Theme CDN In WordPress

WordPress comes with a number of built in Javascript and Stylesheet libraries which you can use in your application. One of these libraries is jQuery UI which you can easily load into your website by using the function wp_enqueue_script.

wp_enqueue_script('jquery-ui-core');

This loads in the Javascript required to have access to the core UI library, but jQuery UI comes with a number of modules such as tabs, sliders, accordions, datepickers etc. But to display these correctly on your website you need to load in the CSS themes for jQuery UI. WordPress does not have these themes by default but you can download them from the jQuery ui website. jQuery UI Instead of downloading these themes you can use these default themes from the Google CDN. Below is the code you will need to load the correct version of the jQuery UI theme, first you load in the jQuery UI by using the wp_enqueue_script(). This value is added to the $wp_scripts object. From here we can get access to the * jquery-ui-core* where we can get the exact version of the library. Once we have the version we can add this to the URL of the Google CDN and use this to load the theme stylesheet that we want.

function load_jquery_ui_google_cdn() {
    global $wp_scripts;
 
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-slider');
 
    // get the jquery ui object
    $queryui = $wp_scripts->query('jquery-ui-core');
 
    // load the jquery ui theme
    $url = "http://ajax.googleapis.com/ajax/libs/jqueryui/".$queryui->ver."/themes/smoothness/jquery-ui.css";
    wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
}
 
add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn');