WordPress menus are amazing. The drag-drop interface makes it easy for developers and users of WordPress themes. We’ve shown you how to add a custom menu in WordPress and how to design a custom menu in the past. One thing that is limited to the visual menu interface is that only links (pages, categories, or custom links) can be added.
What if you want your WordPress menu to add a custom item? You may want to add a search bar or log in/out the link, date of today, or anything else in a WordPress menu. It does not mean that it is not possible just because there is no visual interface.
In this article, we will show you how you can add custom items to all or specific WordPress menus using the hook wp_nav_menu_items.
Note: This tutorial is intended for developers of WordPress themes, so you should know basic HTML/CSS and how WordPress themes work. Obviously, before you can proceed further, you must have a custom menu enabled in your themes.
Let’s begin with the basics. In the wp_nav_menu_items hook, we need to add our own filter.
This would look like an example:
[php]
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;
}
[/php]
You can now use the conditional statements together with the argument theme location, as you can see. This allows you to target a specific location of the menu with any conditions. You don’t have to use the conditional statement if you don’t want it. Just add it or vice versa to a specific menu location.
Now that you’ve seen a basic example, let us show you some specific examples of how it works.
Adding Log in/out links to a Specific WordPress Menu
If you want your users to be able to log in / out, you can add the links to one place in your custom menu. The following snippet displays log – in / out links to your users in the menu location: primary. If you want, you can change the location of the menu.
[php]
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; }
[/php]
Adding a Search Bar into a Specific Menu
Would you like to add a search bar to a particular menu? Don’t look any further. You can do this by pasting this snippet:
[php]</pre>
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;
}
<pre>[/php]
Adding Today’s Date to a Specific WordPress Menu
The following snippet will add the date to your WordPress menu today. To tweak the code, you can use our Today’s Date manual.
[php]</pre>
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;
}
<pre>[/php]
