Add Search box in WordPress Menu

Add Search box in WordPress Menu with, With out using plugin.

By default WordPress Initially check for the search form from searchform.php

And this search form can call using “get_search_form()” function

get_search_form() will display the search form

Add Search box in Menu

To add the search box in menu, we need to add get_search_form() in the menu.

To make changes in menu items – can use “wp_nav_menu_items” filter

function add_search_form( $items, $args ) {
    $items .= '<li class="ht_menu_search_bar">' . get_search_form( false ) . '</li>';
    return $items;
}

add_filter( 'wp_nav_menu_items','add_search_form', 10, 2 );

( if plan to use different search form then the default one using get_search_form, here is an example form wordpress developers

Add this code in functions.php or in a any file and include that file in functions.php or add using plugin.

Its better to create a child theme and create functions.php in child theme and add. by this way you code wont replace when theme updates.

CSS

A sample CSS for an idea

make the menu to float right side of the menu, on medium, large screen

mostly you theme will collapse menu in small screen.

@media screen and (min-width: 767px ) { 
	.ht_menu_search_bar {
		float: right;
	}
}

---

plugins to add Search box in header menu

Bop Search Box Item Type For Nav Menus

Search box on Navigation Menu

( We did’t test any this plugin to add menu )

---