Take Full Control of Your Theme’s Default Search Form

For some of you, this is old news. For others, not so much. Let’s get everyone in the first group, though.

WordPress comes packed with things that “just work.” They don’t require much setup and unless you’re a stickler for the details, you’ll never think to see why things work the way they do.

That’s usually the case with WordPress’ default search form. WordPress ships with a Search widget for easy placement and get_search_form() is easy enough to use. Write a little CSS for your theme and you’re golden, right?

Wrong. Well… not wrong. But when you know better, you do better.

Selecting the Default Search Form

WordPress has a built-in search form template… two of them, actually. One is written in HTML4 while the other is written in shiny new HTML5. Take a look.

HTML4 Search Form
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>
HTML5 Search Form
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

Without a search form template file in your theme (more on this shortly) or any special code for using the HTML5 form, the HTML4 form will render by default.

There are plenty of themes out there in the wild using the HTML4 form. Depending on the theme’s doctype, that may make sense. If we’re talking HTML5, though, you’re actually selling yourself short.

Input elements can be a little more detailed than they used to be. For example, type="number" will display with little up and down arrows that let you increase or decrease the quantity in a number field. type="search" has its own special behavior as well. There’s no reason why you should miss out on it.

The type attribute values introduce more additional functionality than what I’ve suggested above. I know this. Thanks, though.

As you can see in the HTML4 form, the type attribute sports a value of text. That’s boring. It’s a search form and should behave as such. The HTML5 search form gets it right and moves a few other things around. That’s my preferred choice.

To use an HTML5 form in your theme by default, I’ll share two basic choices:

  1. Add theme support for HTML5 search forms
  2. Build WordPress [the search form] Yourself 🙂

To add theme support for the HTML5 search form, meaning your theme will use the built-in HTML5 search form instead of the built-in HTML4 search form, you need to use the add_theme_support() function in your functions file.

add_theme_support( 'html5', array( 'search-form' ) );

If your theme has a setup function that’s hooked into after_setup_theme, place the above function there. If you’re using a theme that partially supports HTML5 already, there’s a chance this function already exists. It may look something like this.

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'gallery' ) );

As you can see, there are other theme features that require added support for HTML5. If search-form is not part of the list, you can add it to the array.

Overriding the Default Search Form

What we’ve discussed above will be enough for most. Both versions of the search form are pretty basic and get the job done.

If you want to take things a step further, you can. There are a number of ways to control the output of whatever search form you’re using but I’m only going to talk about one of them here. I think a template file override is the cleanest method. Here’s how it’s done.

If your theme has a searchform.php template (the name is not optional), it will be used by the get_search_form() function which is what renders the theme’s default search form, including the Search widget.

You can create the searchform.php file in the root of your theme and it now takes priority. In that file, you’ll be able to customize the search form markup however you’d. There are a couple of rules, though.

  • the form must do a GET to your blog’s home
  • the search input field should always be named s
  • More Details

When I override the search form template with searchform.php, I like to copy the default form straight from code first that way I don’t break any of the important functionality. Then I just tweak from there. Check out the contents of the default search form built into the Presentation theme.

<?php
/**
 * default search form
 */
?>
<form role="search" method="get" id="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div class="search-wrap">
    	<label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'presentation' ); ?></label>
        <input type="search" placeholder="<?php echo esc_attr( 'Search…', 'presentation' ); ?>" name="s" id="search-input" value="<?php echo esc_attr( get_search_query() ); ?>" />
        <input class="screen-reader-text" type="submit" id="search-submit" value="Search" />
    </div>
</form>

I was able to escape a few attributes, add a wrapping div with a class to the form contents, and get it translation ready. That’s valuable control. The freedom is yours.

Happy coding. 🙂

Resources

Get Search Form – Default search form output
Core Function – View the core to learn more about how the above function works
HTML5 Support – Learn about other ways to use HTML5 in your themes

31 Comments:
  1. Hi there,

    Thank you for this article! I’ve been trying to figure out how to change the text within my search box for just the side bar widget and not the widget in the top hat navigation (www.CurlsUnderstood.com). Right now both say “SEARCH”.

    How can I do this? When I try and update the search form.php it updates the text in both but I want them to say different things.

    Any help would be much appreciated 🙂

    • Hi, Sylvia! That can be done but it may take a little template editing.

      What I would suggest is making one of those search forms unique and letting the other one remain default. Based on what you said, it sounds like you want the sidebar form to be unique while all other search forms remain as the default.

      I don’t know the ins and outs of your theme but I’m guessing it has a sidebar.php template file that’s being used to output your sidebar (which includes the PHP code for the widgetized area). If so, what I would do is actually remove the search widget from your sidebar (on the Widgets screen in the WP dashboard) and then manually build the search form into the sidebar.php file above the code for the widgetized area.

      With an exact copy of the HTML for the form, building it manually in place will give the same exact appearance on the front-end but only you will know the search “widget” is not actually a widget… but the hardcoded HTML instead. Then with the manually built search form, you’re free to use whatever text you want in the input field.

      This is the HTML output by the sidebar search widget: https://gist.github.com/sdavis2702/f597e56118c62b781ae5

      1. Remove the search widget from your sidebar.

      2. Open your theme’s sidebar.php file (if you are using a child theme, which you probably should be, copy the sidebar.php file from the root of the parent theme into the root of the child theme first) and find the following line:

      <aside class="sidebar" role="complementary">

      *Directly* below that line, add the HTML from the link and adjust “NEW TEXT” to your liking. Save the file, of course.

      3. Let me know if it works.

      • Hi Sean,

        Thank you for your prompt response! I’m embarrassed to admit that I don’t know if I have the child or parent theme but I looked for the sidebar.php in the Appearance>Editor section and did not find the line you referenced…

        Instead this is what I see in sidebar.php:

        <aside class="sidebar” role=”complementary”>

        Am I doing something wrong?

  2. OK – so it seems the full code is not displaying. What you see is not the code I’m posting.

    What would be the HTML for the link that I should post under the .php? And under what line since I see 15 lines.

    • Hi, Sylvie. It’s best to never try to paste raw code into someone’s website. Comment forms and other textareas are not build to just display code. It will try to parse the code instead, which leads to random results.

      If you are not using a child theme, it’s best not to make this edit and just use the forms as they are. Your theme comes from Theme Forest and it has quite a few sales. So chances are it receives updates. Updates will override any customization made to parent themes because they delete the old copy of the theme from your folder and replace it with a new copy of the theme.

      Child themes are designed to inherit the functionality of a parent theme but still be considered a separate theme in your WordPress install. They have the ability to host style and functionality changes that affect the way the parent theme works/looks. But when the parent theme is update (and the old folder is replaced with a new one), the child theme folder stays in place. This protects your customizations. http://codex.wordpress.org/Child_Themes

      You do *not* want to make this edit without using a child theme. While it will work just fine, it will be lost at the next update, making the work pointless. What you want to do is contact the theme support to see if they have a child theme ready for use (not hard to do it yourself it you follow the instructions in the above link). If you can get that installed and activated, this is a simple edit.

  3. Hi Sean!
    I have insured against what you mentioned by using the Custom CSS code field that theme authors created. I also save it in a text file so that when updates are made to the theme I have a record of customizations I made.

    I’m pretty handy with HTML/CSS but this edit to the SEARCH box text has alluded me. What code would I use in either Custom CSS field or sidebar.php to create the unique text in the SEARCH box?

    Thanks again, in advance, for your help!

    • CSS is a completely different language. CSS overrides are easily done from Custom CSS plugins or any other CSS files and they do exactly as I’ve described, protect your customizations from updates. But we’re not talking about CSS here. You need HTML edits in a PHP file… it’s a totally different beast.

      I know you’d like for me to make it more simple than what I’m telling you but I absolutely promise you that what I’ve said here is 100% what you need. I wrote the HTML for you and told you where to put it in your sidebar.php template file. If you put it in the sidebar.php file of your parent theme, you will lose the customization next time you update. If you put it in a duplicated sidebar.php file in your child theme, it will behave just like a Custom CSS plugin and be protected from future updates.

      It states on your theme description that it supports child themes. http://themeforest.net/item/simplemag-magazine-theme-for-creative-stuff/4923427?ref=ThemesIndep You need to get that child theme and install it. If you do not want to go that route, I will help you put it in your parent theme. But you will have to assume responsibility if you lose your customizations at a later date.

      Please paste the entire contents of your parent theme’s sidebar.php file into a snippi and link so I can see. http://snippi.com/

  4. Hi Sean,

    Understood! I think the easiest option for me might be to download another 3rd party search plugin for the sidebar and style it accordingly.

    I don’t want you to spend too much time on this. BUT if it’s a low LOE here is the sidebar.php for my theme: http://snippi.com/s/6m6omy6

    🙂
    Sylvia

  5. I’m curious, is there any way to force the search form to be secure (ssl)?

    I ask because no matter what I do, when I run my site through whynopadlock.com I get a warning that the search form is insecure.

    I’ve tried a bunch of hacks.

    I already have a plugin forcing the page to ssl. I’m not sure why the search form remains insecure.

    Any ideas?

    • I’ve already explained how to take control of the form. If you need style customizations, you need to be able to write CSS or hire someone who can.

  6. How does one customise the actual search function itself? For example if I wanted to restrict the search a single category?

  7. thank you for tutorial, I try the code you post, is working, but when i try to customized with css, is not working, you have any idea for the solution

  8. How can i add dropdown category list with my search box?is there any simple way?So that people can search only for selected category.

  9. Hi..

    First would say thanks for your reply before anyone answering this questions. I used this below code in my WordPress site, It’s working only in Search results page. This is not working in Main page and sub pages as well. Please anyone answering this question asap. Thanks

    <form role="search" method="get" id="search-form" action="”>

    <input type="search" placeholder="” name=”s” id=”search-input” value=”” />

    • Hi Selva,

      What’s not working? Are you sure the search form on those pages are the default WordPress search form and not a form built into your theme?

Leave a Reply to sdavis2702 Cancel Reply

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

*