Assign Attributes To The WP_List_Pages Tag

15 Comments

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.

15 thoughts on “Assign Attributes To The WP_List_Pages Tag

  1. 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

  2. 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’);

  3. @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!

  4. @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 🙂

  5. 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.

  6. @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.

  7. Thank’s here the code for mootools :

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

  8. 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

  9. Hey.

    maybe you can help me on this

    i wanna make a navigation list with wp_list_pages

    which results in looking like following:

    Home

    i need to add a class attribute to the a href, where the class is iterated like link 1, link 2, link 3, etc. for each parent page.

    Any idea?

  10. Just wanted to say thankyou so much to Michael and to Chris also.
    After spending lots of time working on php to get around this problem I found this and am now fully converted to jquery!

    I especially needed to know how to assign classes to parents and then child, would never have guessed it would have been two lines of code.

    Thanks again

  11. Pingback: Mega Menus redux: Integration with WordPress navigation

Comments are closed.