Assign Attributes To The WP_List_Pages Tag

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:

Getting Started

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:

<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/jQuery.js”></script>

Now we need to include the following code somewhere below the references line:

<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(’.page_item a’).addClass(’scrollover’).attr(”type”,”scrollover”);
});
</script>

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:

<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/scrollovers.js”></script>

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.

Michael Castilla June 10th, 2008 Articles, Tutorials

12 Responses to “Assign Attributes To The WP_List_Pages Tag”

Scott Bernadot
Posted on June 10th, 2008 at 9:30 PM

Thanks Michael for the great post. It almost resolves a problem I was having with another menu system. The difference is that I need to be able to assign IDs/Classes to Parents and Child links.

Just wondering if there is a way to assign aan ID or class to a parent and another to its child?

Thanks again for sharing.

-Scott

Chris Poteet
Posted on June 11th, 2008 at 1:33 AM

Thanks Michael. You forgot the CSS style to mark the active page however. You also forgot to move the Scrollovers file to after the jQuery functions.

@Scott: Yes, you can do this easily with jQuery.

$(’element’).parent().attr(’id’, ‘yourid’);
$(’element childelement’).attr(’id’, ‘yourid’);

Michael Cromarty
Posted on June 11th, 2008 at 6:58 AM

Nice one chris.
wow still working on version one ay mike ;)

Michael Castilla
Posted on June 11th, 2008 at 9:27 AM

@Chris: Woops, my bad. Thanks for pointing that out. I purposely left out the active page part because most users already know how to do that.

@Michael: Of course!

Chris Poteet
Posted on June 11th, 2008 at 10:10 AM

@Michael: Most users eh? You didn’t have it in your theme :)

Michael Castilla
Posted on June 11th, 2008 at 10:27 AM

@Chris: Which theme? I didn’t have it in the WPCandy v1 theme because, well, I was using the hardcoded links, I had it in WPCandy v2, and we’re currently using it here with the WPCandy v3 theme :)

Graeme Mac
Posted on June 11th, 2008 at 11:35 AM

Hey Michael,

You have a conflict between 2 sets of meta robots tags in your header file.

Right now your site is set to noindex, nofollow. Meaning that the search engines will not follow your links to index your content.

I don’t think this is on purpose but thought you should know.

Chris Poteet
Posted on June 11th, 2008 at 11:47 AM

@Michael: Yes, I meant in v.1 which you made available for public release. That whole tutorial was about v.1. So you might want to (a) alert people to now add that and (2) update your CSS file in the theme.

I knew why it wasn’t included, but now you can. So just like alerting your users to the jQuery tip you should also (IMHO) alert them to that.

Scott Bernadot
Posted on June 11th, 2008 at 1:03 PM

@ Chris - Awesome! Thank you for sharing your expertise. Very appreciated.

-Scott

Dan Philibin
Posted on June 11th, 2008 at 9:43 PM

@Graeme thanks! I guess we should turn off search engine blocking now that the site is live..

Kromack
Posted on February 8th, 2009 at 1:45 PM

Thank’s here the code for mootools :

var list = $$(’.page_item’);
list.each(function(element) {
element.addClass(’your_class’);
});

Adam
Posted on February 13th, 2009 at 6:23 PM

the proper way to add scripts and avoid conflicts is to use wp_enqueue_script. Doing it this way will make sure the script is only loaded once. Another nice thing is you can specify a script that depends on another and have wordpress automatically load the dependency.

example:
wp_enqueue_script(’newscript’,'/wp-content/plugins/someplugin/js/newscript.js’,array(’scriptaculous’),’1.0′ );

This will load the newscript.js as well as the scriptaculous script it depends on, If not already loaded.

Adam