Tim Brockman . com

JavaScript + WordPress + DOM node navigation = laDolceVita()

• Tim Brockman
• @ 1:20 pm

As one who likes (W)ordPress and building/chopping/ducttaping themes and JavaScript I wanted to contribute this little bit of code for your properly Widgetized Theme. This site's theme uses ( http://script.aculo.us/ ) JavaScript for its nicely widgetized sidebar. After all it needs it to tame the (W)ordclutter.

Anyway let us cutting to the chase. Most of the time I like the precision of using elementId's to reference elements. If you know about this type of stuff you know that in your theme's function file you can use the register_sidebars() function to use the tags of your choosing to wrap sidebar elements instead of ye ole <h2></h2><ul></ul> big indent and disconnecter whitespaces goodness. WordPress documentation will talk about using %1$s and %2$s to pull identifying information from the widget into those tags for element id. Logically you will think this is a great way to call some nice JavaScript functions/methods with a predictable result. FORGET IT! it defies logic. %1$s or %2$s only work in the outter tags and will output different stuff in the same function call depending on the where it is used and what widget it is referencing. For instance...

'before_widget'=>'<li id=\"%1$s\" class=\"widget %1$s\">',

Will probably give html like <li id="meta-2" class="widget meta-2"> for the meta widget which allows you to do something like <a onClick = "superFunBall(\'%1$s\')" > <li id="%1$s"> and it will work some of the time. However categorized widgets like links/blogroll will call this function several times giving you <a onClick = "superFunBall('links-2')" > <li id="linkcat-2"> for one link category and <a onClick = "superFunBall('links-2')" > <li id="blogroll-2"> the next time it's called. It will do this even if you put the calls the same tag, trust me I tried almost everything you could to work around it.

Which, leads me to the obvious answer. Use node navigation. For instance I use this.previousSibling to traverse the DOM tree to call a simple fade/appear script.

In other words add a <script type="text/javascript" src="http://or/whater/path/scriptaculous.js?load=effects"> </script> to your themes head and the following to your theme functions and you get the fade/appear toggle.


<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div><div>',
'after_widget' => '</div><tt onClick="Effect.toggle($(this.previousSibling),\'appear\'); return false;">&laquo;show/hide&raquo;</tt></div><br/>',
'before_title' => '<strong style="font-size:11.5pt;color:#6e6e6e;">...',
'after_title' => '</strong>',
));
?>

So stay flexible. Keep designing good stuff, and sometimes crap. Hopefully this will give you a big jumpstart on developing cool, more advanced WordPress themes. cheers