A Method for adding jQuery UI tabs into WordPress | In In Tutorials | By By Jose Guerra

Over the past couple of years I have seen many methods for adding jQuery UI tabs into WordPress. A simple Google search will result in various methods, some good and some bad. What we are going to do today is look at a live example on how to add jQuery UI tabs correctly into a WordPress Theme.

WordPress and the Enqueue function

Normally when you create jQuery UI tabs for an HTML page, the method is to include your script straight into the header or footer section of your document. Then you can add your custom code into the body and watch your effects take place. In a WordPress theme, you could probably do this; however, doing so could break your website theme. You could unintentionally create a plugin conflict and then you will have to spend some time troubleshooting your code, trying to figure out what went wrong.

According to the WordPress Codex, the best way to include jQuery is to use its wp_enqueue_script function. If you want to include a stylesheet you can also use wp_enqueue_style. Since WordPress already has jQuery built into it, we can simply call it and use it with our custom tab system. Let us begin.

Using jQuery UI tabs

For the purpose of this example we are going to use the jQuery UI tabs sample found at the jQuery UI website. You can create a new post or page and in the post editing area you select HTML view and paste your code. All we need is the basic HTML code for the tabs listed below.

<div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> </div>

We then need to setup our javascript code. The example given at the jQuery UI website is this:

$(function(){ // Tabs $('#tabs').tabs(); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); });

In order to use this code we have to modify the code using the WordPress jQuery no-conflict method. You simply rewrite the code as follows:

jQuery(document).ready(function($) { $('#tabs').tabs(); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); });

Then save this code as your tabs.js file and place it in your theme. Preferably you want to create a folder called js and save your file there.

Now for the fun part, we open the functions.php file and edit it. If you do not have a functions.php file, simply create a blank one and insert the following code.

function my_scripts_method() { if ( !is_admin() ) { wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/tabs.js', array('jquery') ); wp_enqueue_script('jquery-ui-tabs'); } } add_action('wp_enqueue_scripts', 'my_scripts_method');

What we are doing with this piece of code is telling WordPress to put our code into its header. Using the wp_enqueue_script method, we are calling the built in jQuery and jQuery-ui-tabs in order to pull off our tab effect.

Now that we have the bulk of the code setup, all we need to do is add our CSS code. What I have done with this example is downloaded a custom jQuery UI tab stylesheet from the jQuery UI website and added it to the header manually. Again, you could simply add the code into your functions file and call it based on a specific page that may contain your tabs, but to keep this example simple we use the following code in the header of the WordPress theme. You can always modify and create your own CSS code for your tabs.

<link href="<?php bloginfo('template_directory'); ?>/jquery-ui-1.8.23.custom.css" rel="stylesheet" media="screen" type="text/css" />

Now that all the code has been added, you can view your page and your tabs should be working like the demo above.

References used for this tutorial are:

Feel free to share other methods that have worked for you in the comments below.