Widget Voodoo Theme Tweaking Manual
Here are instructions on tweaking those (hopefully rare) themes that don’t meet Hackadelic Widget Voodoo‘s minimum requirements. Before proceeding with theme tweaking, make sure to check out the configuration tutorial.
Basic Theme Criteria
In order to operate, Hackadelic Widget Voodoo needs to distinguish widgets and their titles. Hence, widgets and titles need to be distinguishable in the first place. I’ll refer to widgets satisfying these criteria as well-formed.
About Well-formed Widgets
Widgets need to by uniquely distinguishable on a page as whole. If you don’t need the auto-collapse feature, they only need to be distinguishable as a set, not necessarily as individual widgets. That is:
- Every widget must be wrapped in a separate HTML tag.
- That HTML tag must have a unique class, specified in its class attribute.
An example of such a tag is <div class="widget">.
About Well-formed Titles
Similarly, widget titles must be uniquely distinguishable within their widget. They are, if:
- the widget titles have a separate HTML tag,
- that HTML tag is either unique within the widget, or it has a unique class, specified in its class attribute.
About Individual Widget IDs
Optionally, if you want to auto-collapse individual widgets, then widgets need to be distinguishable individually. That is, they need unique IDs – specified in their id attribute. While WordPress widgets allways have IDs internally, not every theme includes them in the HTML – which is when you’ll need to tweak it.
Well-formed Widget Sample
An example of a well-formed widget may be
<div class="widget" id="text-1234"> <h4 class="widgettitle">Some Title</h4> <p>Something</p> <p>interesting</p> <p>here.</p> </div>
Note that in this particular case, the class of the title tag could be omitted, since there is only one h4 tag inside the widget. Hackadelic Widget Voodoo uses CSS-style selectors to refer to widgets and titles. Some possible selectors for the above widget are:
| Sample Wigdet Selectors | Sample Title Selectors |
|---|---|
1. .widget 2. div.widget 3. #sidebar .widget 4. #sidebar div.widget |
1. .widgettitle 2. h4.widgettitle 3. h4 |
Most themes satisfy these criteria by themselves. Some though, (like mine,) do not, and you’ll need to tweak them a bit to make the voodoo work.
Tweaking Ill-Bred Themes
Go to you theme directory, open the file functions.php, and search for the code that looks like this:1
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
The values in the parameter array (that is, the entries to the right of ‘=>’) may differ. Sometimes, before_widget and after_widget are empty. That is, they look sort of like this: '..._widget' => ''.
Some themes use the alternative “plural” function, register_sidebars. The relevant parameters are the same though.
Well-forming Widget Tags
Make sure before_widget and after_widget specify a tag with a class. Look at the value for before_widget. If it already has a tag, but no attribute class, add the attribute class=”widget”. The code should now look somewhat like this:
'before_widget' => '<li class="widget">',
'after_widget' => '</li>',
If there was no wrapping element at all (indicated by empty values – as it was the case with my theme):
'before_widget' => '',
'after_widget' => '',
then it’s safest to specify a <div> tag, like this:
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
Well-forming Title Tags
Make sure before_title and after_title specify a tag with a class. It should look somewhat like this:
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
Now you will probably still see no visible effect, but clicking on your widget titles should collapse the widget (or expand, if it was collapsed).
You still need to style your newly clickable widgets, if you want to change their appearance.
Adding Widget IDs
You need to perform this step only if you want to auto-collapse individual widgets.
Find the before_widget parameter, and see if it includes an id attribute. It should look somewhat like this:
'before_widget' => '<li class="widget" id="%1$s">',
The scary-looking sequence “%1$s” tells WordPress to include the internal widget ID in the HTML. If it isn’t there, add it, and you are ready to go.
- The code below registers a sidebar, and tells WordPress what to output before and after a widget and its title are rendered. This is so the theme can specify the HTML tags to wrap individual widgets as a whole (before_widget and after_widget), as well as their titles (before_title and after_title). [↩]
Hi, your widget is working fine. But .. I really need a plugin with collapsible pages navigation and with your plugin installed I have not found one that works. Do you know of any that work?
What exactly do you mean by “collapsible pages navigation”?
Please help get VOODOO to work with an Artisteer 2.5 theme. I would like to collapse certain widgets on my site be default. This is the code from the page that has one of the widgets:
Member Login
here is the info the Widget Voodoo says:
Your current theme’s sidebar data:
‘name’ => ‘Primary Widget Area’
‘id’ => ‘primary-widget-area’
‘description’ => ‘This is the default sidebar, visible on 2 or 3 column layouts. If no widgets are active, the default theme widgets will be displayed instead.’
‘before_widget’ => ‘%1$swidget %2$s‘
‘after_widget’ => ‘‘
‘before_title’ => ‘‘
‘after_title’ => ‘‘
I am stumped as to what to adjust to make this plugin work with my theme. Any Ideas?
Thanks.
Rob, analyzing and removing theme conflicts is not directly a piece of cake, especially with custom themes (I regard Arteseer themes as custom themes). In order to do it, I’d have to log into your account and do some analysis there. I can’t provide that kind of service for free. If free is not the only option for you, feel free to contact me.
I’m having the exact same problem as Paula. In chrome it’s perfect. Firefox… white page. Did yall ever figure it out?
Hello, The plugin is great, including it’s name. I am setting up a site using the same theme as http://www.ecochamber.com/ which uses this plugin, but I can not get it to work. Here is what functions.php has, I added the but when I add anything about before widget and after widget, I get a blank page and have to take out the code.
if ( function_exists(‘register_sidebars’) )
register_sidebar(array(‘name’=>’Sidebar Top’,'before_title’=>”,’after_title’=>”));
register_sidebar(array(‘name’=>’Sidebar Bottom Left’,'before_title’=>”,’after_title’=>”));
register_sidebar(array(‘name’=>’Sidebar Bottom Right’,'before_title’=>”,’after_title’=>”));
register_sidebar(array(‘name’=>’468×60 Header Banner’,'before_title’=>”,’after_title’=>”));
This is what the Widget voodoo Settings say
‘name’ => ‘Sidebar Top’
‘id’ => ‘sidebar-1′
‘description’ => ”
‘before_widget’ => ”
‘after_widget’ => ‘ ‘
‘before_title’ => ”
‘after_title’ => ”
I’m not sure what I’m missing or what I need to do to get this to work and I’d appreciate any help you can give. Thank you!
Helen, I can’t tell what the problem is without having a closer look at your theme/website. if you think me checking out your theme and setting things up for you may be worthwhile to you, then contact me.
mmm… Ok, I’ll check again the changes I made on the theme’s function.php file, maybe I missed something. if I don’t find anything I’ll email you a link to my Beta Site for you to see what it is doing.
Thank you again for your help.
Sorry for the late late reply. It does everything it’s supposed to do using IE. With Firefox, the page never fully loads and you don’t see any of the images or rendering. all you see is a white page with some links (not all of them) highlighted in blue and underline.
Paula, sorry, still can’t imagine what your problem can be. Usually it’s the other way around: Things work with FF, but not with IE. And I’m developing the code with FF on, so it should work.
This is a great plugin. I got it to work, but it breaks my site when I view with Firefox. It works fine with IE and chrome.
Thank you
Paula, any details?
I figured out that the blog wasn’t loading because the ShareThis plugin was conflicting with it. I don’t know exactly how; I guess it’s because both plugins put a little custom javascript in the header and they won’t load together or something? Widget Voodoo does put custom code in the header, right?
Unfortunately, at least for now it means I can’t use Widget Voodoo. I may look into other bookmarking/sharing plugins to possibly use instead of ShareThis. Or maybe at some point I’ll have time to figure out how to make the two plugins play nice with each other. If you have any ideas, post them and I’ll check back here to see.
Hi Derek,
you could check whether there are any assignments to
String.prototype.formatin the other plugin’s javascript. That’s the only source of conflict I can think of right now.Hi,
Ooh, what happened to Malila? Did she never reply? I ask because I use Tarski as well, and I’ve been trying to get Widget Voodoo working this morning.
I’m making progress… or at least, I’ve got it so that it doesn’t prevent my blog from loading anymore
. However, the widget titles still aren’t clickable, and selectors I list in the plugin settings don’t auto-collapse.
Tarski has four areas where widgets can go, but they all have identical before_widget, after_widget, before_title and after_title settings, as follows:
before_widget => div id="%1$s" class="widget %2$s"
after_widget => /div
before_title => h3 class="widgettitle" //I added this class, per the tweaking manual
after_title => /h3
For the plugin’s Widget Selector setting, I first put just “.widget” — but that made it so the blog wouldn’t load. I fixed that by changing it to “.widget %2$s”.
For the title selector, of course, I put “.widgettitle”. I’ve also tried “h3.widgettitle”, but there was no change.
Any help will be greatly appreciated! Thanks!
p.s. one other thing: on your main Widget voodoo page under “Styling”, your sample CSS isn’t showing up. I just see “[SECTION 'Hackadelic Widget Voodoo' NOT FOUND]“.
Hi Derek,
thanks for the hint on the sample CSS not showing. I’m working to fix it.
About your issue: With “.widget %2$s” you didn’t “fix” the problem, just prevented WidgetVoodoo from doing its job. “.widget” would have been the correct setting. Why it stopped your blog from loading is strange, and apparently a problem with the Tarski theme.
Hi,
Thanks for the nice plugin! I am using Tarski (http://tarskitheme.com/), which defines class=”widget %2$s” in file called launcher.php. While Voodoo does give the correct suggestions for auto-collapsed widgets added to my sidebar, it still says “Could not sufficiently derive suggestions from your current configuration.”. Any thoughts would be greatly appreciated. Thank you!
Malila, I’ll check it out if you send me the exact complete clauses for before_widget, after_widget, before_title and after_title
i dont understand wht u r saying but your plugin is not working for me on http://www.dadyal.info
Naeem,
I think your theme may be one of those unlucky themes that are inadequately designed (from a code/HTML/CSS point of view), and hence might need some tweaking. I tried my best to describe the tweaking process as simple as it can get, but you still need some basic understanding about HTML and CSS. If you don’t understand the instructions, then, with all due respect, I’d suggest you ask somebody to help you with tweaking your theme. (You could ask me, too. I’d need access to your theme files.)