Our WPCandy v1 WordPress Theme uses a nifty, little script called Scrollovers. A while back when I was developing the theme, I ran into a bit of a problem with the script and WordPress. I wanted to add some bam to the nav with Scrollovers and also use the wp_list_pages tag in order to keep the dynamic nature of the navigation. But see, with Scrollovers, the anchor for a link requires a class and type value of “scrollovers”, which isn’t possible to accomplish with WordPress. As a result, I moved on by simply hardcoding the links in the navigation, as below, and provided the appropriate documentation for users.
<a href=”<?php bloginfo(‘home’); ?>” class=”scrollover” type=”scrollover”>home</a>
Well, that was that, until I received an e-mail from Chris Poteet who outlined a sweet and simple solution to solve my problem. jQuery. With a simple jQuery script, Chris was able to assign the necessary attributes to the anchors. Let’s take a look at how Chris was able to do so:
First, go grab the latest version of jQuery, upload it to the root of your theme’s folder, and reference the file in the <head> section of header.php. Your reference should look something like this:
Now we need to include the following code somewhere below the references line:
Basically, this block of code finds all anchors with a class of page_item (this is the default class for the wp_list_pages tag), and adds a class and type with the value of “scrollover”.
Editing The Original Code
Now we have to replace the original hardcoded navigation links. Delete the <li> values but leave the <ul> and </ul>, in which you will place the following code in between:
<?php wp_list_pages(‘title_li=&echo=1&sort_column=menu_order&depth=1’); ?>
Last but not least, you need to move the following Scrollovers reference line below the jQuery functions:
If everything is working properly, then you have created yourself a fully dynamic navigation with Scrollovers!
With that being said, I’m sure this trick works with other WordPress template tags, which could be a Godsend for some developers who want to extend WordPress beyond its capabilities. If you can figure out other ways to use this trick, please feel free to let us know in the comments.
Oh and if you’re currently using our WPCandy v1 theme or would like a demo of what we’ve accomplished in this tutorial, you can download an updated version of the header.php file here.