A Method for adding jQuery UI tabs into WordPress

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.

Jose is a WordPress specialist and front end developer with a passion for writing. Building websites since 1999, he enjoys coding, but mostly Jose enjoys traveling, a bowl of ramen and practicing Tai Chi.

Similar Posts

28 Comments

  2. OK, but can you tell me how to put all comments and comments form in one of the tabs? Thks.

  6. Hi, and thanks for the great, easy-to-follow tutorial – I’ve used it to successfully add tabs to a WordPress site.

    A related problem I hoped you might be able to help with – I’ve got a MediaElement.js player embedded on a certain tab, but it doesn’t render correctly until the window is re-sized, presumably because when the page is loaded that tab is hidden and the player can’t get the correct dimensions.

    I would have used ui-tabs-hide in the css to try drawing non-active tabs off-screen rather than hiding them, but this is now deprecated I think. I wondered if there was anything I could add to the steps above, in the tabs.js file or the css, which will easily solve this? Very grateful for your help.

    1. Did you ever find a solution for this.I have a very similar issue where I am trying to use ME.js in a tab but isn’t rendering correctly due to it not being the first tab.

  7. Hi,

    how can i make the tabs as a site like:

    xxx.com/games/”game-title”/description/
    xxx.com/games/”game-title”/news/
    xxx.com/games/”game-title”/videos/ etc.

  8. Hi Jose,

    How would you modify the jquery script if i wanted to give the divs different names.

    So rather than “tabs-1”, “tabs-2” etc, make it “games”, “puzzles” etc.

    1. Hi and thank you for reading my tutorial. All you have to do is rename each instance of “tabs-1” to “games”. Basically the “href” has to match the “id”. That’s it. Do the same with “tabs-2”, etc.

  9. hi,
    thank you for this article. anything works fine.
    my question: is there any way to separate tabs-links from content? i want to list the links to the tabs in my sidebar and their content placed in the contentarea. so links will be outside of . could you help me?

    thanks and regards
    andré

    1. ooops! code was lost by saving my reply. last sentence: so links will be outside of div with id “tabs”.

    2. Hi Andrej,

      To answer your question, “yes” you can setup your tabs outside of your div. What I will do is write a follow-up article with the code so you can see how it’s done.

      1. great! thank you. could you betray to me this already beforehand? it is very important for me and writing article needs more time. 😉

    1. Hi and yes, of course. My tutorial does not include the CSS code but you can view the source code of the tabs and you will notice that jQuery UI adds some classes that you can modify through CSS. Additionally, you can add your own id or class to each tab and then write CSS to give different colours to your tabs.

      For example you could add to each “list item” a class such as class=”blue” and then write your CSS to give it that colour.

  11. Somehow it seems my previous comment wasn’t submitted, so if this one is duplicate, I am sorry.

    I finally found the cause: Google Analytics for WordPress plugin! Somehow,i forgot to disable that plugin… In fact I don’t use plugins for that kind of easy jobs, but I think I was lazy when I upload this plugin 🙂

    Anyway, I hope this helps someone who get the same error…

    Thank you again, Jose!

  13. Hi again,

    now code is working, thank you!

    But I have a weird problem:

    I am using jquery tabs in many pages of my blog. But if you pass a parameter by querystring, tabs() gets called by twice. And bam! all page design becomes crap.
    I mean:

    Check these two address:

    http://cycling-passion.com/2012/12/22/cycling-related-gift-ideas/
    http://cycling-passion.com/2012/12/22/cycling-related-gift-ideas?a=1

    the second one does not work. tabs() gets called twice.

    This is important, because google indexing my pages via rss sometimes, and adding parameters like “?utm-source=rss… bla bla

    And this is causing the problem i mentioned above.
    Do you know why this happens, and how can i resolve this?

    Thank you

    1. I have no idea what could be causing the problem there. All I can say is to try some basic troubleshooting. If you are using some plugins, disable them one at a time and see if any one may be contributing to the issue.

  14. Hi, Jose,

    Thanks for the article. I am using a child theme, and I cannot get the code work. I am adding the code in the functions.php file under my child theme, but it does not work.

    I see you’re mentioning about a “slight difference” above, what is it? Can you help me?

    thank you

    1. Hi and thank you for reading my article. I should have specified that the above code was meant for a parent theme; however, for a child theme you’ll need to make the following changes:

      In your functions file, change the following:
      get_template_directory_uri()
      to
      get_stylesheet_directory_uri()

      And then the next thing you’ll need to do is change the reference to the stylesheet. Change the following:
      template_directory
      to
      stylesheet_directory

      This should help.

      1. Hi, again

        For anyone who may have the same problem with me; I finally found the problem. The Google Analytics for WordPress plugin caused the problem. Somehow, I forgot to disable that plugin while disabling all plugins…

        Thank you again, Jose!

  15. Thank you for your post Jose, it´s very clear.
    I followed all the indicated steps and I didn´t get it works. May be because of the my wordpress´ version? I updated to 3.5.
    and I can´t find pluggin for insert tabs on my pages.

    1. Hi and thank you for reading my post. I am using version 3.5 and it looks like it is still working without any issues.

      My question is, are you trying to make this work for a parent theme or for a child theme? If you are trying to add this code to a child theme you will need to make a slight modification to the code. Feel free to let me know how you are trying to implement the above code.

Comments are closed.