Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to use jQuery UI tabs in my WordPress 3.1.4 pages. I write programming tutorials for a VB .NET audience but like to provide C# source as well, and I want to use the tabs to let the readers switch between the two. I could probably make my own given time, but this was supposed to be a "learn things about jQuery" project. It's turning out to be more of a "WTF WordPress" project. I'm barely functional in JS and trying to correct that. I'm no WP guru, and don't care to learn more than I need to know yet.

I've got a page that is nothing but a copy/paste of the jQuery UI Tabs demo. It doesn't work; the list and all divs are visible and there's no actual tabs. I know this is because I need some CSS, but this is where I got exhausted. I'm not confident having the CSS will make it work anymore, and I don't even know how to tell if it's the CSS, my JS, or my WP that's the problem. Until I started this project my blog "just worked" and that's how I like my not-work things.

The first thing I tried was putting the Google CDN for jQuery in my theme's header.php. I could get alerts working, but no matter what I did the tabs didn't show up. (I know now this is because I apparently needed some CSS. Thanks for not mentioning that jQuery documentation!) So I started doing some reasearch and realized that WP loads jQuery, as do many plugins (though I'm running only Spam Karma and Askimet.) It made sense that maybe loading the Google jQuery caused some confusion. After some research, I found several sites that suggested putting wp_enqueue_script() in my header. The documentation listed a bunch of scripts, so I added "jquery", "jquery-ui-core", and "jquery-ui-tabs". I can see a script tag loading jQuery (version 1.4.4...) in my header, but the other tags seem to have no effect. I understand it's loaded in "no conflict" mode so you use "jQuery()" when you'd normally use "$()". I can get alerts working but not the tabs. Again, I'm suspicious because it doesn't look like my page is trying to load jQuery UI at all. It probably wouldn't matter because I'm not sure if WP comes with the right CSS. I've seen a few pages that suggest I have to load jQuery UI in the page's footer, others that claim I need to add some stuff I don't understand to functions.php, and a couple of other solutions from articles too old to trust. I don't know what to try next.

If I did some work to figure out what CSS I need (thanks again, jQuery "documentation"!) I could get tabs working on a local file. In WP, I'm using the TwentyTen theme; my only modifications have been to add the SyntaxHighlighter scripts (which I'll disable if someone can tell me I'm close enough it should be working and they may be the problem.) I just upgraded to WP 3.1.4 today. Here's the contents of relevant files, you can view source to see what the HTML looks like:

header.php

<?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_enqueue_script("jquery-ui-tabs"); ?>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shCore.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
(... the rest of the default TwentyTen header.php ...)

the linked page

<script>
jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 content.</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3 content</p>
    </div>
</div>

I added the ready() call because I was curious if perhaps the code from the demo wasn't running. I've also tried this variant of the code with no joy:

jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});

What am I missing?

share|improve this question

migrated from stackoverflow.com Jul 5 '11 at 13:02

This question came from our site for professional and enthusiast programmers.

4 Answers 4

up vote 4 down vote accepted

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!

share|improve this answer
    
Yes! This is it! The only thing that took a minute to get right is I had to ensure the <link> and <script> for jQuery UI came after wp_head(); my first attempt tried to load jQuery UI before jQuery. That's suboptimal. Now all I've got to do is settle on some CSS styling; for now I'm happy. Thanks! –  OwenP Jul 4 '11 at 17:35

Yo could use ThePath Tabbed Widget plugin for this: Jquery UI Tabbed Widget Wordpress Plugin

share|improve this answer

Add following in functions-user.php

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_enqueue_script( 'jquery' );

    wp_deregister_script( 'jquery-ui-core' );
    wp_register_script( 'jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js');
    wp_enqueue_script( 'jquery-ui-core' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');


function my_stylesheets_method(){
    wp_register_style('myStyleSheets', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css');
    wp_enqueue_style( 'myStyleSheets');
}
add_action('wp_print_styles', 'my_stylesheets_method');
share|improve this answer

Wordpress.org no longer allows plugins that load external jQuery UI as it is already package with Wordpress. Just a little warning to anyone developing a new plugin.

share|improve this answer
2  
This is not true. Replacing these libraries is still allowed on the frontend. It is just not recommended for good reasons. –  toscho Jul 7 '13 at 17:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.