How To Add Custom Menu Items And Variables To WordPress Menus

In order to add custom menu items to a wordpress menu, we need to define our custom menu item as well as where that menu item belongs using the built-in WordPress hook for menus.

To modify WordPress menus, we use the wp_nav_menu_items filter to load our custom functions.  Our custom functions are added to our functions.php file.

A variety of additional menu snippet examples are provided below.

Available Arguments For wp_nav_menu_items

According to Codex, the wp_nav_menu_items filter accepts the same filters as wp_nav_menu

'menu'              => "", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
'menu_class'        => "", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
'menu_id'           => "", // (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
'container'         => "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'container_class'   => "", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
'container_id'      => "", // (string) The ID that is applied to the container.
'fallback_cb'       => "", // (callable|bool) If the menu doesn't exists, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
'before'            => "", // (string) Text before the link markup.
'after'             => "", // (string) Text after the link markup.
'link_before'       => "", // (string) Text before the link text.
'link_after'        => "", // (string) Text after the link text.
'echo'              => "", // (bool) Whether to echo the menu or return it. Default true.
'depth'             => "", // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
'walker'            => "", // (object) Instance of a custom walker class.
'theme_location'    => "", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'items_wrap'        => "", // (string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
'item_spacing'      => "", // (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.

How To Add A Link To A Specific Menu

Here are two approaches for adding a custom menu item to a specific menu

One method is to use $args->menu to define which menu we are targeting.   This argument accepts a menu ID, the menu slug, or an object.  In both these examples, we’re using a custom menu  User Menu with a menu ID of 354, menu slug of user-menu, and name User Menu.

add_filter( 'wp_nav_menu_items', 'uwp_menu_name_to_nav_menu', 10, 2 );
function uwp_menu_name_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() && $args->menu == 'User Menu' ) {  // target by menu name
        $items .= '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account Menu Name</a></li>';
    }
    return $items;
}

add_filter( 'wp_nav_menu_items', 'uwp_menu_name_to_nav_menu', 10, 2 );
function uwp_menu_name_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() && $args->menu == 354 ) { // target by menu id
        $items .= '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account Menu Name</a></li>';
    }
    return $items;
}

add_filter( 'wp_nav_menu_items', 'uwp_menu_name_to_nav_menu', 10, 2 );
function uwp_menu_name_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() && $args->menu == 'user-menu' ) {  //  target by menu slug
        $items .= '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account Menu Name</a></li>';
    }
    return $items;
}

The other method is to insert the menu slug directly into the ‘wp_nav_menu_items’ filter name.

add_filter( 'wp_nav_menu_user-menu_items', 'uwp_add_extra_item_to_nav_menu', 10, 2 );
function uwp_add_extra_item_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() ) {
        $items .= '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account</a></li>';
    }
    return $items;
}

How To Add Your Custom Link To The Beginning or End Of A Menu

To accomplish this, you would just change the order of how $items is returned.

Add A Custom Menu Item To The Beginning Of A Menu

add_filter( 'wp_nav_menu_items', 'uwp_menu_first_to_nav_menu', 10, 2 );
function uwp_menu_first_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() ) {
        $first = '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account - First</a></li>';
        $firstitems = $first . $items;
    }
    return $firstitems;
}

Add A Custom Menu Item To The End Of A Menu

add_filter( 'wp_nav_menu_items', 'uwp_menu_last_to_nav_menu', 10, 2 );
function uwp_menu_last_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() ) {
        $last = '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account - last</a></li>';
        $lastitems =  $items . $last;
    }
    return $lastitems;
}

How To Add And Position Your Custom Link To A Specific Location In A Menu

If you want to position your new custom menu link at a specific location within a menu other than at the beginning or end, you have a few options.  While you can do this using the wp_nav_menu_items filter by targeting the $items array, it’s really easier to just let jQuery do all the magic.

Just give your custom link a unique class or id.  Then get the ID of the existing menu item that you want to position your custom link in front of or after.  Add filter to your functions.php file and add your jQuery to your footer.php file or in your custom js script.

// Add class or ID to the <li>
add_filter( 'wp_nav_menu_items', 'uwp_add_extra_item_to_nav_menu', 10, 2 );
function uwp_add_extra_item_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() ) {
        $items .= '<li class="custom-menu-link"><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Account</a></li>';
    }
    return $items;
}

// Move custom menu item with class "custom-menu-link" before the menu item with the id "menu-item-345' using jQuery
$('.custom-menu-link').insertBefore('#menu-item-345');

How To Add A Link To User’s Profile

add_filter( 'wp_nav_menu_items', 'uwp_add_profile_link_to_nav_menu', 10, 2 );
function uwp_add_profile_link_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() ) {
        $items .= '<li><a href="'. esc_url( home_url( '/' ) ). get_the_author_link() .'">My Profile</a></li>';
    }
    return $items;
}

How To Add A Link To A User’s Posts (Author’s Post Link)

add_filter( 'wp_nav_menu_items', 'uwp_add_author_posts_to_nav_menu', 10, 2 );
function uwp_add_author_posts_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in() ) {
    	$link = esc_url( get_author_posts_url( get_current_user_id() ) );
        $items .= '<li class="custom-menu-link"><a href="' . $link . '">My Posts</a></li>';
    }
    return $items;
}

How To Add A User’s Name Or Other User Fields To The Beginning Of A Menu

If you’d like to display a welcome message to a user at the top of a menu, you would call up the user’s data using wp_get_current_user.   An example is shown below which includes variables you may want to display; just remove any you don’t need.

add_filter( 'wp_nav_menu_items', 'uwp_add_name_to_nav_menu', 10, 2 );
function uwp_add_name_to_nav_menu( $items, $args ) {
    if ( is_user_logged_in()) {
    	$first = '';
   	$current_user = wp_get_current_user();

        $first .= 'Username: ' . $current_user->user_login . '<br />';
        $first .= 'User email: ' . $current_user->user_email . '<br />';
        $first .= 'User first name: ' . $current_user->user_firstname . '<br />';
        $first .= 'User last name: ' . $current_user->user_lastname . '<br />';
        $first .= 'User display name: ' . $current_user->display_name . '<br />';
        $first .= 'User ID: ' . $current_user->ID . '<br />';
        $firstitems = $first . $items;
    }
    return $firstitems;
}

How To Add An Image To The Beginning Of A Menu

In this example, we are adding our logo to the top of our menu.

add_filter( 'wp_nav_menu_items', 'uwp_add_image_to_nav_menu', 10, 2 );
function uwp_add_image_to_nav_menu( $items, $args ) {
    	$image = '<img src="' . get_template_directory_uri() . '/images/logo_small.png" style="width: 100%;" alt="Logo">';
        $imageitems = $image . $items;
        return $imageitems;
}