In this tutorial, we’ll show how easily to add a tabs, accordian or toggle widgets to your WordPress post, page or any widget location. Using any of these widgets is a great way to present your data or information while at the same time save some spaces on your site.
While there are lots of plugins available to add the tabs widget, we recommend a plugin by Justin Tadlock called Whistles.
Creating a New Whistles
Creating a new tabs widget is very straightforward like adding a new post. The plugin will register a new post type called “whistles” and a new taxonomy called “whistle group”. This new taxonomy will be used to organize and group related “whistles” together.
1. Create a new Whistles. Go to Appearance > Whistles
2. Add a content to your Whistle. Make sure to give it a title and a Whistle Group. In this example, I created a Whistle called Tab 1 and add it to a Whistle Group Tabs. Then, I repeated the same process to create another two whistles and named them Tab 2 and Tab 3.
It’s very important for you to specify the Whistle Groups as this group will be used to choose which Whistles will be displayed.
Adding The Tabs Widget
There are two ways to add the tabs widget to your WordPress site, either via [whistles]
shortcode or using widget.
Shortcode - If you wish to use the Whistles on your post or page, you may use the [whistles]
shortcode. There are lots of parameters can be accepted but you won’t need to remember any of them. When you create a new post or page, click on the Add Whistles button.
Widget - Open your Widgets page from Appearance > Widget and simply drag the Whistles widget to any registered widget location. The widget comes with a settings panel to choose and configure which Whistles to be displayed on the widget.
For more information on customizing the plugin, please see the FAQ page. The plugin is also available in Github. If you’re a developer, feel free to fork it. We hope this tutorial helped you to add the tabs, accordian or toggle widgets to your WordPress site.
Will you be using Whistles or do you have a better alternative? Feel free to drop your opinion in the comment section below.
Phil Simon says
Neat concept, but I have two problems. First, how can I add latest posts, comments, etc? Also, and this might be an issue with my site, the spacing is off. Screenshot:
http://note.io/1m7eer7
Editor says
Looks like there’s a CSS issue with your theme.
If you’re looking for sometihng like that, try this plugin instead http://wordpress.org/plugins/ff-tab-widget/screenshots/
This plugin is intended to be used with texts only.
Phil Simon says
Thanks. Yeah, the new one is a bit funky too. No big thing…