wp_get_nav_menu_items() current menu item

When displaying a menu in WordPress I sometimes find it pleasant to use the wp_get_nav_menu_items() function. This function returns only an array of menu item objects of the corresponding menu. So it allows you to build your custom menu exactly the way you want, without dealing with WordPress predefined output.

However, if you would use the function wp_nav_menu() you benefit from a built-in “current menu” conditional logic which lets you know which menu item is active through a CSS class added to the current menu list item. When using wp_get_nav_menu_items you have to create this logic yourself.

Solution 1: Queried object id

When building your custom menu with wp_get_nav_menu_items() you can create this current menu item functionality by simply checking the queried object id of the current page and compare it to each menu item’s object id.

// Check if menu exists
if ( $menu_items = wp_get_nav_menu_items( 'menu' ) ) {
   
   // Loop over menu items
   foreach ( $menu_items as $menu_item ) {

      // Compare menu object with current page menu object
      $current = ( $menu_item->object_id == get_queried_object_id() ) ? 'current' : '';
      
      // Print menu item
      echo '<li class="' . $current . '"><a href="' . $menu_item->url . '">' . $menu_item->title . '</a></li>';
   }
}

Solution 2: Request URI path

There is only one problem when you use the queried object id to check whether the menu item is the current page, namely; when you add link menu items to, for example, a post type archive. These pages have no object id. In that case, it is a better option to compare the path of the request URI with the URL of the menu item. You can do this as follows:

// Check if menu exists
if ( $menu_items = wp_get_nav_menu_items( 'menu' ) ) {
   
   // Loop over menu items
   foreach ( $menu_items as $menu_item ) {

      // Compare menu item url with server request uri path
      $current = ( $_SERVER['REQUEST_URI'] == parse_url( $menu_item->url, PHP_URL_PATH ) ) ? 'current' : '';

      // Print menu item
      echo '<li class="' . $current . '"><a href="' . $menu_item->url . '">' . $menu_item->title . '</a></li>';
   }
}

9 Responses

  1. Hi Robert please tell me how do I get the classes that I specified in the admin panel for menu items? $classes = $menu_item->classes; this doesn’t work

  2. Thanks Robbert, its cool, i use

    $classes = $menu_item->classes[0]; — it’s work

    but have alternative solution

    implode( ‘ ‘, $menu_item->classes )

    1. Awesome you made it work! Keep in mind always to check first whether $menu_items->classes in an array before you use it in implode(). Else you will get an error. So maybe something like this $classes = ! empty( $menu_item->classes ) ? $menu_item->classes : ”; Good luck!

  3. Awesome, Thanks very much it works. I am having an issue in my local environment it works but when I upload it to a live server it highlight all the menus at once. That is the second solution. The first solution works both locally and live server. Also, how can I extend it so that when I am on a child menu the parent menu is highlighted?

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Robbert Vermeulen

Need help from a WordPress expert?

I would love to hear about your project and how I can help you achieve your goals