Add an ID to each LI in wp_nav_menu WordPress
- SOLVED
Hi,
Is there a way to add a unique ID to each LI that is outputted via wp_nav_menu and remove the default classes and ID's assigned?
I have tried the classy-lists plugin and it doesn't work.
Answers (4)
Ivaylo Draganov answers:
Hello,
Nick Parson's suggestion is on the rights track and I also advise you not to use JavaScript for this. A similar question has already been asked here, please read through it:
[[LINK href="http://wpquestions.com/question/show/id/2465"]]http://wpquestions.com/question/show/id/2465[[/LINK]]
Unfortunately my pastebin for that answer has been lost :--( I could solve your issue, but I need some time to write the code again.
Ivaylo Draganov comments:
Hi,
I've found my old code, here it is (goes into <em>functions.php</em>):
[[LINK href="http://pastebin.com/L6PTpdiG"]]http://pastebin.com/L6PTpdiG[[/LINK]]
And then you need to call your nav menu with the callback parameter like so:
<?php wp_nav_menu( array(
'walker'=> new clean_html_walker()
)
); ?>
By the way LI items in the nav menu already have unique IDs in the form of <em>menu-item-{$item_id}</em>. If you wish to change that you can use the filter hook <em>nav_menu_item_id</em> or make changes directly to the custom walker class.
Dan | gteh comments:
thanks this is what I was looking for.
I know they have unique ID's already but I want to assign some specific ID's.
Pixel Coder answers:
If you're using jQuery you can do something down and dirty like this.
<script>
$("#menu-id li").each(function(e)
{
$(this).addClass("item-" + e++);
});
</script>
Yeah JavaScript is not always perfect, but it works temporarily.
The walker attribute is long winded and there are 1000 word tutorials explaining how to utilise it correctly.
Hence the down and dirty hack.
@Ivaylo, is this your code too?
http://wordpress.stackexchange.com/questions/14037/menu-items-description/14039#14039
Romel Apuya answers:
i think this is much better:
you remove the current classes and replace it with the new one.
<script>
$("#menu li").each(function(e)
{
$(this).attr('id', 'newID-'+ e++ );
});
</script>
Nick Parsons answers:
I might offer that it would probably be better to let wordpress handle this than to use a jquery hack. I think this might be what you're looking for:
$menu_counter = 0;
add_filter('nav_menu_item_id','change_nav_menu_id',10,2);
function change_nav_menu_id($current_id,$item_details){
global $menu_counter;
return 'your_id';
}
You can put that in functions.php, and replace where it returns 'your_id' with the desired new id, however you want to format that. The variable "$menu_counter" will hold the current number of the item (1 for the 1st item, etc), and $item_details holds the post object for that menu item, so for example you could write:
return 'item-' .$menu_counter;
to set an id of "item-1" for the first item, etc. Or you could do this:
return $item_details->post_name;
to set the id to be the slug of that page.