How to add a search bar to main navigation menu

WordPress 3.0 introduced a new menu system that is easier to use and maintain straight from the user interface. While this added a lot of customization, it is not very intuitive to add elements that are unique, like a search bar. You could get the search bar there with CSS with position absolute, z-index, and margins, but this has multiple problems, in particular with the responsive websites. To avoid this, we can hook into wp_nav_menu_items filters.

Using the build in WordPress search

Adding this filter in functions.php will the search bar at the end of the menu.

add_filter('wp_nav_menu_items','add_search_box_to_primary_menu', 10, 2);
function add_search_box_to_primary_menu( $items, $args ) {
 	if( $args->theme_location == 'primary' ) { 
		$items .= '<li class="menu-item menu-item-search cf">';
		$items .= '<form method="get"; class="menu-search-form" action="' . esc_url( home_url( '/' ) ) . '" ';
		$items .= '<input class="text_input" type="text" value="Search" name="s" id="s" placeholder="Search..." />';
		$items .= '<form>';
		$items .= '</li>'; 
        }
 	return $items; 
}

Using your own custom WordPress search

Same as above, add the following filter to functions.php.

add_filter('wp_nav_menu_items','add_search_box_to_primary_menu', 10, 2);
function add_search_box_to_primary_menu( $items, $args ) {
	if( $args->theme_location == 'primary' ) {
		return $items.get_search_form();
	}
	return $items;
}