Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

http://pastebin.com/fe4wdBcp

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.

share|improve this question

closed as too localized by EAMann May 15 '12 at 22:34

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

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
add comment

1 Answer 1

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; ?>">
    <ul>
        <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>
    </ul>
    <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>
    <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>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#tabs-<?php echo $this->id; ?>").tabs();
    });
</script>
...

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.

share|improve this answer
    
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()... –  onetrickpony 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... –  onetrickpony Jan 2 '12 at 12:47
add comment

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