Mar
09
2011

Adding a Search Bar to the Nav Menu in WordPress

by   |  Posted in Tutorials  |  20 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.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
Share the love...

Tags: , , , , , ,

Short URL: http://bit.ly/hXERB6

Discussion 20 Comments

  1. Slaapkamer Ideeen on March 14, 2011 at 10:44 am

    Thanks for sharing and helping bloggers with this stuff! I can really use this code to add a searchbar!

  2. isharpnote on March 17, 2011 at 1:11 am

    good post it’s really help me to customize my wordpress blog

  3. Gregory Betti on March 20, 2011 at 2:06 pm

    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

    • c.bavota on March 22, 2011 at 11:24 am

      Hmm. I have tested this out and it worked for me. Not too sure why it isn’t working for you.

  4. arcanys on April 1, 2011 at 5:20 am

    That was enlightening. Having a search bar in the navigation menu would lessen up the burden of users. A great idea for design.

  5. Halcyon Smith on April 10, 2011 at 12:08 am

    Thanks, works great. But how would I get the search box to float to the right on the menu bar?

    • c.bavota on April 10, 2011 at 9:45 am

      You would need to use CSS to make it float to the right.

    • Halcyon Smith on April 10, 2011 at 8:36 pm

      Thanks c.

      I worked it out – I needed to define a class for the search box, with float: right in it!

  6. David on May 10, 2011 at 4:57 pm

    I have two menu bars in my theme. How do it get the search box to only show in one of them?

    thanks,
    Dave

  7. Mike on June 2, 2011 at 2:27 pm

    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?

    • c.bavota on June 2, 2011 at 2:59 pm

      Place the code at the end of the functions.php file before the closing ?> tag.

  8. Nevin on June 22, 2011 at 10:19 pm

    What’s the 10 and 2 stand for? Thanks!

    • c.bavota on June 23, 2011 at 11:59 am

      The add_filter() function accepts the following parameters:

      <?php add_filter( $tag, $function_to_add, $priority, $accepted_args ); ?>

      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

  9. Kris Barton on July 10, 2011 at 6:03 pm

    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?

    • c.bavota on July 11, 2011 at 12:14 pm

      You can place it anywhere but make sure it is in between some PHP tags.

  10. Paul on August 14, 2011 at 5:07 pm

    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.

    • c.bavota on August 15, 2011 at 12:31 pm

      It would be exactly the same. Such surround that middle block of code with the “theme location” if statement.

  11. C on August 31, 2011 at 2:45 pm

    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!

  12. C on August 31, 2011 at 3:34 pm

    Never mind!! I figured it out!