Widget Voodoo 1.0.6
A quick note to Hackadelic Widget Voodoo users:
Here is a maintenance release that fixes an issue related to some rare widgets with uncommon HTML layout, where titles were collapsed as well. Get it as usual at wordpress.org.
Widget Voodoo 1.0.5 With WPMU Compatibility
Originally, Widget Voodoo wasn’t implemented with WordPress MU in mind. In response to an issue report in the forums, I’ve overhauled the way settings have been stored (the main cause of the issue on WPMU).
As a result, settings handling is more robust and more secure now. And, Widget Voodoo now works on WP and WPMU equally.
Grab the new version at wordpress.org, and have fun with it.
Widget Voodoo Release 1.0.4 Supports Variable Title Styling
Widget Voodoo morphs sidebar widgets into stylishly collapsible objects. The new release goes one step further in “stylishness” and adds support to variable styling of widget titles depending on the collapsed/expanded state of the widget.
A live example is right here on my blog – look for the “Archives” widget in my left sidebar.
Go ahead, get the newest version at wordpress.org. Then grab the CSS used to style it at the plugin homepage.
Have fun! And a happy Easter to everybody!
Widget Voodoo Release 1.0.3
The new Widget Voodoo release, 1.0.3, fixes a small (but annoying) misbehavior with the Tag Cloud widget.
Please update to the newest version to avoid future (bad) surprises.
Read more >>
Widget Voodoo 1.0.2 Release
A minor update of Hackadelic Widget Voodoo is out. It fixes an issue with the Tag Cloud widget (and probably with others, too).
At the same time, I’ve corrected an “impurity” in the assignment of CSS classes, where the “collapsible” was attached to the title, instead the widget itself. Please change your CSS clauses Read more >>
Widget Voodoo Configuration Tutorial Reanimation Attempt
According to feedback I’ve received, viewing the Widget Voodoo Configuration Tutorial was apparently problematic. I’m not even sure if anybody at all could watch the screencast, except myself. (I’m afraid that could well have been the case, though only view people complained, compared to the number of visitors.)
While the reasons for the issue remain a mystery, I decided to move the screencast away from googlecode, where I used to host it before.
Dear visitors, I’ll ask you for a favor. Please drop me a note whether you can watch the screencast or not. Thank you for your help.
Widget Voodoo CSS Selectors Power
I’m writing this post with a clear sense of pride about having chosen CSS selectors as “configuration syntax” for Widget Voodoo. The power and flexibility of the approach over other other, more limitting approaches is amazing.
Thank to this power, it was a “piece of cake” to resolve a help request on how to collapse al widgets at oncel I’ve got recently.
Widget Voodoo PlugIn Released
I’m proud to present the first public release of the “voodoo” that recently made all my sidebar widgets collapsible.
The plugin homepage gives a thorough overview of the features offered.
Downloads as usual at wordpress.org (as soon as they update the page).
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.



