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

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
        lia href="#tabs-1"Nunc tincidunt/a/li
        lia href="#tabs-2"Proin dolor/a/li
        lia href="#tabs-3"Aenean lacinia/a/li
    /ul
    div id="tabs-1"
        pTab 1 content./p
    /div
    div id="tabs-2"
        pTab 2 content/p
    /div
    div id="tabs-3"
        pTab 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?

Topic jquery-ui Wordpress

Category Web

1
answered at

WordPress has already lot of UI effects. documentation

Step 1. Add the effect to the functions.php file of the theme

function add_theme_scripts() {
    wp_enqueue_script("jquery-ui-tabs");
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Step 2. Add the HTML

<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</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3</p>
  </div>
</div>

Step 3 : Add script to the footer.php

<script>
jQuery(document).ready(function($) {
    $('#tabs').tabs();
})    
</script>
1
answered at

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.

1
answered at

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');
1
answered at

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

1
answered at

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!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.