Good Solution for Adding jQuery Tabs Anywhere Within WordPress?

Question

Is there any solution for using jQuery tabs within the native WordPress scripts? If you know of a way to get any method of jQuery tabs working on the frontend and the backend please share your solution.

I have tried implementing jQuery Tabs (example source available at link)

Dependencies:

1. UI Core
2. Widget Factory
3. Effects Core (optional; for use with the show and hide options)

Additional Notes:

This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

I have also tried implementing Organic Tabs (demo) (source)

I tried enqueuing all native WordPress scripts for these, and couldn't get the tabs to function.

Using the first option (jQuery and Jquery UI) with native WordPress scripts didn't work. When I used the latest version of jQeury instead of native WordPress jQuery, they worked, but then the rest of the admin interface was broken.

And glancing at the Organic Tabs source, it looks as if that code was last tested to work with jQuery version: 1.7.1.

As a side note, it seems like native WordPress jQuery version is: 1.8.3

Here are the styles being added for jQuery and jQuery UI tabs.

$to_add['jquery-ui'] = 'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css';
$to_add['tabs'] = './css/global/tabs.css';// path to custom tab styles.

Here are the scripts being added for jQuery and jQuery UI tabs.

$to_add['jquery'] = includes_url('/js/jquery/jquery.js');
$to_add['jquery-ui-core'] = includes_url('/js/jquery/ui/jquery.ui.core.min.js');
$to_add['jquery-ui-widget'] = includes_url('/js/jquery/ui/jquery.ui.widget.min.js');
$to_add['jquery-effects-core'] = includes_url('/js/jquery/ui/jquery.ui.effect.min.js');
$to_add['jquery-ui-tabs'] = includes_url('/js/jquery/ui/jquery.ui.tabs.min.js');

Of course, fired on admin_enqueue_scripts using wp_enqueue_style() and wp_enqueue_script()

Using their same HTML markup from the example just changing the tabs container ID to a class instead.

<script>
$(function(){
    $(".tabs_container").tabs();
});
</script>

Setting jQuery Script to:

$to_add['jquery'] = 'http://code.jquery.com/jquery-latest.js';

Makes the tabs work, but all other areas of the dashboard page break.

Dashboard page I'm referring to is: post edit screen for any post type. Trying to add jQeury tabs to a metabox.

It looks like WordPress is loading the following scripts on the post edit screen:

1. jquery,
2. utils,
3. plupload,
4. plupload-html5,
5. plupload-flash,
6. plupload-silverlight,
7. plupload-html4,
8. json2

Answer 1

jQuery UI Tabs are actually shipped with WordPress core, so implementing them is quite easy. It sounds like you're only trying to utilize the tabs on the admin side, so a very basic setup would look something like:

In functions.php:

function my_enqueue_scripts($hook) {
     // Only load the scripts on the pages where they're needed
     if( 'myfile.php' != $hook )
          return;

     wp_register_style( 'tabs_css', 'path/to/tabs.css' );
     wp_enqueue_style( 'tabs_css' );

     wp_enqueue_script("jquery-ui-tabs");
     wp_enqueue_script( 'admin_scripts', 'path/to/admin-script.js', array('jquery', 'jquery-ui-tabs') );
     // No need to enqueue jQuery as it's already included in the WordPress admin by default
}
add_action( 'admin_enqueue_scripts', 'my_enqueue_scripts' );

In admin-script.js:

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

And then use the same HTML markup from the example. If you had it working with the alternate version of jQuery, it sounds like you've got that part right.

Answer 2

Okay, the answer was actually quite simple.

Enqueuing Styles

You need to enqueue the jquery-ui base CSS file for proper functionality. Then enqueue your custom tab styles immediately after.

Example:

$styles['jquery-ui'] = 'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css';
$styles['tabs'] = './css/global/tabs.css';// path to custom tab styles.

Enqueuing Scripts

You must not include jQuery, as for the admin section already loads jQuery. I put the call to the tabs in a separate JS file, and enqueued it in the header very last.

So this:

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

Moved into a tabs.js file within my plugin directory.

Example of needed scripts:

$scripts['jquery-ui-core'] = includes_url('/js/jquery/ui/jquery.ui.core.min.js');
$scripts['jquery-ui-widget'] = includes_url('/js/jquery/ui/jquery.ui.widget.min.js');
$scripts['jquery-effects-core'] = includes_url('/js/jquery/ui/jquery.ui.effect.min.js');
$scripts['jquery-ui-tabs'] = includes_url('/js/jquery/ui/jquery.ui.tabs.min.js');
$scripts['tabs'] = './js/global/tabs.js';

Ta-daa. There you have it. jQuery tabs in the dashboard.

EDIT 06/29/2013 If you are organized with your admin scripts for example. You probably use the hooks admin_print_scripts and admin_enqueue_scripts. I figured, if I made a call to admin_enqueue_scripts before calling admin_print_scripts that the important scripts would be enqueued before any of the other scripts were printed. I was wrong. I spent a good 45 minutes trying to figure out what the issue was. Long story short, even though I thought my scripts would be enqueued before the rest of the scripts would be printed, that was wrong.

How did I fix it?

Set a super low priority for your admin_print_scripts hook. I set mine to "999". That ensure that my required scripts like jQuery UI core and the Widget factory were included BEFORE my scripts which used those. For example... Tabs. If I didn't do this, then my tab scripts were being printed before the necessary dependencies were even loaded. Hence, the reason they weren't working properly all the time.

Answer 3

I Simply follow the step from

http://www.thecreativedev.com/how-to-use-jquery-ui-tabs-in-a-wordpress/

Simply add below code in function.php

function load_custom_scripts() {
    wp_enqueue_script('jquery-ui-core');// enqueue jQuery UI Core
    wp_enqueue_script('jquery-ui-tabs');// enqueue jQuery UI Tabs
}

add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );

Then add the add below js in js file.

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

Finally we need to have html as below.

<div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>First Tab</span></a></li>
        <li><a href="#tab-2"><span>Second Tab</span></a></li>
        <li><a href="#tab-3"><span>Third Tab</span></a></li>
    </ul>
    <div id="tab-1">
      <p> your first tab content goes here  
    </div>
    <div id="tab-2">
        <p> your second tab content goes here  
    </div>
    <div id="tab-3">
       <p> your third tab content goes here  
    </div>
</div>