Widget Voodoo
Here’s the fourth in series of Hackadelic Plugins: Hackadelic Widget Voodoo. It can morph your sidebar widgets into cool, collapsible, AJAX-type citizens.
Though merely more but a case study (yet), it already does a good job for me (see it live in action in my sidebars). I hope it will for you, too.
Download Hackadelic Widget Voodoo
Recent Releases
Overview
- After successful installation and configuration, all your widgets will be collapsible with a click on their title.
- You can specify auto-collapsed widgets.
- You can style pretty much everything via CSS. (That’s what I did here, too.) See chapter “Styling” for details.
- Preconditions for operation are highly theme-specific, but you can adapt the plugin to your theme without touching theme files – at least in most cases.
- A probably pretty unique feature: The back-end analyzes your theme and other configuration to provide sensible setting suggestions. In most cases, you won’t even have to look at your theme’s files.
Installation
The first stage is standard procedure, as for any plugin:
- Unpack the plugin archive into wp-content/plugins.
- Activate the plugin.
But, you probably won’t see any effect yet now!
Proceed with configuration.
Configuration
After installing, you need to tell the plugin what your widgets are. I’ve prepared a little Tutorial on Widget Voodoo Configuration Basics. Check it out before proceeding.
Under some circumstances, you’ll need to tweak your theme a bit in order to make the “widget voodoo” work. The Widget Voodoo Theme Tweaking Manual provides detailed instructions on that.
Now you would probably still see no visible effect, but clicking on your widget titles should collapse the widget (or expand it, if it was collapsed) Now we step on into making the whole look fancy.
Styling
As usuall, there is much you can do to adjust the appearence to your likings. I use the following CSS to style up my widget titles:
.widget.collapsible .widgettitle {
text-align: center;
height: 24px;
-moz-border-radius: .6em; -webkit-border-radius: .6em;
cursor: pointer;
}
#sidebar-left .widget.collapsible .widgettitle {
background: url(/i/bg/widget-title-bg-open.png) top left no-repeat;
margin: 1em 2px .25em -6px;
}
#sidebar-left .widget.collapsible .widgettitle:hover,
#sidebar-left .widget.collapsible .widgettitle.collapsed:hover {
background: url(/i/bg/widget-title-bg-hover.png) top left no-repeat;
}
#sidebar-left .widget.collapsible .widgettitle.collapsed {
background: url(/i/bg/widget-title-bg-closed.png) top left no-repeat;
}
#sidebar-right .widget.collapsible .widgettitle {
background: url(/i/bg/sidebar-button-bg-1.png);
margin: 1em -14px .25em -12px;
}
#sidebar-right .widget.collapsible .widgettitle:hover {
background: url(/i/bg/sidebar-button-bg-2.png);
}You already know widget and widgettitle from the configuration. Here’s what the clauses do:
- The first clause styles widgets titles that are collapsible.
- The second makes collapsible widget titles change when the mouse is over them, to indicate “clickability”.
- The third denotes the widget body – in case you want to style collapsible widget bodies differently then static. (I didn’t, obviously.)
- The fourth and the fifth individually fine-tune the styling for the left and right bar, respectively .
You are welcome to take the above CSS as a starting point for your tuning.
Limitations
Only real widgets with a non-empty title are affected. Widgets with no title will remain static (until you give them a title). Also, “pseudo-widgets” that are built into the sidebar by default (that is what you see before adding any widgets) are not affected, either.
The RSS syndication widget doesn’t lend itself well for this. The way it displays its title makes it difficult to style appropriately.
The configuration is, admittedly, somewhat challenging, as it may require a slight modification of theme code. (Ugly, I know. If you have a better idea, let me know!)
Up-shot
As I’ve written at the beginning, this plugin is the result of a case study. I’m aware that a configuration procedure that may involve changing the theme is not for the faint-hearted. This is due to the way how WordPress processes widgets – or more precisely, its lack of an enforced common structural standard for widgets. IMO the proposed solution, though not quite perfect, is more than a good compromise. And again: It already does a good job for me, so I hope it will for you, too.
