DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

Do you ever wanted to be able to automatically add a search field to WP 3.0+ navigation menus? If yes, just have a look to today’s recipe, you’ll probably love it!

Open your functions.php file, and paste the following code. The search field will be displayed once you saved the file.

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;
}

Thanks to Ronald for the cool tip!

Tags

13 Comments

  1. This didn’t work for me. Does it matter what theme you’re using? What does “wp_nav_menu_items” referring to?

  2. Bill Andersen

    Didn’t work for me either.

  3. Make sure you guys go to the right theme (the theme you selected) and add it there. *** make sure you save.

  4. Hi William, I am using magazine basic theme, which also uses wp_nav function to introduce menu, problem with me, is that i have customized search form for example code is under given how can i add this to my site’s nav bar, or is there any option how i can exempt of nav bar, so i will place it manually after adding my form code?

    thank you.

  5. This works as charm. But one issue i have…

    My website has 2 menu bars and i want to add the search box to only one of them..the main navigation one. Hope you can help..thanks in advance

  6. Pile of shite. Returns an error ‘Call to undefined function add_filter() in…’

  7. Worked great! For those that it didn’t work for, it depends how your nav menu is called, as another similar code didn’t work for me.

  8. Somehow my text got messed up in the last comment. Try this:

    If you have multiple menus and want to add the search bar to just one menu add

    if( $args->theme_location == ‘main_navi’ )

    above the line $items .= ” . $searchform . ”;
    in the code at the beginning of this article:

    Depending on your theme you may have a different name for main_navi. It could be called navi or top_navi or another name.

    Search your functions.php file for register_nav_menu to find the names of your menus. You need to use one of those names.

    Also check Menus under Appearance in your WordPress dashboard to see which menu you selected as your main menu.

  9. Worked Perfectly, just opened functions.php and pasted it right at the top!

  10. How do I add css to place it properly?

  11. nice tutorial. it work fine for me but when i use this function my search box show on my both menu like: top menu and main menu but i want to show my search box only main menu.how it will work for this condition.

    please help me and thanks for this tutorial :)

    regards
    Rahul Kashyap

  12. This worked for me, but I only wanted to add it to my top menu bar, but not my bottom. How do I only add it to my top menu bar?

Leave a Comment

Your email address will not be published. Required fields are marked *