WordPress: Multiple Search Forms

| 4 comments

This entry is part of my WordPress development series, providing tutorials on specific things you can do in WordPress. Read some more?

Sometimes you may need to have multiple search forms within your website. You can easily call the WordPress function get_search_form() wherever you want your search forms to be. An example of this could be when you have a search input in the header or footer of your website. But then, you may have a search form at the top of your mobile navigation that slides out on mobile devices. Or, there’s one on the Search page of your website as well when there’s no results.

However, if you’re someone (like me) who tries to have valid code (or as close as we get), then this won’t work with the default WordPress search form because it will use the same ID for each one, which won’t validate.

Custom Search Forms

To get around this, in our functions.php file we create two functions. The first function is to customize the default WordPress search form:

(Feel free to customize your search forms the way you want with any IDs or Classes, labels, buttons, etc… but make sure name=”s”!)

function main_search_form( $form ) {
    $form = '<form role="search" method="get" id="search-form" action="'. home_url( '/' ) .'">';
    $form .= '<label for="search">Search</label>';
    $form .= '<input name="s" id="search" size="15" type="text" value="Search" title="Search">';
    $form .= '<input type="submit" value="Submit">';
    $form .= '</form>';
    return $form;
}
add_filter( 'get_search_form', 'main_search_form' );

Then we place the WordPress function get_search_form() in our template file where we want our search form to be (such as header.php):

get_search_form();

The second function is for our extra or second search form:

function extra_search_form( $form ) {
    $form = '<form role="search" method="get" id="search-form-mobile" action="'. home_url( '/' ) .'">';
    $form .= '<label for="search-mobile">Search</label>';
    $form .= '<input name="s" id="search-mobile" size="15" type="text" value="Search" title="Search">';
    $form .= '<input type="submit" value="Submit">';
    $form .= '</form>';
    return $form;
}

But, we don’t add the filter just yet.

Wherever we want our extra search form to go, we temporarily use it with the same WordPress function get_search_form() by adding and removing our function with filters.

add_filter( 'get_search_form', 'extra_search_form' );
get_search_form();
remove_filter( 'get_search_form', 'extra_search_form' );

And we’re done! Now we have multiple search forms (styled the same or different… however we want or need them to be!) and they have their own IDs so our pages will still validate even with two search forms on one (whether or not they’re visible at the same time).

Searchform.php

We know that we can also customize the default WordPress search form using the template file searchform.php. For example:

<form role="search" method="get" id="search-form" action="<?php home_url( '/' ); ?>">
	<input type="text" name="s" id="search" value="Type and hit enter." placeholder="Type and hit enter." />
</form>

This form replaces the default when we use get_search_form().

Instead of using the first custom search form function above, you may be able to use the template file instead to customize the default search input, and just use the second function above for the extra search form. I say may because I haven’t tested this out myself.

Search Widgets

Don’t forget, you can also use the Search Widget, and can customize that too!

function widget_override_search() {
?>
<li class="widget">
	<form role="search" id="search-widget" method="get" action="<?php home_url( '/' ); ?>">
		<h2 class="widgettitle">Search</h2>
		<input type="text" name="s" id="s-widget" value="Type and hit enter." placeholder="Type and hit enter." />
	</form>
</li>
<?php
}
if ( function_exists ( 'register_sidebar_widget' ) ) {
    register_sidebar_widget(__( 'Search' ), 'widget_override_search');
}

Happy searching! 🙂