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:
- Add theme support for HTML5 search forms
- 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
- 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. 🙂