How to Add Custom Items to WordPress Menus

WordPress menu really a awesome way to drag and drop items. One thing that is limited on the visual interface of menus is that you can only add links (pages, category, or custom links). What if you want to add a custom item to WordPress menus? Maybe you want to add a search bar, or log in/out link, today’s date, or anything else in a WordPress menu. Just because there is no visual interface, does not mean it is not possible. In this article, we will show you how you can utilize the wp_nav_menu_items  hook to add custom items to all or specific WordPress menus.

Note: before start working you should enough knowledge about wordpress, so it is expected that you know basic html/css and a fair understanding of how WordPress themes work.

Obviously, you need to have custom menu enabled in your themes before you can proceed any further.

Lets start with the basics. We need to add our own filter into
wp_nav_menu_items  hook. An example would look like this:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if (is_page() && $args->theme_location == 'primary') {
        $items .= '<li class="add-your-class">Custom Menu 1</li>';
        $items .= '<li class="add-your-class">Custom Menu 2</li>';
    }
    return $items;
}

The above menu only show in single page but if you wan to show all pages just change it is_single()  or any specific page is_single(123)  or only home page is_home()

To create a hierarchy (dropdown) of menu items, you could write your hook like this:

add_filter( 'wp_get_nav_menu_items', 'custom_nav_menu_items2', 20, 2 );

function custom_nav_menu_items2( $items, $menu ) {
  if ( $menu->slug == 'menu-1' ) {
    $top = _custom_nav_menu_item( 'Top level', '/some-url', 100 );

    $items[] = $top;
    $items[] = _custom_nav_menu_item( 'First Child', '/some-url', 101, $top->ID );
    $items[] = _custom_nav_menu_item( 'Third Child', '/some-url', 103, $top->ID );
    $items[] = _custom_nav_menu_item( 'Second Child', '/some-url', 102, $top->ID );
  }
  return $items;
}

Be careful. It’s important that no menu items share the same menu_order property.

You can use the conditional statements along with the argument theme_location. This allows you to target a specific menu location with any condition you want. If you don’t want the conditional statement, you don’t have to use it. Just add it to a specific menu location or vice versa.

Now that you have seen a basic example, let us show you some specific examples of how this would work.

Adding Log in/out links to a Specific WordPress Menu

If you want to give your users the ability to log in/out, then one place you can add the links is in your custom menu. The snippet below will show log in/out links to your users appropriately on the menu location: primary. You can change the menu location if you want.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Adding a Search Bar to a Specific Menu

Want to add a search bar to a specific menu? Well look no further. You can do so by pasting the following snippet:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items."<li class='menu-header-search'><form action='http://example.com/' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Search'></form></li>";
 
    return $items;
}

I hope this tutorial help you. if you stack please write a comment below.