Load a nice jQuery UI theme in WordPress

WordPress now comes with a reasonably complete copy of jQuery UI, which you can easily incorporate into your themes and plugins using wp_enqueue_script. But it doesn’t come with any jQuery UI themes, leaving you to supply your own. Here’s how to make use of the standard themes easily.

WordPress lets you load jQuery UI in your pages simply by calling wp_enqueue_script with the appropriate handle. It doesn’t bundle any of the CSS themes, but they are readily available to download, or you can write a custom theme. If I’m not writing a custom theme, I’d prefer to make use of one of the well-supported CDNs for jQuery UI. In this post, I’ll be using the Google CDN.

As at version 3.3.1, the bundled version of jQuery UI is 1.8.16, which is a couple of revisions behind the head at the time of writing this post. I’m a bit of a stickler for configuration management, so I’d prefer to load a theme revision that matches what WordPress is bundling. Luckily, it’s easy enough to ask WordPress what revision it’s bundling by querying the $wp_scripts global object.

Armed with the revision number, we can select our theme and load it up. I’ll use the example of a custom theme here, and enqueue the scripts and styles after WordPress has finished setting up the theme.

Edit: changed URL for loading all CSS as a single file

function load_jquery_ui() {
    global $wp_scripts;

    // tell WordPress to load jQuery UI tabs
    wp_enqueue_script('jquery-ui-tabs');

    // get registered script object for jquery-ui
    $ui = $wp_scripts->query('jquery-ui-core');

    // tell WordPress to load the Smoothness theme from Google CDN
    $protocol = is_ssl() ? 'https' : 'http';
    $url = "$protocol://ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.min.css";
    wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
}

add_action('init', 'load_jquery_ui');

Job is done, right pretty :)

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
  • OSweet

    Thanks dude, this helped me… I was befuddled there about how to get the theme in. This works!

    • http://snippets.webaware.com.au/ rmckay

      Excellent, glad it helped. Note that in the example above I simplified it by loading just jquery.ui.all.css, which in turn loads everything. If you don’t need everything, you can register individual stylesheets and load them.

      For example, here’s how to load just the stylesheets for tabs:


      global $wp_scripts;
      $ui = $wp_scripts->query('jquery-ui-core');
      if ($ui) {
      $uiBase = "https://ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/base";
      wp_register_style('jquery-ui-core', "$uiBase/jquery.ui.core.css", FALSE, $ui->ver);
      wp_register_style('jquery-ui-theme', "$uiBase/jquery.ui.theme.css", FALSE, $ui->ver);
      wp_register_style('jquery-ui-tabs', "$uiBase/jquery.ui.tabs.css", array('jquery-ui-core','jquery-ui-theme'), $ui->ver);
      }
      ...
      wp_enqueue_style('jquery-ui-tabs');

  • http://xmaz.ru neil

    thanx!

  • http://pagesofinterest.net/ Michael Robinson

    Thanks for sharing this, the Codex glosses over a lot of more specific things like this.

  • Ernest Burnett

    Ah, at long last…

    Thank you so much – I have been searching for 2 days (literally full days) and I was getting very tired of the don’t use CDN garbage – when I was hoping the plug authors would be able to refer to exactly this. Please press WP.org to sticky this in the codex. Now, depending on how quickly you can answer (to speed things along) what about admin? (Specifically, if you can include info on accordion and hoverIntent – WP includes but codex doesn’t mention it’s proper usage with the native build)

    • http://snippets.webaware.com.au/ Ross McKay

      G’day Ernest,

      For accordion, just enqueue with the handle ‘jquery-ui-accordion’ and then make sure that you have CSS to support it — either custom, or by loading a jQuery UI theme as described above in the post. You can then just add your own script, as per the jQuery UI doco.

      NB: if you want to load jQuery and jQuery UI from a CDN, just install/activate the Use Google Libraries plugin. It does the same thing with the script files as I do with the CSS above, so it’s the safest way to load jQuery from a CDN.

      Hoverintent I’ve never used, so I can’t comment on it.

      cheers,
      Ross

      • Ernest Burnett

        Thanks for the links, Ross! Yes, I currently have the UI and css enqueued and hooked – oddly once I take the UI out – it goes out of wank – I have the code in a wrapper so I’m assuming I should be ok but for some reason the accordion just doesn’t want to work without the CDN, I’m under the impression that the the native core in WP is missing some things that I need – I see hoverintent (although it’s not listed in the codex) in the included WP files, I haven’t taken a strong look at the effects core – I don’t see any reason why this should affect but the reason I’m thinking of taking a look at the script is I have noticed one admin accordion plugin script that uses all native jquery, then includes one custom script called “easing.js” – I’m more sure that I probably am missing some typos, which unfortunately I can’t look back at because I scrapped the code to get a fresh start.

  • Pingback: Working with jQuery | (Re)Learning Wordpress Development()

  • wyrmmage

    You can also use the universal resource locator: //

    instead of querying to see if the site is on https:// or http:// :)

    I combined that with a variable for switching out themes by name and got this:

    global $wp_scripts;

    // tell WordPress to load jQuery UI tabs
    wp_enqueue_script(‘jquery-ui-tabs’);

    // get registered script object for jquery-ui
    $ui = $wp_scripts->query(‘jquery-ui-core’);

    $theme_name = ‘pepper-grinder';

    // tell WordPress to load the Smoothness theme from Google CDN
    $url = ‘//ajax.googleapis.com/ajax/libs/jqueryui/’ . urlencode($ui->ver) . ‘/themes/’ . urlencode($theme_name) . ‘/jquery-ui.min.css';

    wp_enqueue_style(‘jquery-ui-‘ . $theme_name, $url, false, null);