How to create a custom search form in WordPress

By Posted in - Tutorials on September 26th, 2013 27 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:

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.

27 comments...

  • baidyanath - Reply

    January 16, 2014 at 5:30 am

    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.

    • Rob Golbeck -

      January 18, 2014 at 2:22 pm

      Thanks for your comment Baidyanath! I’m glad this helped! :)

  • Sagive - Reply

    February 15, 2014 at 2:51 pm

    Just remmember to use “searchsubmit” in the id instead of “search submit” meaning no spaces there…

    • Rob Golbeck -

      February 15, 2014 at 3:02 pm

      Fixed. Good catch – thanks for pointing it out! Not sure how I missed that….

  • Emre - Reply

    March 31, 2014 at 9:28 am

    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 :)

    • Rob Golbeck -

      March 31, 2014 at 11:15 am

      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!

  • kapi - Reply

    May 16, 2014 at 4:46 am

    This helps a lot

  • Jonathan - Reply

    May 23, 2014 at 8:43 am

    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.

    • Rob Golbeck -

      May 23, 2014 at 3:26 pm

      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.

  • Jonathan - Reply

    May 25, 2014 at 11:25 am

    No problem, Rob. It was a stab in the dark and I appreciate you replying.

  • Faisal - Reply

    June 24, 2014 at 5:35 am

    i have a search field in header right side please tell me how its work with custom coding.

  • Mark - Reply

    June 24, 2014 at 1:50 pm

    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?

    Thanks

  • Nera Studio - Reply

    June 30, 2014 at 2:42 pm

    The best, thank you so much for you tutorial works as charmi, thank in advanced…

  • rohit - Reply

    July 4, 2014 at 11:03 pm

    hello sir….

    I want to make a search form as corephp:
    e.g:
    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.

  • Aji Wibowo - Reply

    July 25, 2014 at 8:06 am

    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.

    Cheers,
    Aji

  • Narwinder - Reply

    August 4, 2014 at 12:49 am

    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?

  • Richard - Reply

    August 7, 2014 at 1:55 am

    Sweet! worked for me…

  • nazmul - Reply

    August 19, 2014 at 11:43 am

    Hi i follow this snippest. This is 100% work . Thanks for share

  • Chris B - Reply

    September 4, 2014 at 1:28 pm

    Nice work Rob – I came upon this from a Google search and used a bit of your code.

    • Rob -

      September 5, 2014 at 11:23 pm

      Thanks Chris! Glad you found it useful. :)

  • Html Css Tricks - Reply

    September 15, 2014 at 10:48 pm

    Really nice 100% work thanks

  • crash bandicoot para pc - Reply

    October 7, 2014 at 7:39 am

    Hey There. I found your blog using msn. This is a really well written article.
    I’ll be sure to bookmark it and return to read more of your
    useful info. Thanks for the post. I will definitely comeback.

  • شركات الوساطة المرخصة - Reply

    October 8, 2014 at 10:55 am

    I savor, result in I found exactly what I was looking for.
    You have ended my four day long hunt! God Bless you man. Have a great day.

    Bye

  • Mireya - Reply

    October 9, 2014 at 5:20 am

    Excellent post. I was checking constantly this blog and I am impressed!
    Extremely helpful information specifically the last part :) I care for such information much.
    I was looking for this particulazr information for a long time.
    Thnk you and best of luck.

  • Abortion Clinic Tamarac - Reply

    October 12, 2014 at 5:20 pm

    I delight in, cause I found exactly what I was looking for.
    You have ended my 4 day long hunt! God Bless you
    man. Have a nice day. Bye

  • christi - Reply

    October 28, 2014 at 10:12 am

    I am trying to make a custom search bar on the home page of wordpress site for online courses and offline classes center.. see more details here

    http://monosnap.com/image/m8wRA1GOPgyveMOwQ6ZCPFC1DB8HtB#

    Is there any plugin or make this kind of search bar or any codes I have to put in for creating custom search bar like this on page on either on slider or home page.

Please leave a Comment