Adding a Search Bar to the Nav Menu in WordPress
by c.bavota | Posted in Tutorials | 22 comments
When WordPress 3.0 came out, it introduced the new menu system. You can read more about it HERE if you haven’t had a chance to play around with it. Customizing your menu is a whole lot easier using the new admin interface, but certain elements can’t really be added, such as a search bar. Unless of course, you hook into the wp_nav_menu_items filter.
Here is a great code snippet I found on WP Recipes that will allow you to add a search bar to your nav menu:
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li>' . $searchform . '</li>';
return $items;
}
Add that to your functions.php file and make sure that your custom menu has been saved and added to your site and a search bar will now appear in your menu.
I also had some of my theme users request some code to add a date to the menu bar. That can easily be accomplished by adding the following code to your functions.php file:
add_filter('wp_nav_menu_items','add_date', 10, 2);
function add_date($items, $args) {
$items .= '<li class="navdate">' . date("l F jS, Y") . '</li>';
return $items;
}
I used this CSS to make the date float to the right with a padding of 10px and white text:
.navdate {
color: #fff;
float: right !important;
border: 0 !important;
padding: 10px;
}
Some of my themes have multiple menus, so you can even specify that you only want to add something to one specific menu by adding some arguments:
add_filter('wp_nav_menu_items','add_date', 10, 2);
function add_date($items, $args) {
if( $args->theme_location == 'main' )
return $items . '<li class="navdate">' . date("l F jS, Y") . '</li>';
return $items;
}
Now the date will only be displayed in the menu theme location named “main”.
This code can be modified to add any item you want to your nav menu that isn’t easily added through the admin interface.



Thanks for sharing and helping bloggers with this stuff! I can really use this code to add a searchbar!
good post it’s really help me to customize my wordpress blog
Hi:
I’ve searched for so long to add the date to the left of my menu. I only have a few items to the right. I tried adding the date with the twentyten theme and it did not work. Do you have any suggestions.
I added the code to the theme functions and them added this to the theme stylesheet under
/* =Menu
————————————————————– */
section
#access .menu-header,
div.menu .navdate {
color: #fff;
float: left !important;
border: 0 !important;
padding: 10px;
}
Any ideas?
Thanks,
Greg
Hmm. I have tested this out and it worked for me. Not too sure why it isn’t working for you.
That was enlightening. Having a search bar in the navigation menu would lessen up the burden of users. A great idea for design.
Thanks, works great. But how would I get the search box to float to the right on the menu bar?
You would need to use CSS to make it float to the right.
Thanks c.
I worked it out – I needed to define a class for the search box, with float: right in it!
I have two menu bars in my theme. How do it get the search box to only show in one of them?
thanks,
Dave
Dave, see this discussion. It’ll help you target specific menus.
You make it sound so easy “Add that to your functions.php file and make sure that your custom menu has been saved and added to your site and a search bar will now appear in your menu.”
the functions.php file is huge is there a certain line or place it needs to added to?
Place the code at the end of the functions.php file before the closing
?>tag.What’s the 10 and 2 stand for? Thanks!
The add_filter() function accepts the following parameters:
The 10 is the priority and the 2 is the number of arguments that are going to be passed.
Read more about it at http://codex.wordpress.org/Function_Reference/add_filter
Can this go anywhere in the functions page?
I’ve got my menu set up and I’ve added the code into the functions page, but search bar?
You can place it anywhere but make sure it is in between some PHP tags.
What would be the argument to specify when having multiple menus for a search form. You gave an example for date. Could you show one for a search form? Thanks.
It would be exactly the same. Such surround that middle block of code with the “theme location” if statement.
I keep getting an error code when adding the css parameters. Do they need to be added in a specific place or within the add-filter language?
Thanks!
Never mind!! I figured it out!