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 ...)
<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?
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.
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:
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:
Good luck with your project!
WordPress has already lot of UI effects. documentation
Step 1. Add the effect to the
functions.php
file of the themeStep 2. Add the HTML
Step 3 : Add script to the
footer.php
Yo could use ThePath Tabbed Widget plugin for this: Jquery UI Tabbed Widget WordPress Plugin
Add following in functions-user.php
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.