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.
Excellent, I have just tested the listed code and added it to those of my themes that are about to be updated soon. It will be added in all themes once they have all been updated, because this is a plugin that I know that a lot of people will want to use. :)
Andreas, great to hear that and thanks for the effort.
Thank you very much for your explanation, all is working great now on my blog. Very good job!
I spoke too speed… i think i have conflicts between jquery and prototype…
k|torz, try disabling the plugins which use some kind of javascript and see which one is causing the problem.
Glad to see you posted this article Kaspars. I’m getting ready to go through another redesign and if Tabbed widgets doesn’t work, I’ll be back to this page to implement your suggested fixes.
Hi,
This looks to be a wonderful plugin but unfortunately it does not work with Rebel Magazine Theme – http://www.wpthemedesigner.com/2008/05/07/rebel-magazine-theme/.
Can you please help me to get your plugin working with Rebel Magazine Theme. My running website is – http://www.bhuspeaks.com
Regards,
Nitin
Nitin, you should contact the author of that theme and kindly ask him to correct the code that generates the code for the sidebar as described in this article. However, I suggest you try to fix it yourself, first.
This is where I get confused. It mostly reads as you’ve mentioned but adds the “li” as well as shown below:
[Code fragment removed because of incorrect formatting]Is this ok or should I remove the “li”?
Thanks!
Bernard, you can leave the li there. I also suggest you read some basic tutorials about HTML and how it works in order to get a better feel why things should be done one or the other way.
Thanks, this is a brilliant plugin. This works fine with the changes you suggested if I choose the accordion option. However when I use the tabs option, it goes for a toss.
The site link is:
http://culturazzi.org/review/
Hi Kaspars,
I am facing some trouble with implementing your plugin which I really want to use on my blog running under i3theme with two sidebars. My function.php contains unique identifiers as you can see here:
<?php
if ( function_exists(‘register_sidebars’) )
register_sidebars(2, array(
‘before_widget’ => ‘<!–sidebox start –><div id="%1$s" class="dbx-box %2$s">’,
‘after_widget’ => ‘</div></div><!–sidebox end –>’,
‘before_title’ => ‘<h3 class="dbx-handle">’,
‘after_title’ => ‘</h3><div class="dbx-content">’,
));
But I think there is a problem with the dbx-box and the handling of the left and right sidebar which I cannot figure out properly. I would appreciate any help and also buy you some lunch ;-) if you could help me on that.
Thank you very much in advance,
Michael
Michael, could you please give the URL of your site. Thanks.
Thanks for your answer Kaspars!
My Url would be http://www.boystalk.de I´ll include the widget in the lower part of my right sidebar until I hear from you again, ok?
Unfortunately, I had to remove the widget due to design problems, do you need to see the widget online? If yes, I´m going to port everything to a test domain, I wanted to do that anyway…someday ;-)
Michael, this seems to be a problem on my plugin’s as well as your theme’s side, which places
</h3><div class="dbx-content">after the widget title. Notice the final<div>, which is used for wrapping widget’s content.The problem is that my plugin tries to hide the default widget title from being displayed inside a tabbed widget, because it is already displayed in the tab.
You should be able to fix the problem by selecting ‘Show widget title’ next to the widget title under the Tabbed Widgets settings, and adding the following CSS at the end of your theme’s
style.cssto hide the widget title:#sidebar-right .tabbed-widget-item .dbx-handle { display:none; }Thank you very much for your help Kaspars, I really appreciate it. Selecting a title solves the problem that no box showed up, but I still have the problem that no content is displayed. You can see that for yourself on my website now, I´ll let the widget online for a while.
I get following error btw: jQuery.easing[jQuery.easing.def] is not a function
source: http://www.boystalk.de/wp-content/plugins/tabbed-widgets/js/jquery.easing.js?ver=2.7.1
line: 46
Michael
Excellent explanation! Thank you! I really don’t know anything about php, codes, whatever…and I guess the theme I chose sucks because none of the codes you suggest are anywhere to be found. My functions.php has the following:
<?php
if ( function_exists(‘register_sidebars’) )
register_sidebars(2);
?>
I can’t find any “before” or “after” anywhere. The theme has sidebars.php, sidebar1.php, and sidebar2.php and the identifiers you speak of don’t exist there. Any clue?
Cristy, your theme is using the default settings which already include all the necessary identifiers. This is what I see in your website’s HTML output:
<li class="widget widget_text" id="text-390346671">...So your theme is all good.
Kaspars, ok, but I don’t see the tabbed effect on the sidebars. I have 2 setup up and can’t see them in tabbed nor accordian. Am I doing something wrong? Thanks for the quick reply!
Cristy, did you add the newly created Tabbed Widget to any of the active sidebars?
Never mind!!! I figured it out! DUh!!! Great plugin!!! Thanks for your help.
Cristy, it would be interesting to know what the problem and solution was, just in case anyone else encounters the same issue. Thanks.
It seems like the Tabbed Widgets plugin is working everywhere on my site (http://www.complainypants.com) except for on comment pages and other pages that begin with # characters. One those pages, all the tabs are open at once. How can I work around this?
Problem page:
http://www.complainypants.com/2009/04/i-hate-you-and-everybody-else/#comments
Tried inserting the suggested code into my function.php file, and my entire site disappeared–I had to reload the file via my FTP server in order to get access to the WP Admin panel. I checked the forums for the theme (Arthemia Free) and the creators were unable to answer similar questions about tabbed widgets. (They state they’re not big on widgets–not a helpful sign!)
Here is the line of code as it appears in the function.php file:
register_sidebar(array(‘name’ => ‘Sidebar Top’,’before_widget’ => ”,’after_widget’ => ”,’before_title’ => ”,’after_title’ => ”));
Can I make your code fix work with this theme file? Thanks!
Hi.
I have the following error message in the backend: „Tabbed Widgets plugin isn’t compatible with your theme XXX, because it doesn’t use unique widgets identifiers. Here is how you can fix it. Please disable the plugin while you fix this issue.“
But it works und the code in the functions.php is correct. So, how can I remove the Errormessage?
Greetings
Impulsgeber, currently there is no easy way to do it. Could you please email me your theme — I would really like to see why this compatibility check fails.
Hi,
I am having the same problems as Katherine using Arthemia premium except I didn’t insert the code to the php file, since I couldn’t find the text in the file “‘before_widget’ => ”,
‘after_widget’ => ”,”.
See the functions.php here: http://pastebin.com/7xKhnWFr.
Best regards.
Maggi, see line 17 to 23 of the sample you posted. You need to make them look like this:
kaspars, thanks for the quick reply. I do not understand completely though. Do you mean that it should look like this: http://pastebin.com/SJqMhRtM?
I updated the functions.php file on my webpage, and now the widget seems to be working pretty well except for some error, see here: http://i52.tinypic.com/15ry62e.jpg. Not sure what is causing this, as I’m not good with programming. It does not matter what sidebar I put it on, it always looks like this.
When the widget was in the footer sidebars though, it looked perfect. No extra space beneath it.
Best regards.
Yeah, that is correct Maggi. Regarding the other problem — you need to style those tabs, for which you’ll need some serious CSS knowledge.
I hadn’t heard of this % business until now. Thanks for the heads up!
I assumed it was a bug in your plugin until stumbling across this blog post.
Hi,
I’ve tried to make the recommended changes to my functions.php file but for some reason the plugin still doesn’t work. Here’s how my functions.php file looks currently since I edited it according to your instructions:
http://pastebin.com/u1e5HQPy
Initially there were ‘div class’ tags not ‘div id’ tags which you can see in the original functions.php posted in the link below. The %2$s was there but not the %1$s
My sidebar still shows widgets with that change above but the widget isn’t working. The tabs have never worked for me in any theme I have tried but I got the accordian type working on the last theme but I switched theme and it’s not been working.
The widget is set up on the site at the moment if you’d like to check it. Despite that change above I’m still getting the warning in admin side telling me that the theme is not compatible. I’m wondering if by changing the div class to div id if I need to make any changes in the sidebar.php also?
Here’s how the original functions.php looked before I made the changes you suggest:
http://pastebin.com/TLGbbeyF
I’d be very grateful if I could get the tabbed function working especially, that’s the option I prefer. Thanks for your help in advance.
Láidir, it looks like your theme is not outputting the required widget settings script that specifies widgets that will be styled as tabbed or accordion. I have no idea why that could happen.
Any reason why my query was deleted? I’d love to know. I spent a lot of time putting my query together and I am now onto the second theme which does not work with your plugin! Come on now… balance your replies thanks! Not everyone is ending up all happy happy and fixed are they and just how many posts are you deleting and ignoring is the question right about now!
Your comment was not deleted, Laidir, it’s still in moderation, because I haven’t had the time to look at it.