Add ID to target navigation link

Question

I am using the following code for a navigation bar on a WordPress website:

<?php wp_list_pages("title_li="); ?>

Which currently spits out some links that look like:

<a href="http://yoururl.com/?page_id=123">News</a>

What I'd like to do is have the ability to add an id to a link so that it looks like:

<a href="http://yoururl.com/?page_id=123" id="news">News</a>

Does anyone know how to do this? It's ok if just this page or every page has an id...whatever is easiest, I just need an ID so that I can target a specific link.

Thanks,
Josh

Answer 1

I wasn't able to find something that would add an id, but I did find something that would give me a class...this way I can target the class using jQuery. The default id's and classes are ok, but the solution I found is much better because no matter which website you apply it to it will work, I don't ever have to go back and change the link class or id. I was able to find a function that adds a class with the page name...so as long as I make sure the page names remain the same I'm golden :-)

Add to functions.php:

function menu_css_class($css_class, $page){
    $css_class[] = "nav_" . $page->post_name;
    return $css_class;
}
add_filter("page_css_class", "menu_css_class", 10, 2);

Set it and forget it, I love it!

Thanks,
Josh

Answer 2

Well, you can do it with jQuery, if your links are inside a div with given ID of 'menu', so you could write:

<script type="text/javascript">
var links = jQuery('#menu').find('a');

jQuery(links).each(function(){
jQuery(this).addClass('news'); // It will add a class for all links, not an id
jQuery(this).attr('id', 'news'); // This will add an id, but for all links
}); // choose what do you want, and delete other, if you will not use
</script>

This is just a work-around, and a ugly method since I don't know a WP function to retrieve all pages links, and nobody helped you so, but I think you can Google for it too...

Good luck...