How to Add Custom Items to Specific Menu in WordPress

How to Add Custom Items to Specific Menu in WordPress

WordPress has an amazing Navigation Menu system. Using the Drag n Drop interface makes it very easy to arrange and to add new items to our custom menus, which then we display easily using the already registered Menu Locations in the theme we’re using.This is all nice, but what if I want to add a Custom Item to my navigation? Like a search bar, or todays date? This can be easily done! Let’s take a look.

How to Add Custom Items to Specific WordPress Menu

Add Custom Items to Specific Menu in WordPress

To be able to add a custom item to your navigation menu, you need to the ID of the Menu Locations of the menus your theme has registered. To find these, go to your theme’s directory and look for functions.php then open it with your favorite text editor and look for a function called “register_nav_menu()” and the first parameter is what you’re looking for. These are often called “primary” for Primary Menu or “secondary” for Secondary Menu.

After you’ve found the ID of the menu location, and decided where you want to add your item, you need to open up the functions.php of your theme again ( if you closed it ) and add the following into it:

Login / Logout Link

To be able to add a logout/in link to your navigation menu, add the following code into the bottom of your functions.php. Also don’t forget to change the $args->theme_location == ‘primary’ to the ID of the navigation menu you want to add the links to.

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;
}

Search Box

Want to add a search box to your navigation menu? Sure thing! Just add the code below to your functions.php

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='".site_url()."' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Search'></form></li>";
 
    return $items;
}

Today’s Date

If you for any reason would like to display today’s date, copy the code below

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
		
		$todaysdate = date('l jS F Y');
        $items .=  '<li>' . $todaysdate .  '</li>';
 
	}
    return $items;
}

Custom Item

To be able to add items other then the ones listed above, use the code below and add your custom code between the ‘ ‘ where it says <– Your Content Here –>

add_filter('wp_nav_menu_items','add_custom_in_menu', 10, 2);
function add_custom_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
		
        $items .=  '<li><-- Your content here --></li>';
 
	}
    return $items;
}

Resources

If you have any question, feedback or suggestion related to this topic, please feel free to leave a comment down below! Also, don’t forget to share it with your friends and followers.

Enjoyed this article? Please help spread the word by sharing it with your friends!

Enjoyed this article? Get more via email each week!

You may also like...

  • http://webutationthebook.com/ Wolfgang

    This is great…

    • http://andornagy.com Andor Nagy

      I’m glad you liked it :)

  • http://gravatar.com/helloheathergraham Heather

    This is very helpful! I’m wondering how it would be possible to have a shortcode generated where it says “your content here”.

    • http://andornagy.com Andor Nagy

      Hi,

      That’s a good idea, I haven’t test it yet, but I’ll look into it and let you know! Thanks!

      Regards,
      Andor Nagy