Change WordPress menu item id

In this tutorial I am going to show you how to change WordPress menu item id to something more suggestive as the page slug.

By default, WordPress menu items have menu-item-xx ID and that can be easily changed if you want to give a more semantic meaning to your code.

Think about some jQuery code with a lot of actions that involve your menu-items.

How to change WordPress menu item id

You will have to add the code below in your theme functions.php file.

function menu_id_page($item, $args)
{
  $page = get_post($args->object_id);
  $item = $page->post_name;
  return $item;
}
add_filter('nav_menu_item_id', 'menu_id_page', 10, 2);

This code simply triggers a function that replaces default wordpress menu items ids with the post name (page slug).

Example: you will replace <li id=”menu-item-15″> with <li id=”about-us”>