WordPress menus are freaking awesome. The drag drop interface makes it really easy for WordPress theme developers and the users alike. In the past we have shown you how to add custom menu in WordPress along with how to style a custom menu. 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 your 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: this tutorial is intended for WordPress theme developers, 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_single() && $args->theme_location == 'primary') { $items .= '<li>Show whatever</li>'; } return $items; }
Now as you can see, 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; }
Adding Today’s Date to a Specific WordPress Menu
The snippet below will add today’s date to your WordPress menu. You can use our Today’s Date manual to tweak the code if you want.
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; }
We hope this article will allow developers to expand the functionality of their themes.
Hello,
thanks a lot for that code. Is there a way to reorder the MENU? For example I want to have the Log in Log out button at first in the MENU. Just for an example.
Cheers,
Denis
For the moment with this code, we do not have a simple method for reordering where the additions are placed compared to the menu items at the moment.
Is there a way to have an entry on your menu bar set to appear at a certain time and another item set to expire?
Unless I hear otherwise, we do not have a recommended time based conditional display that we would recommend.
How to add in my secondary menu footer class li items in functions.php…?
Hi,
How can I add a search form at the beginning of the menu items list?
Thanks,
Saurabh
PS: big fan of your tuts
This is great. But would it be possible to add a menu within a menu?
I want to append a language menu to my primary menu.
I get the language menu on the page but not in the desired place.
instead of
Thank you for this! Just what I needed in a project.
I used the code for teh search box it works perfect.
Nice article, Help me alot.
Does this code still work? Not seeing anything on my menu, even just using the basic function with text. Not using any special type of menu, just ‘X’ & child theme.
never-mind, sorry just read this: “Obviously, you need to have custom menu enabled in your themes before you can proceed any further.”
OK so I was still having the problem even though my menu was custom, and messed around until I removed the condition. (IF), once I did that it displayed on all pages including homepage.
`add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$items .= ‘Show whatever’;
return $items;
}
It worked but it destroyed responsivity…I had to remove code
How add this menu item in first position ?
Awesome, Thanks you just saved me hours.
What is use of 10,2 in the code
10 specifies the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
2 is for the number of arguments the function accepts.
This is so useful and just what I needed! Thank you very much for sharing.
The Log-in link won’t show up, just the log out link. What could cause this?
This is an awesome, straight-to-the point tutorial. I want an item with today’s date (“headlines | DATE”) in one of my menus.
I didn’t expect the first posting I found to solve my problem
thx guys.
works but (lol) for my situation I want to add “Search” to the primary header as if it were just another item that got checked in
appearance/menus/add-to-menu
Everything I’ve seen creates a whole new…what is it a div…(?)
that adds a whole new row to the header instead of p[lacing the form in the same row as ABOUT, etc. items in the primary navigation edit window.
AND take the css assigned to the navigation bar.
I really liked the post, so useful. However lets say I want to add a login and logout link in the footer with and if condition
Related question: how to add a menu item based on a specific user role?
Say I have a custom user role called “Student” and I would like to add an item to the menu only when the user has the role of “Student”?
Its works but current menu item not select
is there a way to add it on certain submenu instead of top ul?
I’d like to know the same thing. Anyone have an answer on how to add it in a certain submenu?
Thank you for the How To!
To be honest I don’t understand how you call the function.
Especially I am missing a mention what arguments you call the functions with i.e. what wp variables to hand over as $items and $args.
Could you please detail for a wp-beginner?
Thank you,
Gerrit
hey how if i want to add it to sub menu ?
hm any ideas how i could add html tags to just one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
the option is available on wp admin panel
hm any ideas how i could edit the tag for one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
Hello,
How can I add the following classes active and current-menu-item and the id menu-item-id ?
How about add new custom menu to specific position?
I want put a little image beside left to the menu home, how can put it?
please help me
In your examples, you add items to the primary menu (theme_location == ‘primary’).
How would I add an item in a specific menu in widget area? Where do I get the theme_location?
theme locations are usually defined by your theme, check your theme’s functions.php file or the template where a menu is displayed.
If you want to target a specific menu (not a theme location) then use $args->menu->slug == ‘the_menu_slug’ instead of $args->theme_location == ‘primary’.
Really useful!
Thank you vary much Brad
^-^
Hi Brad,
Would you be able to tell me how I find out what the value of ‘the_menu_slug’ is?
Thanks,
Peter
Hi! I used your tutorial to put a picture as a logo overlapping the menu bar. All is fine but this specific menu has a hover option that makes the color white… So when i hover the mouse on the logo, it also hovers the link which kind of ruins the aspect of the page.
This is my code:
if( $args->theme_location == ‘primary’ )
return ““.$items;
How can I hide the a href on the page and just display the image with link?
Thanks in advance
Hi, I think your code is close to what I’m looking for, but I’m trying to figure out how i can customize it to do what I’m trying to do!
What I am trying to do is create a menu item with dropdown list of authors? any idea how i can accomplish that?
Thanks so much!
Hi Kathy!
I was working on this since days and I finally got it working.
Take a look at: http://wordpress.org/support/topic/creating-a-dropdown-in-menu-that-lists-authors/page/2?replies=45#post-5103035
Also, take into consideration I’m adding extra classes and attributes cause the theme is Bootstrap based. You might not need all that.
Cheers!
Eric
awesome i was searching these codes
Thanks this was very helpfull,
However, out of curiosity, I can’t find this valuable filter hook: “‘wp_nav_menu_items” , I mean where in WP core files is this being called ??
Thanks much !!
It is located in wp-includes/nav-menu.php, however it is not recommended to modify core files. It is a filter and you can call it in your theme’s
functions.php
file or a site specific plugin.This isn’t work for me
How can I place it in front of the first menu item? Otherwise great tutorial!
Regards,
Andor Nagy
Use the return example of the search bar and move the items towards the end?
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$custom = ‘Show whatever’;
$items = $custom.$items;
return $items;
}
Pardon my ignorance but which php file would I be editing?
This would go in your functions.php file.
I added the following to my theme’s functions.php but the search box doesn’t show up like I would expect. Any suggestions?
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 == ‘header_extras_inner’ )
return $items.””;
return $items;
}
Sorry to be coming into this discussion so late
I’ve tried the search form part and it works great— thank you! I’m having problems styling it though, for some reason. No matter what I do the placeholder text in the field is gray. I’ve looked at the cascading of the styles and messed with so many things— I can change the background color for example, but no luck in making the text black, so the design continuity of the menu is somewhat compromised. My site is http://elliottwall.com if you care to have a look. Cheers
For placeholder text, you have to do something like this:
This worked perfectly— thank you again!
Can we add custom link before the first item instead of at the end?
Yes , just concatenate first instead of last.
$items = “MENU ITEM ” . $items;
beer!
Hi,
very interesting!
I added a custom link, but is it possible to add it in a certain position inside the menu? Like “after the first menu item”.
Thanks
Not sure if that is possible.