How to use nav_menu_item_id filter in WordPress

nav_menu_item_id filter

Filters the ID applied to a menu item’s list item element.

To use nav_menu_item_id filter, first you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function weplugins_modify_nav_menu_item_id_defaults which takes 4 parameters and we registered using add_filter. The first parameter nav_menu_item_id is name of the hook, The second parameter weplugins_modify_nav_menu_item_id_defaults is name of the function which need to be called, third parameter is the priority of calling the hook if same hook is used multiple times and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometime, you have to remove a registered hook so you can use remove_filter to remove nav_menu_item_id filter.

Parameters

Below are the 4 parameters required to use this hook.

• $menu_id : (string) The ID that is applied to the menu item’s <li> element.
• $menu_item : (WP_Post) The current menu item.
• $args : (stdClass) An object of wp_nav_menu() arguments.
• $depth : (int) Depth of menu item. Used for padding.

Live Example

apply_filters( 'nav_menu_item_id', string $menu_id, WP_Post $menu_item, stdClass $args, int $depth )

Below is an example how you can use this hook.

    function weplugins_modify_nav_menu_item_id_defaults($menu_id, $menu_item, $args, $depth) { 
        // Update the $menu_id variable according to your website requirements and return this variable. You can modify the $menu_id variable conditionally too if you want.
        return $menu_id; 
    }
    // add the filter
    add_filter( "nav_menu_item_id", "weplugins_modify_nav_menu_item_id_defaults", 10, 4 );
    

To remove a hook callback, use the example below.

remove_filter( "nav_menu_item_id", "weplugins_modify_nav_menu_item_id_defaults", 10, 4 );

Please make sure to provide the same callback function name, priority and number of arguments while removing the hook callback.

Example 1: Custom Menu Item ID Based on Menu Item

In this example, we change the menu item ID based on the item itself.

    function weplugins_custom_menu_item_id($menu_id, $menu_item, $args, $depth) {
        if ($menu_item->title == 'Home') {
            $menu_id = 'home-menu-item';
        }
        return $menu_id;
    }
    add_filter('nav_menu_item_id', 'weplugins_custom_menu_item_id', 10, 4);
    

Example 2: Adding Depth-Based ID to Menu Item

This example shows how to add a depth-based ID to a menu item.

    function weplugins_depth_based_menu_item_id($menu_id, $menu_item, $args, $depth) {
        $menu_id = 'menu-item-depth-' . $depth;
        return $menu_id;
    }
    add_filter('nav_menu_item_id', 'weplugins_depth_based_menu_item_id', 10, 4);
    

Example 3: Conditional Menu Item ID for Specific Menu

Here, we set a specific ID for menu items in a particular menu.

    function weplugins_specific_menu_item_id($menu_id, $menu_item, $args, $depth) {
        if ($args->menu == 'primary') {
            $menu_id = 'primary-menu-item-' . $menu_item->ID;
        }
        return $menu_id;
    }
    add_filter('nav_menu_item_id', 'weplugins_specific_menu_item_id', 10, 4);
    

Contact Us

If you need customization or have any issues using this hook, contact us.