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.
