How do I use jQuery UI tabs in a WordPress page?

by

The short answer is that you need to include a jQuery UI CSS “Theme” with your code. The jQuery UI framework is actually a combination of JavaScript and CSS (and it looks like you’ve only included the JavaScript).

As a quick test, I just applied the “Base” theme to your code here. (Notice on the sidebar, under Manage Resources, there’s a link to a Google hosted jqueryui.css file).

jQuery UI has a lot of pre-built themes you can use. (See the “Gallery” tab). Or you can roll your own! Pretty flexible.

To lengthen my answer a bit… I’ll recommend using Google’s CDN instead of the built-in jQuery files for two reasons.

  1. You’ll get newer versions
  2. It’ll be faster

But your research is correct… You don’t want to simply include the jQuery CDN reference in your header because then WordPress doesn’t know that you already included it! (And you’ll get conflicts with other plugins that require jQuery). A simple solution is to add the following snippet of code in your functions.php file:

// custom script queues
if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false);
    wp_enqueue_script('jquery');
}

This code basically tells WordPress to ignore its own version of jQuery, use the reference you have in here, and then queue it up! (Now if another plugin “requests” jQuery via the WordPress API, it’ll know that it’s already loaded and ready to go).

Personally, I don’t worry about doing this with jQuery UI. I’ve yet to use a plugin that specifically wants to queue it up on its own. So in my header.php I’ve just included it myself, along with a theme that I like: 

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

Good luck with your project!

Leave a Comment