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 :)