How to use the new <search> element with WordPress

There's a new HTML element in town! You can now use <search> to semantically mark up a search box. It's great for letting screen-readers and other assistive tech know what a form does.

It's only supported in WebKit for now - other browsers will get it eventually.

The WordPress default search widget hasn't yet updated, but I'm going to show you how you can start using it today!

In your theme, create a new file called searchform.php - WordPress will automatically load it for the search widget.

Add the following to the file:

 HTML<search role="search">

    <form method="get" id="searchform" class="searchform" action="<?php echo get_site_url(); ?>">

        <label class="screen-reader-text" for="s">Search for:</label>

        <input type="search" value="" name="s" id="s">

        <input type="submit" id="searchsubmit" value="Search">

    </form>

</search>

Save that and upload it to your theme's directory.

That's it!

Once the element is widely supported, you can drop the role="search".

Enjoy!