How to create a custom search form in WordPress

Rob GolbeckTutorials30 Comments

You can display a search form anywhere on a WordPress site by including <?php get_search_form(); ?> in the template. If your theme contains searchform.php, WordPress will display the contents of the file. If the theme does not contain searchform.php, WordPress will default to the built-in search form instead.

The built-in search is fine if you just want a basic form. But what if you want to, say, use an image for the submit button, or change the placeholder text?

I frequently come across themes where the developer has hacked the built-in form to make custom changes rather than using searchform.php. When I first started developing WordPress themes that’s how I did it too. But it’s a rookie mistake.

The problem is, when you hack the built-in search form, every time the WordPress core gets updated your changes will be overwritten. You’ll have to go back and make your changes again, if you remember to do so. And even then you’ll need to remember what you did to change it in the first place.

This is one of the reasons you should never touch the WordPress core. All your custom code should stay inside your theme directory.

For site search, searchform.php is used for just that.

Creating a custom search form in WordPress is super easy. Just create a new php file called searchform.php and save it in your theme directory. Then add your form code to the file.

For example:
(Code updated March 23, 2016)

<form role="search" method="get" class="searchform group" action="<?php echo home_url( '/' ); ?>">
 <span class="offscreen"><?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' ) ?>" />
 <input type="image" alt="Submit search query"
 src="<?php echo get_template_directory_uri(); ?>/images/search-icon.png">

WordPress will now draw on this code to display your search form rather than the built-in form. You can customize it any way you want, and it won’t be affected by WordPress core updates.

See the Codex for more about adding a search form to your WordPress site.

30 Comments on “How to create a custom search form in WordPress”

  1. Explained in very clear manner, to the point. Thank you I was looking for the customizing the default form, not able understand properly in wordpress,org.

  2. Hi,
    I have a question and I couldn’t get a solution since last month.
    I have lost of categories, pages and re-directions in my blog so my search box finds many unnecessary results if we you try to search something. I want to customize my search.php for only categories part. In other words, we you search something, the results should be only from categories sections. So I will be get rid of redundant & duplicated results. My current codes are as below…Please help me 🙂

    1. Hi EMRE, Thanks for your comment and question 🙂

      I didn’t see your code, however I think what you’re looking to do should be possible with an advanced search plugin. The plugin I’m most familiar with is Relevanssi. It has an option to show only categories (or whatever other post type or taxonomy you choose) in the search results.

      I hope that helps!

  3. Good afternoon. Is there potential here to modify this so that the search is carried out on an OpenCart installation rather than the WordPress site? Stab in the dark I know but I am hunting for a solution to create a search box which can search in OpenCart and return those results in OpenCart.

    1. Hi Jonathan,

      I really couldn’t say, as I’m not familiar with OpenCart. You’ll have to ask the OpenCart support folks. This post is focused on the WordPress search function.

  4. Thanks for this easy to understand and very helpful article.

    I am working to set this up for a library website, and I would like to add one bit of functionality beyond what you have described.

    We need to add a radio box with two options
    A.) search this site – the normal wordpress search
    B.) post the search to our catalog website

    Is there an easy way to make the form post to either option based on the user’s radio button selection?


    1. Hi Mark,
      That’s an excellent question. I actually come from a library background myself, so I’m curious how to make this work too.

      Are you using custom post types for the catalogue records? If so, this tutorial should help: http://home/handcode/

      Haven’t had a chance to try it out yet, but it looks like it should do the trick.

      Let me know how it goes!

  5. hello sir….

    I want to make a search form as corephp:
    1st step: User choose category from drop-down .
    2nd step: Enter keywords .
    3rd step: Search this “keyword” from selected “category” not from whole site.

    Please suggets me .

    Thanks in advance.

    1. hi sir…
      did you figure out the solution to this specific search form?
      We are trying something similar without success by now.
      Please suggest us 🙂

  6. Thanks! I am developing a new website for my new project, and get confused with this simple matter! Thanks for pointing that out, clear and to the point. Really appreciated that man.


  7. On my website, i want to put a search option by location so that when someone search my website, they can find results from a specific location i.e. a specific city. Can you help me with that?

  8. Hi,
    This works like a magic. Very simple! Thanks a lot! I have another question. I have two post types. Job and Event. I want different search box in each page. For example, in job archive, I will place a search box and when user type a keyword, they see result for job only. and in Event archive, I will place a search box and user see search result for event post type only. I assume I have to create two searchform.php. Do I create something like searchform-job.php and searchform-event.php? How do I get around this?

  9. Hi! Thank you for this great tutorial. It is clear and I am totally new to css..html and creating my first wordpress blog.

    I’ve found a few search boxes online that have already been coded. The developers provide usually an ‘html’ code….a ‘css styling code’…..and sometimes a ‘markup’ and ‘java’ code. This is where I could really use some help. Where am I supposed to place each of these things in my wordpress to implement the custom search form? I generally understand that a css style goes in the ‘css styles’ sheet. Is that assumption correct? And what about each of the other code snipets? And I’d especially like to know how to have the search forms appear exactly where I want them to on my wordpress site. This right here is my biggest issue is ‘implementing’ custom forms.

    In your tutorial you state to put the form template in the ‘searchform.php’…I have added this file to my ‘child theme’. Do I place the whole css code in their? The code that has all the styling? How about forms that have also other html and java codes provided?

    I’m trying to ‘implement’ an expanding search box ideally in my navigation menu in wordpress. I have a couple different ones and I’d like the box to go in the top menu which is separate from the ‘main’.

    Any help or information that could help me in that direction would be most appreciated! 🙂

  10. Does this work on third party child themes?
    This works on normal themes like a charm but seems like I am having difficulty with javo directory theme. It does not picks up the form in the child theme.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.