Update: I should point out that I tested the method below on Plugin/theme options page and it worked perfectly. In-fact I was also able to include the jQuery cookie Plugin to preserve the current tab selection between page loads (nice!).

Been trying to add tabs to an admin widget to reduce the form footprint when you have multiple widget options. I am using the jQuery UI tabs included with WordPress. Here's what I have so far coded into a Plugin.


When the widget is dragged into a widget area the tabs seem to render OK but you can't click to view the second tab. Worse still if you refresh the widgets page the formatting of the tabs is completely lost, and the tabs still don't respond to click events.

Not sure what the problem is here. Any help appreciated.

  • 1
    Your pastebin code is no longer accessible. Please update your question or this will be of no help to future users. It will remain closed until it's been updated.
    – EAMann
    May 15 '12 at 22:34

The problem is that you're not using unique IDs (#tabs, #tabs-1 ...), because widgets have multiple instances (the same IDs are used by the instance form the "Available Widgets" area).

So just prepend or append the widget instance ID to your identifiers to make them unique:

<div id="tabs-<?php echo $this->id; ?>">
        <li><a href="#tabs-<?php echo $this->id; ?>-1">Tab One</a></li>
        <li><a href="#tabs-<?php echo $this->id; ?>-2">Tab Two</a></li>
    <div id="tabs-<?php echo $this->id; ?>-1">
        <p><?php _e('Textbox 1') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text1'); ?>" type="text" value="<?php echo esc_attr($text1); ?>" /></p>
        <p><?php _e('Textarea 1') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea1'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea1); ?></textarea></p>
    <div id="tabs-<?php echo $this->id; ?>-2">
        <p><?php _e('Textbox 2') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text2'); ?>" type="text" value="<?php echo esc_attr($text2); ?>" /></p>
        <p><?php _e('Textarea 2') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea2'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea2); ?></textarea></p>

<script type="text/javascript">
        $("#tabs-<?php echo $this->id; ?>").tabs();

Also, not sure if WP 3.3 fixed this issue, but after the first drag inside the sidebar, the widget-save action needs to be manually triggered for the id property to become available inside the form() function.

  • 1
    Yes, forgot that you need to account for multiple instances of the same widget, duh! I am using $this->id but it only works, as you point out, once the widget has been saved manually. In WP 3.3 the situation (I think?) has been improved slightly as the widget instance id number seems to be there as soon as you drag in a new widget (when inspected with firebug), but it is not available via $this->id.
    – dgwyer
    Dec 19 '11 at 2:17
  • What about $this->widget_id ? Do a var_dump on $this and look for a property that holds a identifier like "widget-bla-bla-32". You can also generate a random one with uniqid()... Dec 19 '11 at 2:35
  • Doing a var dump on the whole object the $this->widget_id variable doesn't appear to exist. Using uniqid() is an interesting idea but also doesn't work; the tabs are still not initialized until you manually save the widget. What I really don't get though is that if you examine the admin ajax requests, there IS a 'save widget' ajax function that executes when you first drag in the widget. BUT, it is only when you manually click to save the widget, and this 'save widget' function fires again, that it works properly! Weird.
    – dgwyer
    Dec 19 '11 at 9:46
  • posted a better fix to that bug here if you're interested... Jan 2 '12 at 12:47

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