How do I add a search box to the nav menu?

by

I would like to add a search box to the nav menu by appending the following code in functions.php (at the end of the file, but before ?>).

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

However, the search box doesn’t appear.

EDIT: Actually, there is no problem with the above code. While clicking the search icon (PS: the theme I use is Radiate), two search boxes appear.

What I expect is to place the search box inside the nav menu, instead of a click is needed to show the search box:

enter image description here

PS: here is the searchform.php:

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>">
    <label>
        <span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'radiate' ); ?></span>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'radiate' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
    </label>
    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'radiate' ); ?>">
</form>

1
1

Your code works perfectly for me as is. The only thing I can think of is that you have a searchform.php defined in your theme but it’s empty? (If searchform.php doesn’t exist in your theme, WP will use a default form.)

Leave a Comment