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.


  • You already can access/target a specific link - when using the wrapped around <li> element. wp_list_pages provides unique classes like page-item-{id} for those.
    – tfrommen
    Commented May 2, 2013 at 15:53
  • if the links are children of a list element (li), those elements already have specific classes. You could just target the class, instead of adding an ID. Are you using jquery?
    – gdaniel
    Commented May 2, 2013 at 15:54
  • Yes, but those links will change if the theme is applied to another website, I was looking for something that could be applied to the theme, that wouldn't need a manual ID change when the theme is added to another site. Commented May 2, 2013 at 21:01
  • If you want to target a specific link, for example to add CSS rules, the default output already provides classes specific for a link, page-item-' . $page->ID. Adding id's is also possible, but you have to write a custom Walker class to get that.
    – Abhik
    Commented Aug 30, 2015 at 5:48

2 Answers 2


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!



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(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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.