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
[toc class=toc-right]
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.
Widgets Mass-Collapse
Recently, saintneko asked me whether it is better to implement a certain functionality as a plugin, or to theme it. The functionality in question is making sidebar widgets collapsible.
A seemingly simple question, but, as is often the case with “simple” questions, one with no simple answer at all.
Sliding Notes HowTo’s – Adding An Image To The Button
The other day I posted about the side-effect when the slider title is formated directly, therewith effectively inserting HTML tags into it. Instead I suggested using CSS to format the title.
CSS also comes in handy for adding an image» to the slider button.
This is how it is done:
Read more >>
Hackadelic Series 1.1.1 Bugfix Release: Uncle Tom’s Cabin
This release is a quick fix for a silly bug in the front-end, due to which the series drop-down menu had erroneously links to included unpublished posts (clicking on which would have resulted in a “404 page not found” error for a user with insufficient privileges to view such posts – that is, non-admin users basically).
Now unpublished posts are hidden from “normal” visitors, and shown in italic to users with edit privilege.
The back-end still shows every entry in a series, but I changed the formatting to match the above semantics.
Naturally, this immediately leads to the question: What about multi-user blogs, where not every user may be given permission to adjust custom fields. I will address this in a future release.
Sliding Notes Self Aid – Overcoming Theme Footer Defects
Recently, I’ve posted about a theme defect in PassionDuo and other DailyBlogTips’ themes, and identified their failure to trigger the wp_footer action as the real cause of malfunction of plugins that depend on it, like Sliding Notes.
As it turns out, there’s a number of other themes out there which apparently have the same defect. Read more >>
Hackadelic Series Streamlined
An updated version of Hackadelic Series is out, featuring an improved and polished back-end. Most importantly, the potentially unsafe meta-key renaming operation has been revised in this version.
Download it as usually at wordpress.org.
If there’s a feature you are missing, and you’d like to see it in a future version of Hackadelic Series, feel free to drop me a note.
Sliding Notes 1.4 – Shadowchaser Release
I’m announcing a new release of my Sliding Notes plugin. It resolves a CSS conflict with Shadowbox JS , another popular WordPress plugin (hence the release name). At the same time, with this release I’m relieving the user from housekeeping the CSS parts that are vital to Sliding Notes function, but unrelated to its visual appearance.
Hackadelic Series 1.0.1 Bugfix Release
Just a short info: Today I released a new version of Hackadelic Series. It fixes a meta-key renaming issue that Tom reported to me.
PassionDuo Theme Defect – And How To Fix It
Recently, I’ve been investigating a strange effect with Sliding Notes: On one site, the notes just did not open when clicked.
A view at the HTML of the aforementioned site revealed that the whole plugin-generated footer section – that is, the JavaScript supplied by the plugin – wasn’t there! Whew! How’s that?
I digged a bit and tracked the cause of the trouble down to a misbehavior in the “PassionDuo” theme, a theme by DailyBlogTips. Read more >>
Hackadelic Series PlugIn, Arrr
Aye, me hearties, here’s my third WordPress plug-in: Hackadelic Series.
It is the consummation of an idea I gave a quick shot to back in December 2008, when I first had the need for something to support authoring series of posts, and my search revealed no functional lightweight solution for it.
Here is the history of the plug-in.
Read more >>
