In this WordPress tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.
In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let’s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.
Saving Sidebar Space
The main advantage of tabs is that you can fit more widgets into the sidebar. And tabs look good. The image below shows how much vertical space is taken up by three standard widgets (using the default Twenty Ten theme). The default layout is on the left, and our tabber widget is on the right:
Before We Start
A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress’ Widgets API and how to create a basic widget:
- “Widgets API,” WordPress Codex
- “Creating Widgets for WordPress 2.8,” Tim Trott, Azulia Designs
- “Advanced WordPress Widgets,” WP Roots
Use these resources as needed while following the tutorial along.
The Basic Idea
The idea for this widget is simple: select a sidebar, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget’s interface, you can select a sidebar, specify an extra CSS class and optionally apply your own styles. When enabled, the plugin will register an extra sidebar (which may be removed if you have other ways to add a sidebar). Then, using the same code, you can add more sidebars, and each of them can hold instances of the Tabber widget.
To control your widgets, Tabber uses idTabs for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.
So, the goal with Tabber is to transform any widget’s output into markup that can be used to display tabs
tags for this. Other themes may use complicated markup that can’t be predicted or successfully transformed into the output needed for tabs.
The solution to this problem is to intercept the widget’s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.
action. We register the widget on line 17.
Widget interface.
The Main Tabber Widget Class
Tabber is a normal widget, and in this case it is located
SETTINGS: PLUGIN INTERFACE
The widget has two settings:
- “sidebar”
to hold the ID of the selected sidebar - “css”
for extra CSS classes to style the Tabber widget
When selecting which sidebar to use, you must avoid using the sidebar that holds the Tabber widget. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget’s content, check whether the selected sidebar is the same as the parent sidebar. This can’t be prevented while the widget is set up, because the widget’s panel affords very little control over this.
Also, using sidebars that are not normally used is a good idea. To help with this, the plugin includes sample code to help you add an extra sidebar.
This function requires the name of the sidebar, and it will display all widgets in it. Line 9 contains the check mentioned before, to prevent recursion when displaying sidebar content if the selected sidebar is the same as the parent sidebar.
Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.
WIDGET MODIFICATION
To prepare for the transformation done with JavaScript, the tabber widget includes the
tag for the control tabs. After this filter, the widget’s output will look like this:
JavaScript For Widget Transformation
Once the widget’s presentation is modified, one thing remains: to complete the transformation and get the titles from the widgets and turn them into tabs:This code uses jQuery to get all of the Tabber widgets based on the
- will hold only its content.
Final Tabber example.
Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the
How To Install The Tabber Plugin
As with any other plugin, unpack it, upload it to WordPress’ plugins folder, and activate it from the plugins panel. When you go to the “Widgets” panel, you will see an additional sidebar, “Tabber Example Sidebar,” at the end on the right. And “Available Widgets” will show one more widget, “D4P Smashing Tabber.”
Add this new widget to the “Main Sidebar.” From the “Sidebar” widget drop-down menu, select “Tabber Example Sidebar,” and save the widget. Now, open the “Tabber Example Sidebar” and add the widgets you want to be displayed as tabs. You can add as many widgets as you want, but pay attention because if you add too many, the tab’s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.
Conclusion
Creating one widget to display several other widgets as a tab isn’t very difficult, as you can see. The trick is in adjusting the widgets’ output to a format that can be transformed into tabs, and then using JavaScript to display them. We’ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.
We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:
I prefer using a jQuery-based solution, and idTabs is very easy to use and easy to style and it works in all browsers. Check out other solutions, and see what extra features they offer to enhance your own tabbed widgets.
from : http://www.smashingmagazine.com/2014/08/27/a-tour-of-wordpress-4-0/
This Demo Content Brought to you by Momizat Team
