Custom WordPress Search Form Without Plugin
A custom search form allows you to have more control over different search functions and styles on your WordPress website. In this article, we’ll cover a couple of approaches for customizing the default WordPress search form, along with some examples.
What is the get_search_form function?
The WordPress core function get_search_form() allows you to display a search form on your website. This function is responsible for handling the search form widget under Appearance > Widgets in your WordPress Admin area and other pages that require a search form.
How to display the search form in a template?
The search form can be displayed on a template by adding the following code:
<?php get_search_form(); ?>
Where is the get_search_form function located?
When the function get_search_form() is called, it will first attempt to find if there is a custom search form file with the name searchform.php in the child or parent theme. If it doesn’t find the file, then the default core search function from WordPress will be used instead, which comes from wp-includes/general-template.php.
Note:
There is also the get_search_form filter that will be invoked first, even if a searchform.php file exists. This filter is used to edit or replace the core get_search_form() function.
Most themes come with a search form matching the default theme styles. But what if you want to make changes, add your own classes, or just build your custom HTML search form from scratch? Well, You can do it with just a few lines of code.
In this article, we will explore two ways of building your own custom WordPress search form.
# Option 1
Custom WordPress Search Form with a Function
An easy way to build your custom search form is by using the add_filter WordPress hook. All you have to do is add the following code to your functions.php file:
function custom_search_form( $form ) {
$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Search:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
</div>
</form>';
return $form;
}
add_filter( 'get_search_form', 'custom_search_form', 40 );
The custom_search_form function stores your custom form in the $form variable. The add_filter hook will replace the core search form with your custom form.
Customize the search form by adding your own inputs, labels, styles, classes, or ids in the $form variable value.
# Option 2
Custom WordPress Search Form with a Template
Another way to build your custom search form is by creating a form template. Simply add a searchform.php file in your main theme directory, and WordPress will use that instead of the built-in core search form.
Open your favorite code editor and create a new file with the name searchform.php and paste the following code example:
<?php
/* Custom search form */
?>
<form role="search" method="get" id="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="input-group">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" id="search-input" value="<?php echo esc_attr( get_search_query() ); ?>">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</form>
Now you can customize the form by adding your own custom styles, classes, and ids. Keep in mind the following when making changes to the form:
- The custom search form file name should be
searchform.php. - The search form should make a GET request to the homepage of the website.
- The input name text field should be
name="s"by convention. - You can use the
<label>tag in your form – check example below.
WordPress Search forms examples and customizations
In this section, we will cover some search form examples and common customizations.
How to restrict search results to post only
To restrict search results to posts only or any other post type simple include a hidden input with the post type value. Add the following hidden input tag below the other input to restrict search results to posts only.
<input type="hidden" value="post" name="post_type" id="post_type" />
HTML5 WordPress search form with label and button
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field"
placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>"
value="<?php echo get_search_query() ?>" name="s"
title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>
Note:
Your theme needs to support HTML5 for the form to work correctly.
When using an HTML5 form make sure your theme supports it by checking your functions.php file and search for something similar to this:
/**
* Add HTML5 theme support.
*/
function wp_lule_after_setup_them() {
add_theme_support( 'html5', array( 'search-form' ) );
}
add_action( 'after_setup_theme', 'wp_lule_after_setup_theme' );
WordPress / Bootstrap 4 search form with FontAwesome icon
<form role="search" method="get" id="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" id="search-input" value="<?php echo esc_attr( get_search_query() ); ?>">
</div>
</form>
Conclusion
As you can see, this WordPress search form customizations are very easy to implement. You can customize the search form to not only match the visuals of your active WordPress theme, but to provide a better user experience.