Add class to link in wp_list_pages

Question

I'm trying to create a hover-effect on a list-item within the wp_list_pages() function. I'm creating a theme for Wordpress, but can't seem to get the hover effect working. I'm pretty new at this, so bear with me.

My css looks like this:

a.nav:hover { color: yellow; } 

So for my html-code I add the "nav"-class to my links, like this:

<ul class="nav">
<li><a class="nav" href="#">HOME</a></li>
</ul>

This works, it changes the color of the link to yellow. So far so good. But when I try to change this html-code to php-code the class isn't there.

I use the wp_list_pages() function, like this:

<ul class="nav">
<?PHP wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude='); ?>
</ul>

And the outcome then is:

<ul class="nav">
<li class="page_item page-item-23"><a href="http://example.com/blog/page_id=23">HOME</a></li></ul>

So my question is, how to I add the nav class to this link? Is there an attribute within the function or something? Again, I'm really new to this

Answer 1

from the wordpress docs for wp_list_pages() http://codex.wordpress.org/Function_Reference/wp_list_pages#Markup_and_styling_of_page_items :

ll list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.

with that, the easiest thing you can do is to just change your hover code to:

li.page_item:hover { color: yellow; } 

Answer 2

Have a look at this.

Quote: "Add the following line to your theme's functions.php template file, and it will add a class attribute of "tag" to each link generated by wp_list_pages():

add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"tag\" ", $t);'));