Good Solution for Adding jQuery Tabs Anywhere Within WordPress?

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.

Related Posts: