How to Create Custom Search Form in WordPress

Do you want to create a custom search form on a WordPress website? We used to build themes from scratch so that we can add our own styling to the website. You may have created a nicely crafted search form and now want to fit it into a WordPress theme. In this article, I show you how to create a custom search form in WordPress.

WordPress provides a method get_search_form() which renders the search form. If this method is used directly, you will get a default search form present in WordPress core. But, you don’t want this default search form as your design is different. To solve this problem, you need to create a custom search form that overrides the default one. By overriding the default search form, you can add your own markup and style to the new search form.

Create a Custom Search Form

The get_search_form() function looks for a searchform.php file in your active theme’s directory. If this file does not exist then WordPress uses the default search form which is included in its core.

It means you should create a searchform.php file in your active theme’s directory. Doing so WordPress takes the search form from your theme instead of its core. In this file add your markup of the search form. In my case, the HTML is as follows.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>" />
    <input type="submit" value="Search" />
</form>

Here, there are a few things to consider.

GET method: The search form method should be the ‘GET’.
Action URL: The action URL of the form must be set to the home page.
Search Query: Using the get_search_query() method, the entered keyword is printed in the search field.
HTML Class and ID: I have given the id ‘searchform’ to the form tag and the class ‘search-field’ to the text field. Using these values I can add styling to the form.

Display Search Form

The next step is displaying the search form on the website. Now it’s up to you where to put this search form. You would want to place the search form in the sidebar, header, footer, next to the menu, or somewhere else.

Using the function get_search_form() one can display the search form anywhere on the website. All you need to do is call this method from the place where you want to display it.

<?php get_search_form(); ?>

After placing the above code, go to the Browser and you should see your search form on the website.

Customize Search Result

In some scenarios, your website might have more resources like books, magazines, ebooks, PDFs, etc. and you need to show content from all these resources in the search result. It can be done easily.

Assuming you have custom post types for all these resources, you have to add a hidden field for each post type in your search form.

Let’s say you have created custom post types book, magazine, ebook, and pdf for the above resources. Then, your hidden fields will be as follows.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>" />
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search" />
</form>

Now when someone enters a keyword in the search form, WordPress searches the keyword in all the above post types and returns the matched result.

I hope you understand how to create a custom search form in WordPress. This tutorial should help you to use your own search form on your WordPress website.