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.
Thanks for writing this widget. I’ve been looking for something like this for a while. I’m a noob when it comes to CSS though and am having some problems. I’d like to have the widgets collapsed as the default and then click for revealing the widget content. How is that done?
The look I’m after is here: http://luellajune.com/ her collapsible widgets are at the bottom of her sidebar. How would I add the two clickable images for hide/reveal?
Thanks so much!!
hi,
i tried your widget. its real cool.
then i went ahead and got all the other ones as well.
I actually want a quotation for a widget that I need done.
My problem is :
Research on the wordpress website reveals, that any widget that is hosted on the wordpress repository has to be gpl.
I read your comments on another website
http://www.webmaster-source.com/2009/01/29/why-theyre-wrong-wordpress-plugins-shouldnt-have-to-be-gpl/
my question is : suppose i gave you the contract to develop my widget — i want to sell this with my own license , and i will be hosting it on my own website, however it will be using some of the hooks provided by wordpress(which is under gpl)
so in this case will it still have to be gpl compatible.
please get back to me, i will need a quotation, but the whole thing is meaningless unless i have clarification on this point.
Best Regards,
Bhargav Raut.
Bhargav, IANAL, but my oppinion is that there’s no plausible legal ground on which they can enforce their license model on work that is not derivative in nature – despite WP’s and FSF’s (naturally biased) point of view that merely using their API would make any work “derivative”). I’ve written about this a few times, and there are some interesting references to other writing on this topic – just search my blog for “GPL”.
Of course I could develop your plugin. If you are serious about it, feel free to post a description of what you need and your budget via my contact form, and I’ll respond within 48 hours or less.
Hi there,
a quick question: When I have let’s say 3 widget areas (sidebar, header and footer), can I make only 2 areas “dynamic” i.e collapsing and expanding with the plugin? At the moment I seem to be only able to either target all widgets on the whole site or all widgets of a specific sidebar, but not all widgets two sidebars i.e (footer and sidebar).
Hope that was kind of clear? I tried a comma separated list in “widgetselector”, but seemed to create chaos. Should that work?
Comma-separated list should work, but it needs to have correct CSS syntax, i.e.
sidebar-1-selector > widget-selector, sidebar-2-selector > widget-selectorHi
Great plugin! But I’m having an odd problem. My widget titles keep have disappeared! I’ve used the .widgettitle class for the tags, but as soon as I do this, the title is blank. The .widgettitle class is properly created as I can apply it to content and it works.
Also, the code wasn’t in the functions.php file. It was in a file called sidebar-init.php
/ Sidebar Widget
// Location: the sidebar
register_sidebar(array(
‘name’ => ‘Sidebar’,
‘id’ => ‘main-sidebar’,
‘description’ => __( ‘Located at the right side of pages.’),
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
with the style being:
.widgettitle h3 {
color:#151414;
font-size:26px;
line-height:1.2em;
margin-bottom:25px; }
I’ve even tried surrounding the tags with tags
‘before_title’ => ”,
‘after_title’ => ”,
Gives source code of:
Topics
IN the Widget Voodoo Settings page, I’m using .widgettitle or h3.widgettitle or div.widgettitle interchangeably as the Title Selector.
The widget collapses just as promised And the headers are in the source code (see code snippet taken from the source code of the outputted HTML page: (see below). Just don’t understand why the headers can’t be read.
Please help!
hi there. I am currently building a photography site for myself and am trying to hide most elements like exif info, comments, the excerpt, etc and want to only show these parts when a user clicks on it, something like you can see on these two examples: http://exposedplanet.com/ and here: http://photos.cheneel.com/index.php
do you think that can be done with this plugin? somehow?
Ovidiu, Widget Voodoo only affects widgets. If your information is packed in widgets, then it’ll do.
Otherwise, at least photos.cheneel.com seems like a typical Sliding Notes use case.
Hey, I don’t have any complaints or silly problems I want your help with, I just wanted to say thank you for this plugin. ^-^
No chance of this plugin working in WP 3.0.4 is there?
Scott, I regularly update my WP installation, and the plugin always worked.
Hackadelic
Thanks for your quick response. The code you suggested seems to deal with the auto collapsing feature. I have had success with excluding widgets from auto collapsing simply by not including a specific div id in the Auto-collapsed Widgets Selector input. What I am looking for is to exclude the search widget from being clickable altogether, similar to how your search box is setup. The theme I’m using assigns the same div class to every widget that is placed into the sidebar. And the div id is assigned using the wordpress “%1$s” code, so each widget id is unique.
I tried using a comma separated list in the Widget Selector input section to only list the div’s that I wanted to have the ability to collapse but that threw everything off. Is there any kind of workaround for this or do I need to make changes to the theme I’m using?
dfek, it’s easy: In the ‘Widget Selector’ option, you enter
.widget:not(#foo)(replacing ‘foo’ with your exact widget id).Great plug-in!!
I had been searching for several days to find an easy implementation for collapsible sidebar widgets and found several sites that attempted to explain the coding behind the idea. No other solution that I found was as concise and descriptive or as easy to implement as Widget Voodoo. Once I found it I was up and running with full styling in no time!
My only question is if there is a way to exclude a particular widget from being collapsible? The theme that I am using wraps each widget in it’s own each having the class “widget”. So when I use .widget in the Widget Selector input in the plug-in all widgets are collapsible.
Thanks for all your hard work on this project.
dfek, thanks! I’m glad to read my plugin stands out from the crowd. 🙂
If your widgets have ID’s (depends on the theme), and say you want to exclude the widgets with the IDs “foo” and “bar”, you can enter this as Auto-collapsed Widgets Selector:
.widget:not(#foo):not(#bar)I actually just applied my advice to my own site to collapse some but not all widgets. 😎
I don’t know if the plugin will be activated if/when you visit my site. But my question is just general, the only good I would get out of using your plugin is to have certain widgets expanded on certain pages and the same widget collapsed on different pages. Any help would be appreciated!
Justin, some themes are clever enough to include “semantic CSS classes” for the whole page. In such cases it would be possible to configure Widget Voodoo to open some widgets on some pages, and not on others etc.
Reading through the comments (not all of them) I can see you don’t want to include it in the official release, but could you make an extra version of the plugin that does use cookies and/or sessions?
I’m running a Final Fantasy website over on http://ffpavilion.com where I use BuddyPress for a member-centric community and your plugin here to avoid the sidebar going on for ever. How I do it is that all but the latest games (which have their own custom menu widget each) are closed by default, but this becomes very incovenient when you’re browsing through the different pages of say, Final Fantasy VII (7) because as soon as you’ve finished reading up on its release history you may want to watch some videos, and you have to open the menu again… it works, of course (and it looks nice, thank you very much :P) but like I said before… inconvenient. 🙁
Rukishou, I would love to include that feature, it’s just that I never find the time. There’s always some stuff of higher priority, so this one falls off the table all the time. 🙁
Great plugin, however, I am using a theme created with Artisteer 2.5 and I cannot get to configure the plugin.
Could not sufficiently derive suggestions from your current configuration. Your theme does not seem to satisfy the criteria required for Widget Voodoo to operate. But don’t despair. The requirements are minimal, and tweaking your theme to meet them is a breeze. Let me walk you through it in the Widget Voodoo Theme Tweaking Manual.
it appears that none of the suggestions apply to my theme. ANy ideas?????
Please advise..
Rob Fahndrich,
I’m not familiar with Artiseer, and with no glance at your website, I can’t possibly diagnose anything.
Outstanding!
I really like this plugin. Good work. However, I too would like to have a feature for it to remember the state. For instance. I have a Buddypress site, most of the sidebar widgets are on most of the pages. If I am on the activity page and I collapse certain widgets and then go to a group page all of the widgets should remain as I had them on the previous page, but they don’t, they all are expanded again. So in my case, right now, the collapsible feature is pretty much useless.
Kenneth, it IS on my agenda, but I just don’t have the time to hack it. 🙁
I am interested in the “remembering” feature as well. Hope you find time to add this to the plugin. Would add a lot of value to it.
Also, I tried to find your plugin in the wordpress repository (via my site control panel) and it won’t show because it’s over 2 years since a last update. I have to manually download it from wordpress then install from the zip file.
That’s another reason to update it, so more people can find YOU! 🙂
I only found you through a Google search. If I just searched in my website plugin control panel I would never have found this.
Hello Hackadelic,
I’m simply CRAZY with your Woodoo Widgets!
But now I have a nagging problem:
Here it works: http://www.tattoodesignfinder.org/lvlh/
here it does not: http://www.tattoodesignfinder.org/ww/
But I’m using the same theme on both sites, I also tried to deactivate other plugins without any luck. I also target the same widget class (.widget).
I have the feeling I missed something simple, do you perhaps have a clue, what’s going on here?
Sorry Thomas, can’t tell. Your 2nd link does not have a sidebar. At least not right now as I’m watching it.
Hi Hackadelic
Thank you for your reply.
I did try the change you’ve suggested and still it doesn’t work. I’m sure I’m doing something wrong or is it perhaps my theme’s CSS that’s causing trouble. Here’s my theme’s sidebar h4 CSS:
#sidebar h4 {
margin : 20px 0 10px 0;
padding : 10px;
font-size : 12px;
line-height: 14px;
font-weight: bold;
background: #222222;
}
Also, I’m a bit confused about “sidebar-left” and “sidebar-right” in your CSS, since I see only one sidebar on the right. I’ve shortened my CSS and didn’t include all of the elements that you have in your original CSS. Perhaps this was a mistake? Here’s the CSS I’ve included:
.widget.collapsible .widgettitle {
-moz-border-radius: .5em; -webkit-border-radius: .5em;
cursor: pointer;
}
#sidebar-1 .widget.collapsible .widgettitle {
background: #222222;
}
#sidebar-1 .widget.collapsible .widgettitle:hover,
#sidebar-1 .widget.collapsible .widgettitle.collapsed:hover {
background: #666666;
}
That’s all I’m using. Do I need to add something more? Can you see what I’m doing wrong? But, please, don’t lose any sleep over it because it’s really not such a big deal for me. Rollover effect would be nice but I’ve added “+ and -” signs to show that titles are collapsible and that does the trick for me. It’s only that this rollover thing has been bugging me for the last couple of days and it would be nice If I was able to solve the problem.
Thank you again for this great plugin and for your time.
Best wishes,
Zoran
Zoran, of course you need to adapt the CSS to the conventions of your theme. The “Suggestions” button in the settings page gives hints on this.
From what I see on your site, you should use #sidebar throughout, not #sidebar-1.
Have you checked out the Widget Voodoo manuals and tutorials linked from this page?
Hi
Excellent plugin! I’ve spend couple of hours searching untill, finally, I found yours. I didn’t have any problems installing it but I do have two questions though…
1.In IE8, after expansing titles and collapsing them again, they stick to one another and unstick only after second or third click. In Firefox, everything works perfectly. I have my widgets set to autocollapse, but this, obviously, isnt the problem because I’ve noticed the same IE problem on your site (when viewed in IE8). Is there any way around that?
2.I don’t use any images for title background. Is it possible in CSS to change widgets title color on hover, perhaps?
Thanks again for the great plugin and all the best.
Zoran
Hi Zoran,
thanks for pointing out the issue to me. It’s new to me and I need to check it out yet.
The answer to your 2nd question is “Yes”; much the same way I do it to change the bg image. Look for
.widgettitle:hoverin my sampe Widget Voodoo styling and changebackground: url(/i/bg/widget-title-bg-hover.png) top left no-repeattobackground: (your color)orbackground-color: (your color) .Wow, stunning plugin. Well done that man!
: D
nope… anyways, inside the “” is the string construction to insert the script tag for jquery.js
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 "";
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).
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.
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.
Charles, so he says it’s Widget Voodoo’s fault?
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.
💡 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? 😕
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?
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.
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 🙂
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?
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!!
Justyn, the site looks good to me. The widgets are all auto-collapsed, and expand when clicked.
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
Steve, on the URL you provided, things look good to me, so I guess you worked it out, didn’t you?
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
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.)
Yes, it works perfectly now!
Thanks!
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.
Hi Kashmir (or Bill Gates???),
you are right! Sorry, I made a mistake with the sampe CSS. Correcting it… Done! Check it out now.
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!
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.
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…
Chiel, could work. Personally I’d rather just change the
register_sidebarscall as described in the theme tweaking manual, instead of wrapping the widgets in extra DIVs.sorry, can’t seem to send the code along with my message…
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.
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:
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
Chiel, Widget Voodoo works with (almost) any theme, if you configure it properly.
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
Hi Paco,
sure, I do offer this kind of service.
works perfect, what was the issue or is it to technical?
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.
hey ovidiu here from the wordpress forums. check again: adi.zice.ro I deactivated your plugin now so you can check it out again.
Ovidiu, the development version should fix your issue.
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.
Jensilaedi, it’s your theme. Your widgets are missing the id attribute in the generated HTML.
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.
Works great, thank you
[…] WPMU Compatibility This entry is part of a series, Widget Voodoo Releases» Originally, Widget Voodoo wasn’t implemented with WordPress MU in mind. In response to an issue report in the forums, […]
Hi
Oh and how can we make it memorise or store the preference setting of the user?
Al
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. 🙂
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
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?
Charles, see my other response over at Widget Voodoo Release 1.0.3
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…
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. 🙂
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!
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.
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.
Thanks for the hint, saintneko. I do have a guess where the issue comes from, I’ll check it out.
Saintneko, try the brand new 1.0.2 version. You’re issue should be gone 🙂
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.
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.)
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.
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.)
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.
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.com/files/hackadelic-widgetvoodoo-tut-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.
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. 😛
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.
I would like my lists closed when the webpage opens. Is there a way to maneuver the widget accordingly?
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.
[…] out …..read more Download Plugin! Version 1.0.1 Last Updated: February 16, 2009 Plugin Owner: Hackadelic […]
Afraid not. It can be a real pain trying to watch things on the web these days.
I’m using FF 3.1 and I got the same issue. You cannot rely on Flash XD
Do you have any suggestions on the Flash issue? Anybody?
Indeed it does, thanks a lot.
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.
Tom, I’m puzzled. I also use FF3, and it looks fine here ?!?
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.
Daniel, I’m glad to hear you like it.
I’ve just checked in a version that fixes your issue, I think.
[…] plugin homepage gives a thorough overview of the features […]