Is Your WordPress Theme Good Enough?

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.

Widgets… hmm?

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

All the Tabbed Widgets magic is done by two amazing JavaScript functions — Tabs 3 by Klaus Hartl and Accordion by Jörn Zaefferer, which do the showing & hiding, and the dynamic transitions. Plugin’s PHP backend, however, places other widgets inside those tabbed and accordion blocks.

Now here is the problem — those Javascript functions need to know which of the fifty seven widgets in your blog’s sidebar are the tabbed ones. Even more — there might be one tabbed and one accordion type widget, right? So how can the scripts target them?

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

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 %1$s and %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.

Anything Else?

Yes, if you find that %1$s and %2$s are missing, please contact the author of the theme with a link to this article. Thank you.