« Previous Next »

Tabbed Widgets Plugin for WordPress

This plugin is also a participant of the WordPress Plugin Competition. If you like it, please go and vote for it.

Tabbed Widgets logo 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. It works with WordPress 2.5 and 2.6 and maybe 2.3.x

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’ > ‘Tabbed 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, like this:

register_sidebar(array(
  'name' => 'Title of the widgetized area',
  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h4 class="widget-title">',
  'after_title' => '</h4>'
));

Please read my comment on why this is necessary.

How to Style Tabbed Widgets using CSS

Plugin comes with a default style that should work with most WordPress themes, but you can easily tweak/correct it to your own needs. Note that:

  • without_titles CSS identifier is added only if the title of a tabbed widget block is set to invisible. This is useful for specifying custom margin and padding for that tabbed widgets which don’t have the typical title.
  • <!--before_widget-->, <!--before_title-->, <!--after_title--> and <!--after_widget--> is the HTML defined in your theme’s functions.php file.

Here is the HTML structure with CSS selectors that are used to create the tabbed interface:

HTML & CSS for Horizontal type Tabbed Widgets

<!--before_widget-->
   <!--before_title-->Tabbed Widget Title<!--after_title-->
   <div class="tw-rotate (without_title)">
      <ul class="tw-nav-list">
         <li><a href="#id-1"><span>Tab Title 1</span></a></li>
         <li><a href="#id-2"><span>Tab Title 2</span></a></li>
      </ul>
      <div id="#id-1" class="tabbed-widget-item">
         <div class="tw-hide">
            <!--before_title-->Original Title 1<!--after_title-->
         </div>
         <!--Widget 1 content-->
      </div>
      <div id="#id-2" class="tabbed-widget-item">
         <div class="tw-hide">
            <!--before_title-->Original Title 2<!--after_title-->
         </div>
         <!--Widget 2 content-->
      </div>
   </div>
<!--after_widget-->

HTML & CSS for Accordion type Tabbed Widgets

<!--before_widget-->
   <!--before_title>Tabbed Widget Title< ! after_title-->
   <div class="tw-accordion tw-accordion-n (without_title)">
      <h4 class="tw-widgettitle"><span>Tab Title 1</span></h4>
      <div id="#id-1" class="tabbed-widget-item">
         <div class="tw-hide">
            <!--before_title-->Original Title 1<!--after_title-->
         </div>
         <!--Widget 1 content-->
      </div>
      <h4 class="tw-widgettitle"><span>Tab Title 2</span></h4>
      <div id="#id-2" class="tabbed-widget-item">
         <div class="tw-hide">
            <!--before_title-->Original Title 2<!--after_title-->
         </div>
         <!--Widget 2 content-->
      </div>
   </div>
<!--after_widget-->

Demonstration screencast (with superb artefacts and no sound)


Screenshots

Comments & Feedback

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

 

153 Responses

Mark Eckenrode

Jul 12 at 19:57

#7356

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.

Kaspars

Jul 12 at 20:08

#7357

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>'
));
Kaspars

Jul 12 at 22:27

#7358

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.

Mark Eckenrode

Jul 12 at 23:01

#7359

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

btw, very prompt and excellent reply - much thanks!

Kaspars

Jul 12 at 23:14

#7360

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.

Mark Eckenrode

Jul 12 at 23:16

#7361

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’ => ”,

Mark Eckenrode

Jul 12 at 23:18

#7362

code got munched up in previous reply.

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

Kaspars

Jul 13 at 0:41

#7364

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"'

Kaspars

Jul 13 at 0:47

#7365

OK, now I see it.

Mark Eckenrode

Jul 13 at 0:51

#7366

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.

Kaspars

Jul 13 at 1:14

#7368

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.

Timmy

Jul 13 at 13:32

#7376

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’ => ”,
)
);

}
?>

Timmy

Jul 13 at 13:36

#7377

I have two sidebars.

‘before_widget’ => ”,

‘before_widget’ => ”,

how do i edit this?

Kaspars

Jul 13 at 13:43

#7378

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

Timmy

Jul 13 at 13:45

#7379

<?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">’,
)
);

}
?>

Kaspars

Jul 13 at 13:56

#7381

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.

Timmy

Jul 13 at 14:44

#7382

Many Thanks. It works.

Timmy

Jul 13 at 15:04

#7383

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.

Kaspars

Jul 13 at 15:20

#7384

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

Timmy

Jul 13 at 15:36

#7386

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

Kaspars

Jul 13 at 17:07

#7393

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

Timmy Wong

Jul 13 at 17:21

#7395

I’m afraid not.

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

Timmy Wong

Jul 13 at 17:32

#7397

Hey man,

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

Kaspars

Jul 13 at 17:34

#7398

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

Timmy Wong

Jul 13 at 18:03

#7399

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?

Kaspars

Jul 13 at 18:14

#7401

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.

Mark Eckenrode

Jul 13 at 19:17

#7406

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.

Kaspars

Jul 13 at 19:22

#7407

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?

Mark Eckenrode

Jul 13 at 19:24

#7408

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

Kaspars

Jul 13 at 19:37

#7409

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.

Mark Eckenrode

Jul 13 at 19:57

#7410

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

Chris Jones

Jul 13 at 23:55

#7412

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?

Kaspars

Jul 14 at 0:23

#7413

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).

Kaspars

Jul 14 at 0:24

#7414

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.

Kaspars

Jul 14 at 0:32

#7415

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; }

unblogger

Jul 14 at 14:28

#7423

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

Kaspars

Jul 14 at 14:50

#7426

unblogger, try adding style for the following CSS selectors:

ul.tw-nav-list li { }
ul.tw-nav-list a { }
unblogger

Jul 14 at 17:02

#7428

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

Kaspars

Jul 14 at 17:45

#7430

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.

unblogger

Jul 14 at 19:07

#7432

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!

Kim

Jul 15 at 16:09

#7445

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.)?

Kaspars

Jul 15 at 16:17

#7446

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>'
));
Kim

Jul 15 at 16:23

#7447

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

Chris Jones

Jul 15 at 21:55

#7448

Kaspars,

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

Micah Mathis

Jul 17 at 22:33

#7462

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.

Kaspars

Jul 17 at 22:48

#7463

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.

Micah Mathis

Jul 17 at 22:54

#7464

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.

threio

Jul 18 at 7:38

#7466

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.

threio

Jul 18 at 8:28

#7467

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]

Kaspars

Jul 18 at 13:28

#7468

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.

ovidiu

Jul 21 at 16:41

#7470

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.

ovidiu

Jul 21 at 17:06

#7472

can you give me a hint how to properly post the code here in the comment form? The guy with this comment: http://konstruktors.com/blog/w.....mment-7462 somehow managed to post it here, I don’t want to waste your comments with other tries :-(

Kaspars

Jul 21 at 17:36

#7473

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

ovidiu

Jul 22 at 8:46

#7474

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 :-)

Jacob

Jul 22 at 22:28

#7475

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

Joshua

Jul 23 at 0:31

#7476

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

Kaspars

Jul 23 at 0:40

#7477

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.

Marthin

Jul 23 at 1:05

#7478

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

Kaspars

Jul 23 at 1:12

#7479

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!)

Kaspars

Jul 23 at 1:17

#7480

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?

Jacob

Jul 23 at 1:24

#7481

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

Kaspars

Jul 23 at 1:32

#7482

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.

Jacob

Jul 23 at 1:51

#7483

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

Jacob

Kaspars

Jul 23 at 1:52

#7484

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">',

ovidiu

Jul 23 at 12:12

#7485

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 :-(

ovidiu

Jul 23 at 14:06

#7486

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

ovidiu

Jul 23 at 14:35

#7487

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.

Kaspars

Jul 23 at 16:32

#7488

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.

Peter

Jul 26 at 22:29

#7495

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!

Paul

Jul 28 at 19:37

#7505

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.

Kaspars

Jul 28 at 20:37

#7506

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?

Brooke

Jul 28 at 22:11

#7508

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!

Brooke

Jul 29 at 2:08

#7509

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.....d6yp3k.jpg
any advice?

Kaspars

Jul 29 at 23:20

#7513

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.

Paul

Jul 30 at 1:32

#7515