Perchè se stai male pensi sia colpa mia?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:

  1. Unpack the plugin archive into wp-content/plugins.
  2. 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.

71 Responses to “Widget Voodoo”

  1. Nice to see you releasing this plugin. I use yours now, i think it’s better and less intrusive.

    I notice that you collapse the widget div inside the ul. which causes an incompatibility with my style. The best is you try to collapse some of my widget, you’ll see. not all of the widget is hidden.

    I think with DOM it should not be too much of a problem to hide the whole ul, wouldn’t it be preferable ?

    Anyway thanks for this pluggin, the backend is a huge improvement compared to the other plugin i used.

  2. Daniel, I’m glad to hear you like it.

    I’ve just checked in a version that fixes your issue, I think.

  3. Looks interesting, I will have to try it out. But I wanted to let you know, in Firefox 3, the tutorial on configuration gives a blank page. Whatever flash player you are using is not playing well with mine.

  4. Tom, I’m puzzled. I also use FF3, and it looks fine here ?!?

  5. Indeed it does, thanks a lot.

  6. I’m using FF 3.1 and I got the same issue. You cannot rely on Flash XD

  7. Do you have any suggestions on the Flash issue? Anybody?

  8. Afraid not. It can be a real pain trying to watch things on the web these days.

  9. I would like my lists closed when the webpage opens. Is there a way to maneuver the widget accordingly?

  10. Gretchen, in the Widget Voodoo settings, go to the field “Auto-collapsed Widgets Selector”, and enter the same value as in the field “Widget Selector”, whatever it is.

  11. Just found this post after I commented on the other.

    Sorry ;)

    Anywho, I see you’ve basically done almost everything I already said in my other comment.

    I have one criticism. I would love to see you incorporate what I did with my version, meaning using of a cookie to remember the state. I see you’ve used jQuery with yours, meaning it should be as simple as mine was to do.

    Without some sort of a memory, they aren’t really collapsible when you load the page again and they are back the way they were.

    The one thing this plugin isn’t is what I mentioned in the last post as being too specific. Don’t think “widget” think element, use the real voodoo of CSS selectors to make anything collapse, and using JSON and a cookie, it will remember the state of anything on any page as well.

    Concerning you Flash screen cast:
    I assume using google code to host it is your problem.
    Simply go to this URL to see what I mean.

    http://hackadelic.googlecode.c.....ut-cfg.swf

    The google server forces the resource to be merely an attachment.
    It won’t work as an embedded object if the http headers are calling it an attachment.

  12. Toodles, thanks for your input, but… why are you calling me “Anywho”? ;-)

    Especially, thanks for the hint on the Flash issue. I actually considered that myself (as I know that google code delivers all items as attachments), but I thought, then I wouldn’t be able to view that page myself (and I’ve been viewing it from different computers, with different browsers – FF2, FF3, IE6, IE7). Any thoughts on this?

    Thanks for your criticism, too. I haven’t included persistent state memory on purpose, because I wanted the shape of a website to be determined by the webmaster, and I also see several use-cases where remembering wouldn’t be a feature. I guess the next version will include a concept that covers all, or most of these use-cases.

    Thanks for explaining to me HTML, CSS and jQuery (also in your other comment), but I know them pretty well myself. :P

    I do not share your view that the plugin is too specific. You are right in that the implementation mechanism is generic enough to inveigle into thinking “the whole world is collapsible”. (It is not that I didn’t think it myself. I’ve been there, and passed that point.) Anyway, if I was doing this for pure HTML, where you basically see all elements while you are editing it, I’d agree. But with WordPress, not only you don’t see all elements, but with all the filters, shortcodes and whatnot, it is practically impossible to tell. Hence the real feature (from a users, not coders perspective) is the assistance (s)he can get with selecting the right components. And that differs from component type to component type. Even worse, it’s theme-dependent, too. So no, I don’t think I’ll make this an all singing and dancing million-gadget (unless, of course, I find a way how to fit all the singing and dancing into a coherent whole).

    Update: I’ve been to your site, and I now understand where your suggestions come from – they would cover your use-case well. But I have to take other use-cases into consideration as well.

  13. Sorry,

    I realize I didn’t even leave a compliment!

    We all need them ;)

    Good job on this, interested in where it goes.
    I’m sure you notice your stats on the directory that a lot of other people are too.

    I don’t know why, but I just like jQuery, and there really isn’t a solid reason for it from my perspective. It’s just preference I guess. I am curious why you chose jQuery though.

  14. Sorry again, should have included this in my last comment, edit if you’d like.

    I am not an expert or a member of goodlecode, so I only seeing the http headers from my perspective.

    The only thing I can suggest you to test is, clear your browser data, cookies, temp files, etc… Then basically go to your link logged out of your google account and with a clean browser. My theory is to see if google somehow recognizes the author and delivers the resource differently. If it is based on IP, then I’m not sure where to go from there other than to go through a proxy. If none if this works it might be some setting you have on your browsers, or connection? Maybe even with how you’ve compiled the swf? I do think it is googlecode, but it could be a combination of things.

    Overall I’d just suggest posting it to your blog specifically, or with a video service.

    My problem is that I also tested in all browsers, and in all browsers it isn’t embedding properly, and it is an attachment that downloads.

  15. Mmm, Jim (or Toodles, if you prefer), thanks! :) Also for your effort to provide an explanation on the flash issue. But I’ve checked all that – not least by trying to view the page from another computer, from which I never logged in into google. (Interesting that I had the same crazy theory that google recognizes the author. Which brings me to the idea if it’s not the PC, but my router IP that gives them the hint???)

    Never mind, I’ll just move the flash file elsewhere.

    Any suggestions which video service I can use? I originally tried YouTube, but it didn’t seem to like SWF, so I ended up with just storing the file on googlecode.

    Anyhow… When I move it, I won’t notice a difference. I’d appreciate if you folks out there can tell me if it worked. (I’ll see to it that it’s moved by Saturday.) Thanks.

    On to jQuery: I like it because of it’s powerful and concise, expressive programming model. And yes, it just “feels” good. It does have its shortcomings, and bugs, but then the others (mootools, prototype) have theirs, too.

    Update: You say you like jQuery, though you can’t think of any solid reason why. Well, there is little solid reason for WordPress, too, if you ask me. There are much more sophisticated platforms out there, but it nonetheless seems to be the choice #1 for blogs. There also is no solid reason to program in C, but it’s still – even in the 21st century – the most widely used programming language (just saw the stats on ohloh). People like to think of themselves as rational beings, but in fact they make most of their decisions based on a feeling. But what it is that makes some software “feel” good is a mystery to me. (If I knew what it was, I would be a very rich man.)

  16. I liked the powerful and concise answer ;)

    But since you bring up philosophy, I know we are all developers AND designers at heart so I will mention this…

    Ever heard of the Golden Ratio? If not…
    Here it is applied to practical web design, there’s plenty of links there to more info, wiki an all…
    http://www.vcarrer.com/2009/02/golden-grid.html

    You can’t deny, it’s just good CSS, that “feels” nice. (maybe not how it is written, but this is a visual example)

    Now, what I was thinking, and really always have, is that if this “concept” can be applied to basically anything, then maybe it can also somehow be applied to software functionality as well as the visual interface. Maybe the proportion of the amount of automation to the amount of customization, however that can be measured?
    Maybe in scripting, it can be the amount amount of processing to the amount of code. Think of why most of the time benchmarks are important to us all, and why sometimes they are not.

    I realize this is kind of going out of scope for the commenting on this particular post, just an interesting discussion is all.
    I’ll stop here though.

  17. Jim, this is definitely one of the most interesting responses I’ve ever got on my blog. (Not least because it caters to my technosopher’s soul.)

    I’ll have to read through the reference you made, and it may well happen that I write a post about it – and therewith create an appropriate place to continue this discussion. :-)

    (I make no promises though.)

  18. I found … some sort of bug. When I turn on WidgetVoodoo, my tag cloud displays, but it displays everything with the same name as the first tag. All the links work properly, they just have the same name. Internet Explorer (8 RC), which doesn’t do sliding displays the tag cloud properly. Unfortunately putting an empty name on the widget just makes it revert to “tags” so WidgetVoodoo still affects it.

    Cheers! I’m still gonna use it, I don’t think people use the tag cloud widget all that much anyway.

  19. Thanks for the hint, saintneko. I do have a guess where the issue comes from, I’ll check it out.

  20. Saintneko, try the brand new 1.0.2 version. You’re issue should be gone :)

  21. Hey, thanks for that plugin, it’s one of those simple yet very effective and needed details! I just have a problem though. If you go on my site you see it in action on “Archives” and “Autres blogs d’intérêt”. However, it doesn’t work for the tag cloud below. Would it be because the first 2 have a list inside (after the title tag), but the clouds don’t?

    Thanks!

  22. Charles, I’m glad you like the plugin.

    The problem with your tag cloud is that it doesn’t have any wrapper element for it’s body. In such cases Widget Voodoo tries to wrap the body itself, but the jQuery function that does the job seems to not work well in all contexts. (Unfortunately, it also behaves differently with each jQuery version.) I fixed a similar problem before, but it seems to recur in different contexts (like yours). I’ll see what I can do to circumvent it.

  23. Hi, thanks for the quick reply!

    Yes, first I thought that the template I’m using was not hooking to the tag_cloud widget properly. Turns out that the native wp one is like that. So I modified the theme’s widgets.php to include a hook to tag_cloud, and it’s working now. Took me a while, this is my first look into wp progr…

  24. Charles, I’ve fixed the issue, and will be releasing an update soon (so you won’t need to worry about a WP update overwriting your changes). Stay tuned. :)

  25. Hey, thanks for the quick update :)

    I updated right away, but since I had already done the change on my template code I can’t see the result… except that its basic behaviour has changed: at the begining of the page load all the widgets specified to start closed are expanded and quickly close. Seems like a case of display:none not done early enough?

  26. Hi

    Love your widget, always wanted a BBC style website for my users, given the amount of sidebar widgets I have. What I want to know is, how can I add an icon that points down to indicate to the user that they can collapse the widget and an icon to indicate that the widget is expandable?

    Thanks
    Al

  27. Hi

    Oh and how can we make it memorise or store the preference setting of the user?

    Al

  28. Hi Al,

    state persistence was not planed initially as the intention was to leave control of which widgets are shown and which not in the hands of the site owner. An example is ads in the sidebar, but also post listings of the “featured posts” kind. Basically anything that a site owner sets up with SEO (featured posts in the side bar are a way to direct SEO juice to posts intended as “landing spots”), or monetization in mind. That’s the reason I still hesitate a bit about this, though the implementation wouldn’t be too hard at all. Finally I think I’ll add an option so that people can decide for themselves. Probably in the 1.1 version.

    The thing with the arrow is a bit difficult now, but it’s a good hint, and quite easy to provide a foundation for it code-wise. Look out for a 1.0.4 release, when I’ll also explain the how-to of the matter. :)

  29. Charles, see my other response over at Widget Voodoo Release 1.0.3

  30. Works great, thank you


  31. Hi Al,

    state persistence was not planed initially as the intention was to leave control of which widgets are shown and which not in the hands of the site owner. An example is ads in the sidebar, but also post listings of the “featured posts” kind. Basically anything that a site owner sets up with SEO (featured posts in the side bar are a way to direct SEO juice to posts intended as “landing spots”), or monetization in mind. That’s the reason I still hesitate a bit about this, though the implementation wouldn’t be too hard at all. Finally I think I’ll add an option so that people can decide for themselves. Probably in the 1.1 version.

    The thing with the arrow is a bit difficult now, but it’s a good hint, and quite easy to provide a foundation for it code-wise. Look out for a 1.0.4 release, when I’ll also explain the how-to of the matter.

    I’ll be looking forward to that… I’ve installed the latest and I love it! having a stored cookie to remember states would do well for me too… cheers.

  32. hey Hackadelic,
    I’m back with a problem… in your Widget Voodoo plugin’s option page there’s the ability for a widget or many be collapsed on page load.
    I’ve been trying to get this to work with different uses and I’ve exhausted my ideas. Can you check my website and see if you can see anything that might interfere with this function? or is this a browser bug?

    Thanks… I absolutely love your plugins.

  33. Jensilaedi, it’s your theme. Your widgets are missing the id attribute in the generated HTML.

  34. hey ovidiu here from the wordpress forums. check again: adi.zice.ro I deactivated your plugin now so you can check it out again.

  35. Ovidiu, the development version should fix your issue.

  36. works perfect, what was the issue or is it to technical?

  37. Ovidiu, without getting too technical: The appointed widgets have an… hmm… well, uncommon HTML element nesting structure for a widget. I could change my code to cover those cases too, but without adding special cases to it. Now the code is more generic, which is an overall improvement.

  38. Hi, nice plugin.
    Altough I need help with in styling my sidebar widget theme.
    Can you help me with this?
    If for you is ok I can transfer my theme files.

    Thanks in advanced,
    PACO

  39. Hi Paco,

    sure, I do offer this kind of service.

  40. Hi Hackadelic,
    Very nice Widget plug-in, looking for this for some time now, works great with the default WP theme!
    I’m more of a designer than a programmer myself, and I see that you have the Artisteer banners on your website and was wondering if there was a known implementation for a Artisteer generated theme?

    Thanks a lot!
    Chiel

  41. Chiel, Widget Voodoo works with (almost) any theme, if you configure it properly.

  42. Good to hear!
    Only I have no idea which id to add to the “Auto-collapsed Widgets Selector” or what css/html code to add to my theme…

    Hopefully you can give me some directions.

    At this moment I am testing your plug-in on http://www.vitruviusstraat.nl/

    A typical Artisteer v2.2 widget code is the following:

  43. sorry, can’t seem to send the code along with my message…

  44. Chiel, it seems your Artiseer theme doesn’t give the widgets IDs of own. I don’t know if you can make Artiseer generate the IDs for you, but perhaps you’d like to check out my Widget Voodoo theme tweaking manual anyway.

  45. Hi, thanks for your input!!!
    Indeed I have seen that Artisteer generates mostly class styles, there is no option in this program to do otherwise. I will look in to your manual, hopefully it is possible to ‘wrap’ a widget block in a new div and assign a id that works with your plugin, or is this wishful thinking…

  46. Chiel, could work. Personally I’d rather just change the register_sidebars call as described in the theme tweaking manual, instead of wrapping the widgets in extra DIVs.

  47. great plugin!
    question: is there any way of defining different styles for collapsed and non-collapsed widgets?
    I’d like to have a different background for the header depending on the widget’s state (e.g. a background with little arrows pointing either up or down). I noticed that you defined the class “collapsed”, but I can’t figure out how to style this class in the css-file.
    Thanks!

  48. Kashmir, Widget Voodoo supports variable styling since version 1.0.4 already. I modified the sample CSS code above to include the relevant variable styling clauses.

  49. Thanks for the quick reply!
    It still doesn’t work for me.
    Your Archive-widget doesn’t work for me either: it only changes background images on hover, but makes no difference between collapsed and non-collapsed (I tried it in Chrome, Firefox, IE8 and Safari).
    But nevermind, I’ll just use a “+/-” button instead.

  50. Hi Kashmir (or Bill Gates???),

    you are right! Sorry, I made a mistake with the sampe CSS. Correcting it… Done! Check it out now.

  51. Yes, it works perfectly now!
    Thanks!

  52. Hi from germany,

    nice tools your sliding content and your voodoo. Thanks!

    I used the voodoo in oure Page and had a little Problem with the google Translator Plugin.

    After activting google translator in the Sidebar, i get a blank screen and i can´t find any solution.

    The next thing is an Problem with the Sliding Tabs for the Sidebar. Here i get no blank screnn but an very bugy screen.

    Thanks

    Thomas

  53. Thomas, it may be that the two plugins conflict (that happens sometimes). It may be that the actual problem is something else that’s not very obvious (that happens too). I can’t tell what it is w/o an URL/web page where the problem manifests. (But even with one I’d have hardly enough time at the moment for any deeper analysis. However if you are interested in turning this into a project, feel free to contact me.)

  54. Brill plug-in. I only have one issue. I am using WP 2.9 and now all the widgets appear collapsed regardless of whether they are in the Auto-collapsed Widgets Selector or not. They all drop down when selected Any suggestions

  55. Steve, on the URL you provided, things look good to me, so I guess you worked it out, didn’t you?

  56. Love the plug-in! One issue, though. I can’t seem to get the “selectable” option to work. I’ve tried using widgettitle, h2.widegttitle, h2, and a number of variations on this theme. Tried in FF and IE (multiple versions) to see if it was just not working in what I’m using, but the clickability feature just isn’t working.

    Any suggestions?
    Thanks!!

  57. Justyn, the site looks good to me. The widgets are all auto-collapsed, and expand when clicked.

  58. Yep, the widgets are working in that regard, but they don’t behave like buttons. I’m having problems with the mouse changing from the default to a hand cursor when hovering over the title of the sidebar widget (such as when you hover over a link). Yours work great. I just can’t get mine to do it :(

    Thoughts?

  59. Fixed!

    My theme was a bit jacked. I had to manually add the CSS:


    .sidebarsB h2:hover {
    cursor: pointer;
    }

    Where sidebarsB is my actual class. For some reason widgettitle just wasn’t calling the pointer even though was clearly the class for my widget headers. Weird, but fixed.

    Thanks again for a cool, functional tool :)

  60. Hello,

    I am quite new to Wordpress and I am building a new site using your plugin.

    I got the plugin to work for my widgets at the side but I am not sure how to restyle them like you said. I know you gave the code above but I am not sure where to really put this in my theme, can you help?

  61. BMD, I recommend the MyCSS plugin. Once installed, make sure you manually create a file named my.css in the plugin directory (which may be empty). After that you can edit the file contents in the dashboard, and simply copy and paste the CSS code.

  62. Hi, I’ve been using widgetvoodoo in conjunction with MailPress for a while. When MP was sending a subscription email, it was always sending it twice. While the developper helped me with this, we discovered that when I disable widgetvoodoo the problem disapears. Would it be possible that you would be loading a copy of jQuery on top of a previously loaded one? He seems to think that a double load of jQuery is what makes it send it twice.

  63. Charles, so he says it’s Widget Voodoo’s fault? :roll:

    God, I’m so fed up with “developers” who blame it on others before cleaning their own house. (You think that’s a disproportionate statement? Well I have good reasons to make it. Read on…)

    The only way to load jQuery twice is to bypass the WordPress standards for enqueueing scripts (wp_enqueue_script() and co.) and insert script inclusion code directly into the generated HTML.

    :idea: WidgetVoodoo does no such thing. It adheres to the standards and uses wp_enqueue_script exclusively.

    On the other hand, I searched the MailPress plugin for direct jQuery inclusions – and found two. Two!

    Need I say anything else? :?

  64. Hi,

    First off I want to say no no, the other dev didn’t blame your extension. He just realized that jquery was loaded twice and suggested I make sure I check his “manual exclusion” of loading jquery (but you’re right, it should not be a manual thing since we don’t necessarily know it’s loaded by another extension, and of course it should be done the way you’re doing it). Since I had already checked the checkbox, I went out chasing if it could come from somewhere else. I saw that by disabling widjetvoodoo the problem disappeared (but not if I disable sliding notes, fyi). So that’s how I came upon the idea that it could come from your extension.

    Are these the loads you’re talking about for MP:


    (geotag.php)
    if (!isset($options['jQuery'])) $js .= "\n";

    (MP_Widget.Class.php)
    if (!$options['jq']) echo "\n";

    If so, in case his manual exclusion didn’t work, I commented them out both with no change (still double emails with both extensions enabled).

  65. oups the commenting engine cut off some of the code… maybe that way will pass…


    (geotag.php)
    if (!isset($options['jQuery'])) $js .= "";

    (MP_Widget.Class.php)
    if (!$options['jq']) echo "";

  66. nope… anyways, inside the “” is the string construction to insert the script tag for jquery.js

  67. Charles, all my plugins load jQuery the proper way. I’m not familiar with the internals of the other plugins, so I can’t say what’s going on there. In case of MP, I did a quick search and found the wrong inclusion patterns, but that’s all I can tell.

    On the other hand, it seems a bit strange that jQuery, an UI component that is executed in the browser, interferes by its mere presence with the emailing process, which usually is a back-end process, executed on the server. But I don’t want to speculate on this.

  68. Wow, stunning plugin. Well done that man!

    : D

Trackbacks/Pingbacks

  1. Widget Voodoo PlugIn Released | Hackadelic
  2. Hackadelic Widget Voodoo Plugin | WordPress Plugins Database - WordPressPluginsDatabase.com
  3. Widget Voodoo 1.0.5 With WPMU Compatibility | Hackadelic

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please ignore these 2 fields: