Adding Search to a WP Menu

[ahallmark]

Hello!

Trying to add the WordPress search function to show up as an option in a Wordpress Menu. I added the following to the functions.php child:

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li>' . get_search_form( false ) . '</li>';
return $items;
}

It does show up in the menu but it’s not letting me interact with it or type anything in. Seems to be conflicting with something in Pro? Any ideas as to what I should add?

[mldarshana]

Hi There @ahallmark

Thanks for writing in! If you’re using Pro, you can use search inline element and place it into your navbar.

For X theme, you can enable search functionality by head over to X -> Theme Options -> Header -> Search section.

Hope that helps.

[ahallmark]

Appreciate the response but this will not solve the issue. We are trying to add the search function as an option in a Navigation Layered element. Thanks!

[nabeel]

Hi @ahallmark,

To fix the issue, please replace your code with the following code:

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li class="menu-item menu-item-type-search_type menu-item-object-search menu-item-custom-search">' . get_search_form( false ) . '</li>';
return $items;
}

Then add the following code in the Theme Options > CSS:

.menu-item-custom-search {
    pointer-events: all !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[ahallmark]

Awesome. Works! Is there a way to specify the specific menu? So like Primary menu for example? Thanks for the help!

[nabeel]

Hey @ahallmark,

You can do this by wrapping your code with a check if( $args->theme_location == 'primary' ) . Try replacing the previous code with the following:

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
	if( $args->theme_location == 'primary' ) {
		$items .= '<li class="menu-item menu-item-type-search_type menu-item-object-search menu-item-custom-search">' . get_search_form( false ) . '</li>';
		return $items;
	}
	else {
		return $items;
	}
}

Hope this helps!