WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have created a widget that has quite a few settings, and so I am trying to create a tabbed menu (using jQuery UI) inside the widget settings of the admin page.

The problem is basically that tabs don't happen (i.e. the a tags just appear on the top and the related divs underneath them).

This is a shortened version of the widget:

add_action( 'admin_enqueue_scripts', 'load_my_admin_js' );

function load_my_admin_js($hook)
$my_plugin_url = trailingslashit( get_bloginfo('wpurl') ).PLUGINDIR.'/'. dirname( plugin_basename(__FILE__) );
if( 'widgets.php' != $hook )
wp_register_script( 'my_adminjs_script', plugins_url( '/adminjs.js', __FILE__ ) ); 
wp_register_script( 'jqui', 'http://code.jquery.com/ui/1.10.0/jquery-ui.js',false,'' ); 
wp_register_style( 'jquistyle', 'http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css',false,'' );    


class my_widget extend WP_Widget {

//front end stuff

//admin page:
function form($instance) {  
 <div id="tabs">
    <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>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis.</p>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringieuismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lt nec, luctus a, lacus.</p>



And this is my js:

jQuery(document).ready(function($)    {

$( "#tabs" ).tabs();


Can anyone see where this is going wrong?

share|improve this question
up vote 1 down vote accepted

Ok, so, for some reason I can't comprehend, the answer is that the div element containing the tabs should have a class and not an id for jQuery UI to work properly, as such:

<div class="mytabs">


jQuery(document).ready(function($) {

Just for the record, the way I enqued the scripts is:

add_action( 'admin_enqueue_scripts', 'load_my_admin_js' );

function load_my_admin_js($hook){
if( 'widgets.php' != $hook )
wp_register_script( 'my_adminjs_script', plugins_url( '/adminjs.js', __FILE__ ), array('jquery','jquery-effects-core','jquery-ui-tabs'));

Perhaps the problem was a combination of the two points above.. Anyway, it now works

share|improve this answer
That's a weird one. At least you got it working! – Khior Mar 1 '13 at 13:50

It looks as though you might be including your js before the jQuery UI library is loaded. To fix the issue, I would make use of the dependencies parameter:

// ...
wp_enqueue_script('my_adminjs_script', false, array('jqui'));
// ...
share|improve this answer
That's a good point, but unfortunately it's still not working.. – DimC Feb 28 '13 at 19:03

I don't have enough reputation to reply to comment on your answer, so I will post it here: I had similar problem, and answer why class selector works (and id don't) is because on widgets page, that element appears twice (on left side to select it and drag to the right), and on the right side, in appropriate sidebar area. So, that element and everything in it is duplicated. Same id should never appear twice on the same page (it is intended to be unique). jQuery was "confused" because it considers id's to be unique, so apparently it didn't selected any element.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.