Tabbed Widgets Plugin for WordPress

With Tabbed Widgets plugin one can easily create tab and accordion type blocks of content without writing a single line of code. Simply select the widgets you want to appear as tabs, specify their tab titles and a new tabbed widget is created automatically which you can then place in any of the widgetized areas.

Download & Compatibility

Get Tabbed Widgets plugin at this section of the official WordPress plugin repository. Compatible with WordPress 3.0.x and 3.1.

Installation & Configuration

Please follow the usual plugin installation procedure:

  1. Download the plugin and unzip its content.
  2. Upload the tabbed-widgets directory to /wp-content/plugins/ directory. The final directory tree should look like /wp-content/plugins/tabbed-widgets/tabbed-widgets.php.
  3. Activate the plugin at the Plugin Management section under the ‘Plugins’ menu.
  4. To create and configure tabbed widget go to ‘Design’ > ‘Widgets’.

Theme Requirements

Please make sure that your theme follows the best practices of WordPress themes and adds unique indentifiers for each of the widgets. This is done inside the theme’s functions.php file. Every before_widget value should contain %1$s inside id attribute and %2$s inside class attribute. Please read my comment on why this is necessary.

Comments & Feedback

If you encounter any bugs, please leave a comment with a link to your site where the problem is visible.

161 Comments

  1. i’m liking how this plugin is setup however it’s not displaying right on either accordion or tab setup.

    the contents of each tab are displayed rather than actually being “tabbed”.

    you can see what i mean at http://www.homestomper.com

    any help is appreciated.

  2. Kaspars says:

    Mark, I am now looking at it. At the first glance it seems to be related with those other 15+ javascript files/scripts.

    Update: Mark, could you please email your theme’s functions.php file to kaspars@konstruktors.com — it seems that your theme doesn’t apply the necessary CSS identifiers that wrap each widget.

    I am interested in the following following part of functions.php:

    register_sidebar(array(
      'name'=>'one',
      'before_widget' => '<li id="%1$s" class="widget %2$s">',
      'after_widget' => '</li>',
      'before_title' => '<h2 class="widgettitle">',
      'after_title' => '</h2>'
    ));
    
  3. Kaspars says:

    Mark, turns out that your theme is the guilty one.

    In order to have configurable tabbed widgets, theme must specify unique identifiers for each of the widgets. This is done using the register_sidebar function inside theme’s functions.php file. Without these unique identifiers, there is no way to determine which of the widgets should have tabs and which are set to classical tabbed interface or accordion type interface.

    Therefore, I suggest you edit the register_sidebar(...) portion of theme’s functions.php to include the following:

    id="%1$s" and class="%2$s" inside the before_widget value, like this: 'before_widget' => '<div id="%1$s" class="%2$s widget or-any-other-class">'.

    If you are using <div id=... for 'before_widget' then don’t forget to change 'after_widget' to 'after_widget' => '</div>'

    This way WordPress will replace %1$s and %2$s with unique indentifiers for each of the widgets.

    Let me know, if this solves the problem.

    p.s. Here is what Automattic said about Widgetizing Themes.

  4. aha! that did it – works like a champ, now.

    btw, very prompt and excellent reply – much thanks!

  5. Kaspars says:

    I am happy to hear that, Mark. Great to see the first real-life example. I have now updated the post to include theme requirements so that people can immediately check if their theme is compatible.

  6. thanks kaspars.

    i may have responded a bit pre-maturely. the accordian style works correctly now, it’s the horizontal tabs that continue to display all the content.

    here’s what i added to my functions.php:

    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,

  7. code got munched up in previous reply.

    what i added was: id=”%1$s” class=”%2$s” to the before_widget

  8. Kaspars says:

    Mark, can you please give me a URL where the horizontal widgets are used?

    Also, make sure you have something like

    'before_widget' => '<div id="%1$s" class="widget %2$s">'

    not

    'before_widget' => 'id="%1$s" class="widget %2$s"'

  9. Kaspars says:

    OK, now I see it.

  10. Kaspars, i did add the correct code. now, the functions.php is set up to handle 3 widgets… can %1$s and %2$s be repeated in each one? or does it need to be different, like %3$s, %4$s etc?

    i just activated the tabs for you to see.

  11. Kaspars says:

    Mark, thank you for discovering the first bug — it was my fault this time. I had misspelled the variable which is used for determining the version of WordPress and therefore the necessary JavaScript files.

    I have updated the plugin and you should soon see the automatic update notice in the plugin list.

    However, if you want to try correct it faster (sometimes it take more than 20 minutes to get updated on WordPress Extend), go to line 64 in tabbed-widgets.php and change $add_tabs to $add_tabs_js.

  12. Timmy says:

    Hi There,

    I couldn’t get it working. Can you have a look at the code below:

    ‘left-bar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    )
    );
    register_sidebar
    ( array
    (
    ‘name’ => ‘right-bar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    )
    );

    }
    ?>

  13. Timmy says:

    I have two sidebars.

    ‘before_widget’ => ”,

    ‘before_widget’ => ”,

    how do i edit this?

  14. Kaspars says:

    Timmy, please use the convert to HTML entities link above the commment box to encode HTML.

  15. Timmy says:

    <?php
    if ( function_exists(‘register_sidebar’) )
    {
    register_sidebar
    ( array
    (
    ‘name’ => ‘left-bar’,
    ‘before_widget’ => ‘<div id="leftwidget" class="box">’,
    ‘after_widget’ => ‘</ul></div>’,
    ‘before_title’ => ‘<h3>’,
    ‘after_title’ => ‘</h3><ul class="link-list">’,
    )
    );
    register_sidebar
    ( array
    (
    ‘name’ => ‘right-bar’,
    ‘before_widget’ => ‘<div id="recent" class="box">’,
    ‘after_widget’ => ‘</ul></div><br />’,
    ‘before_title’ => ‘<h3>’,
    ‘after_title’ => ‘</h3><ul class="link-list">’,
    )
    );

    }
    ?>

  16. Kaspars says:

    Timmy, add id="%1$s" and class="%2$s" inside the value of before_widget, like this:

    <?php
    if (function_exists('register_sidebar')) {
    
      register_sidebar(array(
        'name' => 'left-bar',
        'before_widget' => '<div id="%1$s" class="%2$s box">',
        'after_widget' => '</ul></div>',
        'before_title' => '<h3>',
        'after_title' => '</h3><ul class="link-list">',
      ));
    
      register_sidebar(array(
        'name' => 'right-bar',
        'before_widget' => '<div id="%1$s" class="%2$s box">',
        'after_widget' => '</ul></div><br />',
        'before_title' => '<h3>',
        'after_title' => '</h3><ul class="link-list">',
      ));
    
    }
    ?>
    

    Notice the %1$s which is added to id and %2$s to class.

    Please read through the Theme Requirements section of this article again, and make sure you understand why this is required.

    I hope this solves the problem.

  17. Timmy says:

    Many Thanks. It works.

  18. Timmy says:

    I have one issue though. It won’t let me use more than 1 tabs. If I enabled two tabs, one on the left and one on the right, or even two tabs on each side, It won’t work.

  19. Kaspars says:

    Timmy, please give me the URL where the problem can be seen.

  20. Timmy says:

    The URL is:

    http://timmywong.com

    It will only work if I use 1 tab. It won’t work if i use two tabs, left and right

  21. Kaspars says:

    Timmy, I just looked at your website and it seems to work OK now.

  22. Timmy Wong says:

    I’m afraid not.

    As you see, I can’t expand or or un-expand the tabs on both sides.

  23. Timmy Wong says:

    Hey man,

    I think it works on Opera Browser but not on Firefox 3.0

  24. Kaspars says:

    Timmy, I just sent you an email with a video attached showing that it works in Firefox 3.

  25. Timmy Wong says:

    You are right. I needed to clear the cache. Accordion style seems to work now after clearing the cache. However I still can’t get the tab style to work. Can you check my site?

  26. Kaspars says:

    I sent you an email with all the reasons why things might not work on your blog (theme, validation errors). You may try to switch to the default theme just to see if it has something to do with the theme.

  27. Kaspars, i finally got around to upgrading the plugin. oddly, the accordion style doesn’t work anymore and i’m still having same probs with the tabbed style.

  28. Kaspars says:

    Mark, please clear your browser’s cache and it should work (it does for me). Can you add a horizontal tab widget somewhere just to see if it works?

  29. Kaspars, my bad kaspars. thought i had done that. horizontal tab is now activated but still the issue of all content being displayed.

  30. Kaspars says:

    Mark, my bad this time. There was still one bug left. I have updated the code and you should soon see 0.14 for an update.

  31. Kaspars, that did it :) very cool plugin. and i appreciate your support. thanks kaspars.

  32. Chris Jones says:

    Hi. This is a really excellent and useful plugin that works well. However there is one issue that you might be able to help me with.
    When I set the widget as ‘tabs’ the content appears with an extra bullet point which I don’t need. This doesn’t happen with the accordion setting.
    Also which css or js file do I edit to make the font size of the content (not the title) smaller?

  33. Kaspars says:

    Chris, Could you please set it to “tabs” on your site and let me know when you do that. Secondly, please post the register_sidebar part of functions.php file of your theme (like Timmy did above).

  34. Kaspars says:

    Answer to your second questions (about content font size) depends on your widget HTML wrappers and CSS selectors, so I need to see the register_sidebar code you are using.

  35. Kaspars says:

    This is the CSS you have to add to the end of style.css of your theme in order to change the font size of the content inside tabbed widgets:

    ul.sidebar_list li.tw-tabbed-widgets li.widget { font-size:0.9em; }

    To remove the extra bullet, try adding this:

    ul.sidebar_list li.tw-tabbed-widgets { list-style-type:none; }

  36. unblogger says:

    Hi, I wanted to change the style, and most of it changed.
    I couldn’t find where to change the unselected tab color.

  37. Kaspars says:

    unblogger, try adding style for the following CSS selectors:

    ul.tw-nav-list li { }
    ul.tw-nav-list a { }
    
  38. unblogger says:

    I modified, and it was the same; the style sheet looks like this: http://tinyurl.com/6qspn6

  39. Kaspars says:

    unblogger, please do not edit uitabs.css stylesheet directly because you will loose all the changes after the next upgrade. Place all the custom CSS at the end of style.css of your theme.

    Secondly, your theme uses the huge #sidebar list for widgets, so the CSS has to be:

    #sidebar ul.tw-nav-list a { background:#333; }
    

    If you want to customize the theme to your liking, please take the time to familiarize yourself with the themes HTML structure. A good starting point would be installing the Firebug extension for Firefox. It is the ultimate tool for viewing website source code and seeing which CSS rules are applied to which HTML elements.

  40. unblogger says:

    Ok, lots of thanks, I will :).
    I’m not verry good at html, hope I’ll learn this summer.
    I forgot to thank you for the great plugin.
    Cheers!

  41. Kim says:

    Hey Kaspars! Couldn’t find any on this when scrolling quickly through previous comments, but is there currently some way to do individual settings for the widgets contained (e.g. text widget, flickr etc.)?

  42. Kaspars says:

    Kim, sure — configure them the way you want under ‘Design’ > ‘Widgets’ and then use that widget inside a tabbed container.

    I have created an “invisible” sidebar area, where I place those widgets that I want to configure and then use for tabbed widgets. This is only needed because WordPress deletes all the settings for a widget if it is not used in a sidebar.

    To add a new invisible sidebar, simply append this to your functions.php file:

    register_sidebar(array(
      'name' => 'Invisible Sidebar',
      'before_widget' => '<div id="%1$s" class="widget %2$s">',
      'after_widget' => '</div>',
      'before_title' => '<h4 class="widget-title">',
      'after_title' => '</h4>'
    ));
    
  43. Kim says:

    Ah of course! Thanks for support and for useful plugins.

  44. Chris Jones says:

    Kaspars,

    This hack did the trick- thanks a bunch!. A great plugin.

  45. Micah Mathis says:

    Hi Kaspars

    I am so excited to have found this plugin. It is exactly what I have been looking for. I am having one problem getting it to work on my site.

    I am using the accordian option, but it will not seem to collaspe.

    I updated my functions.php file like you instructed. You can see the actual code below:

    <?php
    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘sidebar’,
    ‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<div class="sidebar">’,
    ‘after_title’ => ‘</div>’,
    ));
    ?>

    Any ideas? You can view my site at http://www.relevantserver.com/micahblog/

    Thanks.

  46. Kaspars says:

    Micah, I had a look at your site but couldn’t find a problem. One of the reasons I can think of is Javascript libraries and scripts that other plugins use. Could you please try and disable most of the plugins leaving tabbed widgets enabled?

    In the header I can see these two: lightbox_gallery and wp-email. Don’t forget to clear you cache and refresh the page when you have disabled those plugins.

  47. Micah Mathis says:

    Kaspars,

    It is the Lightbox Gallery plugin that is conflicting. When I deactivate it yours works correctly.

    Any ideas as to why these two plugins are conflicting? Is there a possible work around so I can use both?

    Thanks for the quick response.

  48. threio says:

    I have no problems getting the widget to work, however, I am lost how to use text widgets. The ones in my side bar don’t show in the drop down menu and I cant seem to edit if I add a text from the drop down. What am I not doing correctly here.

  49. threio says:

    threio, Sorry for the dbl post; here is my functions.php, I tried and screwed up the edit and locked myself out lol

    [Deleted code fragment which was incorrectly encoded]

  50. Kaspars says:

    Micah, did you manage to get them both working? If not, you should probably contact the developer of the other plugin or ask help in the official WordPress support forum.

    threio, it looks like there is a bug in the plugin. I’ll look into into it and post an update, so you’ll get a notification in the plugin management area when its ready.

  51. ovidiu says:

    having a hard time getting this plugin to work.
    for a start here is my functions.php

    [Deleted the code fragment because it was not properly encoded]

    the file has been modified to include the needed id=”%1$s” and class=”widget %2$s” otherwise I didn’t change anything.

    I would enable this plugin so you can see what goes wrong, but it breaks the whole page, so if I know you’l be online later, I could enable it now.

  52. ovidiu says:

    can you give me a hint how to properly post the code here in the comment form? The guy with this comment: https://kaspars.net/blog/wordpress/322-tabbed-widgets-plugin-for-wordpress/#comment-7462 somehow managed to post it here, I don’t want to waste your comments with other tries :-(

  53. Kaspars says:

    ovidiu, please read the formatting tips just above the comment input field.

  54. ovidiu says:

    ok, do you have any advice now for me? sorry can’t read emails until afternoon, so if there is any advice you can give me, you could just post it into the shoutbox on my site :-)

  55. Jacob says:

    Hi,

    I love this plugin. I am having a problem. I am trying to use it with the “Option” wordpress theme and it does not work properly. It has tabs, but they do not hide the info. It just shows all the info with titles. Can you help me with this problem. I am switching out my site to that theme, so it is not up yet, but I would love to make this awesome plugin work with the “Option” theme. Thanks.

    Jacob

  56. Joshua says:

    Hi,

    First of all, thanks for a very useful plugin! I’m trying to get it to work with the Thematic theme, but I am running into the same problem that Jacob describes in the previous comment–the tabs appear, but everything is displayed.

    You can see an example here. I turned off all other plugins on this site to eliminate the possibility of a conflict with another plugin.

    Many thanks,

    Joshua

  57. Kaspars says:

    Jacob, it looks like you got it working (or it not the Options theme?). If yes, then it would be great if you shared the solution, as other people might find it useful. Thank you.

  58. Marthin says:

    in accordion-mode it works great, but in tabed-mode the link becomes “http://example.com/#tabbed-widget-1-1”; and when clicking it does not change just moves the scrollbar to bottom of page.

    Did i miss something here? :S

  59. Kaspars says:

    Joshua, and others trying to use Thematic based themes — turns out that they are not built according to WordPress theme best practices and do not take advantage of unique CSS identifiers that are provided by every widget and plugin.

    To fix this, go to thematic/library/functions directory and open widgets.php and change every instance of:

    'before_widget' => "<li class=\"widgetcontainer\">",

    into:

    'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',

    and enjoy the tabbed widgets. (Don’t forget to clear the cache!)

  60. Kaspars says:

    Marthin, could you please be more specific and give the URL, theme, the relevant functions.php part? Also, did you read the theme requirements section of the post?

  61. Jacob says:

    Kaspars,
    No, it is working for my old theme, but not my new one which is the “Option (http://justintadlock.com/archives/2008/02/24/options-wordpress-theme)” Theme. This theme is a great newspaper/magazine style theme that has a done of customization. Anyways, it does not work as it should. Can you please help. Thanks.

    Jacob

  62. Kaspars says:

    Jacob, as you said — the problem is clearly caused by the Options theme, not this plugin. I suggest you ask for help in their support forum.

  63. Jacob says:

    Kaspars, That is just what I was going to do. Thanks for the suggestion.

    Jacob

  64. Kaspars says:

    Jacob and other Option theme fans — this is what you have to do: open app/widgets.php (in options theme folder) and change:

    'before_widget' => '<div class="menu">',

    into this:

    'before_widget' => '<div id="%1$s" class="menu %2$s">',

  65. ovidiu says:

    I am slowly getting this widget to work, still need some help.
    My first try was with a weather widget, trying to get forecasts for 3 towns into this tabbed widget of yours.
    Works fine but the widget looks different on the homepage http://pacura.ru (here it looks good) than on any other page :-( the tabs look weird and although its set to rotate through tabs with 10 sec. interval that does not happen :-(

  66. ovidiu says:

    ok, the rotate works, but the widget tabs overlap the widget title on any other page than the homepage.

  67. ovidiu says:

    regarding your plugin and php speedy, in speedy’s configuration, you can decide to let speedy handle several js libraries, which ones do you recommend to check there?

    also I would like to know if somebody can help change the css for the tabbed widgets so that if I use a tabbed widget, its tabs expand to fill the whole width that is accorded to the sidebar. Example http://pacura.ru look for the weather widget, those 3 tabs don’t fill the whole sidebar width.

  68. Kaspars says:

    ovidiu, Tabbed Widgets require only jquery and jquery-ui-tabs in PHP Speedy.

    Regarding the positioning and design issues, I suggest you learn the basic CSS (and HTML) or hire someone to do it for you. There are many tutorials out there that will teach you how to float elements, change their color, size, margins and padding.

  69. Peter says:

    Great stuff!
    *bows*

    It took a moment to figure out how to configure functions.php, but the comments/replies here helped me out.

    Perhaps an idea would be to add some functionality to make split-testing widgets easier. Don’t know how that would work but, perhaps an idea will pop up. For example, I want to test several opt-in forms (placed in widgets) to see which one works best.

    Anyway, many thanks for this superb plugin!

  70. Paul says:

    Hi, guys… I am sorry, but can you tell me what am I missing?
    I am installed Plugin.
    I have enabled widgets within my theme.
    Simple-tags widget is working fine.
    Now, I am trying to add this plugin.
    my function.php file was

    [Deleted incorrectly formatted code fragment]

    I have change it to

    [Deleted incorrectly formatted code fragment]

    But nothing shows up near my simple-tag widget.
    Thank you. I would really love some help.

  71. Kaspars says:

    Paul, could you please be more specific and provide the URL where the problem is visible. Also, did you actually create a new tabbed widget under Design > Tabbed Widgets?

  72. Brooke says:

    this is a great plugin! i will be using it with the wp-ecommerce plugin to show product groups. youve solved a problem ive been struggling with for weeks, thank you!

  73. Brooke says:

    i found a bug in ie6. theres a big space between each accordion, not the same as the problem where it shows everything, ive made the changes to my functions, they worked. this is only happening in ie6, which, unfortunately, is still used by many of my visitors.
    heres a screen shot
    http://img.skitch.com/20080728-xpinb3wn1iw6fcys6m24d6yp3k.jpg
    any advice?

  74. Kaspars says:

    Brooke, I just sent you an email. The idea is that the problem is caused by theme’s CSS not this widget, so it should be easy to resolve.

  75. Paul says:

    Kaspars, thank you for a tip, I didn’t created (published) widget under “Widgets” tab.
    Now, I am will go sit in the corner in my “Dunce” hat…
    Thank you for your wonderful support and work guys.
    Cheers.

  76. Ian says:

    Kudos on the great plugin, very cool!

    I ran into a problem though only in Firefox 2, if you check out my test site here you can see that in FF2 the widget below the tabs (regardless of what widget it is, I’ve tested multiple widgets) is always stuck over to the right of the widget.

    It works fine in FF3, IE7, and Safari 3.

    I’ve tried unfloating some of the elements, or clearing both, but haven’t been able to figure out what it is, any ideas?

    Thanks!

    Ian

  77. brooke says:

    Hello,

    I love the idea of this plugin, but I can’t get it to work. I tried adding the code you mentioned above, but it broke something else, and still didn’t show up in the design. I’m testing the plugin and the AYUMI template at blog.emccreative.com. The backend interface works great, just can’t get it to display on the frontend.

  78. Beppe says:

    hi Kaspars,

    I’m using this plugin and everything seems to work great; one question though: is it possible to change the accordion style so that when you click on an open tab title it closes down? would look better with long lists i think!

    for instance:

    http://www.libriinviaggio.eu/

    click on Africa on the left column and you’ll see what i mean.

    thanks!

    beppe

  79. Kaspars says:

    Beppe, I think I’ll add this as an option under the tabbed widgets settings page.

    However, don’t you think that all widgets collapsed might seem confusing for the visitor? Anyhow, making that as an option will allow the site owner to decide.

  80. Ian says:

    Well although I’m not too impressed with your lack of response to what seems to be a pretty severe issue with your plugin and Firefox 2, I finally managed to find a fix

    This CSS will fix the issue in FF2 and won’t screw anything up in FF3

    li {
    -moz-float-edge: content-box;
    }

    Ian

  81. Ian says:

    If anyone is interested, here is a post describing the bug

    http://archivist.incutio.com/viewlist/css-discuss/59165

  82. Marcela says:

    Hi! I really like this plugin, but it doesn’t work in my wp… i’ve already made the changes on functions.php, but i only see the right way if i edit the sidebar.php with the HTML code you made as example… I don’t know what could it be, could you help me? I’d be so grateful if you could.
    The blog is in portuguese at: http://msantander.net46.net
    Thanx

  83. Kaspars says:

    Bom dia, Marcela, It looks like your host is adding extra javascript code to every PHP file without your knowledge:

    Look at the end of: http://msantander.net46.net/wp-content/plugins/tabbed-widgets/tabbed-widgets.php?returnjs=true

    And you’ll see Google Analytics tracking code. It should not be there. You should contact your host or simply choose a different one.

  84. Marcela says:

    Thanx, it’s working now, but some widgets i pick is appearing in the tabs and after, as text widget… can u understand? i dont know if i was clear =)
    http://msantander.net46.net – do you know what i did wrong?
    Thanx again =))

  85. Gordie says:

    can’t use the category widget inside it ! Nothing appears… Other widgets are OK.
    What can I do ?

  86. Lea says:

    hi, this is a great plugin!
    however, i am having difficulty having the tabbed widgets display horizontally. The tabs display themselves vertically instead.
    Is there anything I can do about

  87. Lea says:

    I’m using the unstandard theme, which i realised is the reason why the widget displays vertically, something to do with the style.css within the theme

    I’m about to go crazy just trying to style this widget separately through trial and error. Do u think you can show a sample style sheet just for this tabbed widgets? At least it will be easier to figure out which colors to change

    Thanks!!

  88. Kaspars says:

    Lea, yes — the problem is with your theme’s stylesheet. I’ll have a look at it tomorrow and will send you suggestions on how to correct it.

  89. Lea says:

    Thanks! You and your plugin = godsend

  90. Picard102 says:

    What is the include code to embed this into my theme?

  91. I hope you don’t mind helping me as well. I’m trying to figure out how to make the tabs be horizontal instead of vertical.

    Once I have the correct code, I’ll make sure to post it in my site forum for those that want to do the same.

    Thanks for a great plugin!!!

  92. Insky says:

    Hello,

    Your plugin is very useful… but I need help to use it. When I modify my widget class to “class=”widget %2$s” All the widget are modified, those I have created with the plugin, but the Others too…

    How can I do to keep the css of my widget which are not made with the plugin?

  93. Kaspars says:

    Picard102, your theme should support sidebar widgets, that’s all.

  94. Kaspars says:

    Bernard, tabs are being displayed vertically because of your theme’s CSS. Try adding this at the end of your theme’s style.css file:

    #sidebar-bottom ul ul li {
       margin:0; padding:0; width:auto;
    }
  95. Kaspars says:

    Insky, simply append %2$s to class="other classes here %2$s" where other classes here are all the CSS identifiers that were already there.

  96. Kaspars says:

    Lea, for reference please view the uitabs.css under the js folder inside the tabbed-widgets directory.

  97. Kaspars,

    Thanks for the help! It looks great.

    If I want to increase the size of the tabs, would I use more padding or change the width to something else?

    Your plugin rocks!

  98. Picard102 says:

    It does support widgets, but I dont use them. Is there a way to call the plugin without using the widgets?

  99. Kaspars says:

    Bernard, first I suggest that you install and try the Firebug extension for Firefox which helps you easily view the CSS applied to any of the page elements. Secondly, yes — the padding around a should make them bigger.

  100. Kaspars says:

    Picard102, no — this plugin works only with real widgets.

  101. Insky says:

    Kaspars,
    Yep,
    Cool… It’s working.. I just need a little bit more customisation, but I will spend time to do it myself.

    Thanks a lot for your fast support.
    It’s rare that support is so individualized and so fast. It’s very valuable. Thank you very much. I hope that it lasts!

    A good idea of additionnal content for the plugin could be some templates with preview? :-)

    Thank you again

  102. I think, unfotunately, Tabbed Widgets doesn’t work with WordPress 2.6.1

    I tried it on 2 web sites. Then I freshly installed another 2.6.1 and my first plugin is yours. But same error occurs again. All tabs remain visible in acordion and in tabs you can’t select the other tab.

    Waiting for your fix :))

  103. Kaspars says:

    Eddie, it does work with 2.6.1 — you can see it on this blog.

    Your problems is caused by something else, as the directory tabbed-widgets2 where you have places the plugin returns the “Not found” message.

  104. YES !!!!!!

    Thank you very much.

    The reason it wasn’t working was the folder was named “tabbed-widgets 2” instead of “tabbed-wigdets2” :) I think it happened while unzipping the plug-in.

    My vote is for you :))
    Cheers

  105. I also found out that Lightwindow 2.0 for Images 1.1 plugin conflicts with tabbed widgets.

  106. Kenan Kurtay says:

    I will use Hemingway Reloaded theme for my site and i want to use your tabbed widget but widget title’s classes are blending with theme’s .li classes. How can i separate this classes. I’m terrible at programming, so can you help?
    I uploaded my theme at this site:
    http://rapidshare.com/files/138931330/hemingway_reloaded.rar.html
    Could you send me when you fixed it to my email?

  107. Kaspars says:

    Kenan, unfortunately I currently don’t have the time to do it. I suggest you try to do it yourself. The small amount of CSS and HTML stuff that you would have to learn will give you a better understanding of how the Web works. It’s definitely worth it.

  108. muriel says:

    Kaspars,

    I just upgraded to the latest release of the plugin. This is what I’m getting whenever I go to ‘Design’ > ‘Tabbed Widgets’:

    Warning: Invalid argument supplied for foreach() in /wp-content/plugins/tabbed-widgets/tabbed-widgets.php on line 533

    Tabbed Widget Settings

    Notice: List of active widgets is empty. Creating it with $this->get_active_widgets() now.

    I really want to use this plugin. Hope you’ll be able to find an answer to this problem. Thanks.

  109. Dave says:

    Hi muriel,

    I am seeing the exact same problem when I tried to use it I wonder if something broke in a recent update.

    Dave

  110. Nitin says:

    Dear Kaspars,

    Thanks for the excellent plugin and also for making the effort to respond to these requests.

    I tried to get the plugin working with ADSimple theme (link), but it generates a number of warnings on going to the Tabbed Widget admin screen (under Design>Tabbed Widgets). I’m using WP 2.5.1. And none of the widgets show up in the drop downs.

    I checked the functions.php and it is as you recommend. I wonder what the problem is. Do help if you can.

  111. Saitia says:

    Kaspars,

    I’m getting exactly what Muriel (#7856) sees. I’m using Chris Pearson’s Neoclassical theme, which didn’t have unique identifiers in the functions.php page. (The line 533 problem appeared before I attempted to alter the file; my changes to it didn’t fix it.

    Line 533:
    foreach ($active_widgets as $widget => $value) {

    Not a programmer; it’s Greek to me. I’ll monitor this for awhile. . .

    looking forward to implementing this and supporting it; it looks fabulous.

  112. Saeid says:

    Hi there,
    Great job.
    Did I understand? Does it work only as widget on sidebar?
    I am looking for a solution for within an entry or a post.
    Something like Yahoo tap.
    I have used “recent posts” plugin on different places of my main page and would like them to be tapped with different categories.
    Is it possible with your plugin?
    Thanks a lot, Saeid

  113. angel says:

    hello
    thank you for the plugin, it worked for me, but I’ve noticed that you can only have 6 tabs for each tabbed widget I think that it would be a good idea add an option to put as many tabs as you want but is just a suggestion
    sorry if I made any mistake since I don’t speak english so well
    thanks and see you

  114. Scott says:

    I am also getting the “List of active widgets is empty. Creating it with $this->get_active_widgets() now.” message while using v0.73.

    would appreciate any assistance to get this fixed as the plugin looks fantastic!

  115. Tomek says:

    Hi, I use itheme (left and right sidebar) and I notice that tabbed widget don’t work – ther is no content in defined widgets. My functions.php looks like this: if ( function_exists('register_sidebars') )
    register_sidebars(2, array(
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => '',
    ));

    I use wp 2.6.2. I will be happy for any suggestions :)

  116. Andy says:

    Hi! I’ve got some problem with your plugin. Actually some widgets just work when they also exist outside of the tabbed widgets. I have some huge problems with the “collapsing archives”-plugin. The developer told me he also has problems to make the standard text-widget work with your plugin and couldn’t figure out any problem in his code… Maybe you have an idea? Thanks alot!

  117. Kaspars says:

    Andy, I am now looking at your blog and the ‘collapsing archives’ in the tab work just fine. Could you please describe the problem in more detail and explain what you mean by ‘some widgets just work when they also exist outside of the tabbed widgets’.

  118. Andy says:

    Kaspars, yep, it works now because I’m using an older version of that plugin ;) Okay, the problem is the following: When I put the widget outside of “tabbed widgets” (below of it as a normal widget) then I can put it in the tabbed widgets, too. As soon as I delete it as a normal widget (because it doesn’t make sense to have it twice) “tabbed widgets” doesn’t find that exact widget anymore. It just disappears. Maybe it has something to do with your new feature of checking the widget-title in its whole? Here’s the plugin I’m having problem with: http://wordpress.org/extend/plugins/collapsing-categories/

    Thanks alot!

  119. Kaspars says:

    Andy, I think that the solution you are looking for is the ‘invisible sidebar’ where you can place the widgets that you are going to use only in tabbed widget and do not want them to appear elsewhere. The invisible sidebar is created automatically by the plugin and you should see it on the sidebar drop-down. Please let me know if this solves the problem.

  120. Andy says:

    Kaspars, brilliant. Thanks a lot for that hint, works like a charm!

  121. AMF says:

    Lea, Lea, I’m trying to use also the unstandard them….but it’s not widget ready….I’ve tried everything but it didn’t work……as soon as I create the functions.php file everything goes ‘blank’……can you help me out with this ?

  122. AMF says:

    Kaspars, I’m trying to use the unstandard theme. but this is not widget ready. I’m trying to put either the sidebar as the footer working with the widgets….but as soon as I create the functions.php file (as refered here – http://30dayloa.com/widgetizing-the-unstandard-theme-sidebar/) everything stops working and it comes only a ‘blank page’. If I delete the functions.php file, everything goes back to normal.
    Can you help me out ?

    Thanks,

  123. Kaspars says:

    AMF, I suggest you ask for support at this section of WordPress Forums.

  124. Ben says:

    Hi!

    Great widget. I seem to be having a small issue with selecting the default tab to open. I select the tab I want with the radial button in the Tabbed Widgets section in the Admin CP (Navigation), however regardless of which of the three tabs is selected to open on default, Archives is ALWAYS the one open.

    I don’t think it’s a theme issue because if I select to use a random starting tab then it will bounce between the first tab (Navigation) and the third (Archives). I’ve never seen it open the second by default. It is however, possible that in my tinkering I broke something, but I don’t think I did… :)

    Any help would be very much appreciated!

    Thank you for such a great widget.

    Ben

  125. Kaspars says:

    Ben, I think that you are experiencing the effect of one of the plugin’s features — if you clicked on a link inside a tab, it will open up the same tab by default on the next page you visit.

    To detect if that indeed is the feature, please clear the cookies and refresh the page — the default tab (which you specified) should open.

  126. Ben says:

    Kaspars,

    Thank you very much for your reply. I have done as you suggest and cleared all browser cookies in both IE and FireFox. After closing both browsers and navigating back to my site, the Archives tab continues to be the default open tab instead of the Navigation tab.

    Navigation is selected with the radial to be the default opened tab.

    Very strange.

  127. Kaspars says:

    Ben, you are right, I had forgotten to add that ‘open selected tab’ part of javascript to accordion type widgets. This is now fixed in Tabbed Widgets 0.76. It should soon show up on your Plugin Management page as an update.

  128. Saitia says:

    Kaspars,

    I was hoping you’d get to Muriel’s problem (and mine) with the error on line 533. . .
    I’m getting exactly what Muriel (#7856) sees. I’m using Chris Pearson’s Neoclassical theme, which didn’t have unique identifiers in the functions.php page. (The line 533 problem appeared before I attempted to alter the file; my changes to it didn’t fix it.

    Line 533:
    foreach ($active_widgets as $widget => $value) {

    Any help would be greatly appreciated!

  129. Kaspars says:

    Saitia, to get rid of the line 533 problem, simply create an empty text widget in ‘Invisible Sidebar Widget’ sidebar.

    Did you manage to add the widget identifiers by altering functions.php file? If not, could you please email me that file.

  130. Ben says:

    Kaspars,

    Thank you for your reply and update. I have downloaded the update and applied it to my website. I seem to be running into the same issue however. Selecting the navigation tab (first of three) as the default with the radial and the third tab (Way Back Archive) continues to open when navigating to or refreshing a page on my website.

    I have cleared the cookies, cache, and history of both Firefox and IE and navigated back to the page to the same result. Selecting the option to randomly select a tab and reloading/refreshing the pages within my website does open random tabs.

    Quite a quandry.

    Ben

  131. Kaspars says:

    Ben, I see that you have changed the theme and it doesn’t use unique widgets identifiers, which means that tabbed widgets will not work. Please see the theme requirements in the post above.

  132. Kaspars says:

    Ben, I had not tested the fix thoroughly enough; Now 0.77 should solve the problem.

  133. Ben says:

    Kaspars,

    Yeah, I was working with a different theme last night because of a frame size issue with the IDX iframe… long story short it wasn’t wide enough to display the whole iframe without a scroll bar. Very annoying.

    My update that it was still not displaying the selected default tab post .76 update was related to the former theme however. I’m happy to switch back for your viewing if that would be helpful in anyway for you to see it in action.

    Ben

  134. hiduptreda says:

    I used this plugin and i want to add this widget on my own place. my question is how to call this widget manually with php?!

  135. Kaspars says:

    hiduptreda, there is no (easy) way you can call it manually. The whole idea of this plugin is that it places existing widgets inside a tabbed interface. If your theme doesn’t support widgets, then you can do it by writing raw HTML and adding either Accordion or Tabs jQuery extensions.

  136. Claudia says:

    Dear Kaspar,

    Thanks for your wonderful plugin. It works fine for me BUT the size is much bigger than my sidebar. I have other tabs in my theme – could it be that these are interfering? I know a wee bit about programming so if you instruct where to change something I’ll probabally get it but without guidance I am lost.

    I’ll leave the tabbed widget on the sidebar for a few hours so you can check it out http://radioafrika.thetruthway.net

    Thanks a lot

    Sincerely
    Claudia

  137. Kaspars says:

    Claudia, this is an issue of your theme — it uses the same CSS indentifiers for the tabbed interface at the begining of the main content column as my plugin. To correct it, please add the following at the end of theme’s style.css:

    #sidebar .tw-tabbed-widgets .ui-tabs-panel {
       background:transparent !important;
       border:none !important;
       padding:1em 0 !important;
       width:100% !important;
    }
    

    and it should work.

  138. Claudia says:

    Hi Kasper,

    Thanks for your prompt reply. I added that command to the end of my style sheet but it is still the same :-( but it has made the accordian style function properly now :-)

  139. Claudia says:

    Hello again,

    I tried that again – I added that piece of code that you suggest into the ui.tabs stylesheet and that seemed to do the trick.

    Thanks
    Claudia

  140. Claudia says:

    Hi and sorry to be such a nuisance,

    Seems like I cannot get it to work – you can check it out. It has the right size and everything now but is pushing other stuff onto the side. I’m about to give up and just use a standard sidebar.

    Claudia

  141. Ben says:

    Kaspars,

    Good evening! Sorry to be a pain but I had one more question. By the way, your fix works great on the default tab selected not being the default to open. Thank you so much!

    My next question is about hiding posts/pages from the Tabbed Widget. I have found the exclude comment in the post-template.php which does indeed remove the page link at the top of my blog. I would also like to hide the direct link to this page from tabbed widgets so that it doesn’t appear in the sidebar nav. I can not find any exclude comments in the tabbed widget files.

    Is there a section that I am missing or that i looked over to accomplish this goal?

    I would like the page to be available and not password protected, I just don’t want it to appear in any part of the navigation onsite. I want to put content up that will be accessible to people that I tell to go there, not casual surfers.

    Your help, as always, is very much appreciated.

    Ben Moore
    bgreenidaho.com

  142. Stefano says:

    Kaspars,

    I adore your plugin but there’s no way for me to make it work :-/
    I tried anything and everything you guys post here but nothing…it just doesn’t want to listen :-)

    I am posting the code I got in my functions.php file, I played around a bit with it but I cannot get there. Do you have any thing to tell me, some great idea so I will have it work? :-)

    <?php

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘before_widget’ =&gt; ”,
    ‘after_widget’ =&gt; ‘&lt;/div&gt;’,
    ‘before_title’ =&gt; ‘&lt;h3 class=&quot;widgettitle&quot;&gt;’,
    ‘after_title’ =&gt; ‘&lt;/h3&gt;&lt;div class=&quot;sidebarbox&quot;&gt;’,
    ));
    remove_action(‘wp_head’, ‘wp_generator’);

    ?>

    In case you need to see the blog, it’s SEO Melbourne Blog

    Thank you very much ;-)

  143. Kaspars says:

    Stefano, the great idea you are looking for is described in the article above — under Theme Requirements section — you need to add those unique widget identifiers.

  144. Kaspars says:

    Ben, the idea is that tabbed widgets are only containers for other widgets, so your question is — how can one remove something from a widget in general.

    If I understand correctly then you want to exclude pages from the Pages widget. Here is the solution.

    If you have any other questions which do not relate to the Tabbed Widgets plugin, please ask them in the WordPress Forums.

  145. Stefano says:

    Kaspars,

    thank you very much for answering.

    That’s exactly what I have been trying for hours, but if I put that code as it is in Theme Requirements it happens that the footer goes all the way to the right and quite a lot higher, so it messes up the whole template :-/

  146. Kaspars says:

    Stefano, I would have to see it in order to be able to detect what is wrong.

    The idea is that the plugin requires those unique identifier. Classnames can be same as currently used in your theme.

  147. Ben says:

    Kaspars,

    Please accept my apologies. When adding the page id to the exclude list in the post-template.php file only eliminated the link in the site navigation and not the plugin I was mistakenly under the impression that I was missing something in the Tabbed Widget files.

    Thank you for taking the time to point me in a different direction, the exclude-pages plugin did the trick. It’s just taking me some time to sort through all the WordPress addons required to get the site running just “right”. Trying to launch as quickly as possible has certainly been trial by fire.

    Again, thank you for your assistance and for providing such a great plugin.

    Ben

  148. JLS says:

    Hello, I’m having the same issue as some of the folks did… tabs and accordion aren’t working properly: showing all it’s contents.

    [code fragment deleted]

  149. Kaspars says:

    JLS, you forgot to encode the html thing, but it I am 90% sure that you theme doesn’t apply those unique widget identifiers.

  150. JLS says:

    Right, sorry, here it is. The theme is Agregado, which you can find here: http://www.darrenhoyt.com/2008/09/08/agregado-lifestream-theme-for-wordpress-released/

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'sidebar-home',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    ));
    register_sidebar(array('name'=>'sidebar-interior',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    ));;

  151. JLS says:

    Forgot to mention, but i already tried what you said in the theme requirements section.

  152. Kaspars says:

    JLS, as I said — your code is missing those unique identifiers. This plugin cannot work without them.

Comments are closed.