WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.


share|improve this question
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 May 2 '13 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 May 2 '13 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. – Josh Rodgers May 2 '13 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 Aug 30 '15 at 5:48

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

share|improve this answer

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!


share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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