How to Create Custom Search Form in WordPress

Are you looking 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 sections on the website. You may have created a design of a nicely looking search form and now want to fit it into WordPress.

WordPress provides a method get_search_form() which renders the search form. If you use this method in your custom theme, you will get a default search form created in WordPress core. And you don’t want the default search form as your form design is different. To overcome this situation, you need to create a custom search form that overrides the default one.

By creating a custom search form you can add your own markup and styling to it. In this article, I show you how to create a custom search form in WordPress.

The method get_search_form() looks for 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.

Create a Custom Search Form

Create searchform.php file in your active theme’s directory. In this file add your markup of the search form. For instance, in my case search form 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>

There is nothing fancy or complex in the above code. I just gave id ‘searchform’ to the form tag and class ‘search-field’ to the search text field. Using this id and class I can add styling to the search form. Like this in your case, you have to use your own markup.

Display Search Form

The next step is displaying the search form on the website. You may want to place the search form in the sidebar, header, next to the menu, etc.

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

<?php get_search_form(); ?>

After placing the above code at the desired place, go to the browser. You should now see your search form on the website.

Customize Search Result

It may be the case, your website has 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 need to add a hidden field for each post type in the search form.

Let’s say you have created custom post types book, magazine, ebook, 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 for that keyword in all the above post types for matching the result.

I hope you understand how to create a custom search form in WordPress. I would like to hear your thoughts and suggestions in the comment section below.