Following the release of the Tabbed Widgets plugin many people left comments saying that it doesn’t work with the theme they are using. And only then I realized how many themes do not take full advantage of widget functionality that WordPress provides by default. In this article I am going to show you how to fix them.
Let’s think of widgets as if they were plain cardboard boxes. And let’s suppose we both are in a room full of these boxes and we are trying to figure out what is inside each of the box just by looking at them. If they all are exactly the same size, shape and color, then there is no way to differentiate between them.
On the web everything is built from various markup and layout boxes. In case of WordPress widgets these are usually
<div> elements that semantically donate a group of content. So if there are many widgets on a page, then each of them is inside the same
<div> box and there is no way to telling them apart… unless unique names (indentifiers) and shared surnames (classes) are applied to each of them.
How the Tabbed Widgets Work
Unique identifiers or names and surnames, I say, is the answer. But the reality is — many themes do not use the WordPress built-in functionality that automatically generates these identifiers.
How to Fix Your WordPress Theme
First, find the place where your theme defines sidebar widgets. This is usually done in
functions.php file in theme’s folder but it may differ. If you can’t find it, simply go through all the theme files and search for
Find the line that defines the HTML element box in which all the widgets are placed. It should look something like this:
'before_widget' => '<div ... >', 'after_widget' => '</div>',
If it contains
%2$s then you should consider donating to the author of the theme for the great job. However, if they are not present, then replace it with
'before_widget' => '<div id="%1$s" class="%2$s">', 'after_widget' => '</div>',
and WordPress will automaticaly replace
%1$s with a unique identifier (name) and
%2$s with a classname (surname) of each widget.
Yes, if you find that
%2$s are missing, please contact the author of the theme with a link to this article. Thank you.