This plugin is also a participant of the WordPress Plugin Competition. If you like it, please go and vote for it.
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
Installation & Configuration
Please follow the usual plugin installation procedure:
- Download the plugin and unzip its content.
- Upload the
tabbed-widgetsdirectory to/wp-content/plugins/directory. The final directory tree should look like/wp-content/plugins/tabbed-widgets/tabbed-widgets.php. - Activate the plugin at the Plugin Management section under the ‘Plugins’ menu.
- 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_titlesCSS 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’sfunctions.phpfile.
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
- Tabbed Widgets plugin for WordPress logo
- Tabbed Widgets Plugin Settings
- Tabbed Widget example: Accordion style
- Tabbed Widgets on Default WordPress theme
Comments & Feedback
If you encounter any bugs, please leave a comment with a link to your site where the problem is visible.



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.