WordPress

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');
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *