Quick Tip – Changing the WordPress Search Form to HTML5 – Free Plugin

It kind of sucks the new WordPress 3’s search form is not HTML 5 when the Twenty10 Theme is. Our new search form will look like the below in Safari.

To make the search form HTML 5, add the following to the functions file of your theme or create a plugin. As a bonus I have turned this into a plugin too. Feel free to download, use, and modify our HTML 5 Search Form plugin. This plugin should be shortly is on the WordPress site.

The below code makes use of the new section element, search input type and placeholder attribute.

[cc lang=”PHP”]function my_search_form( $form ) {
$form = ‘

‘ . __(‘Search for:’) . ‘

‘;
return $form;
}

add_filter( ‘get_search_form’, ‘my_search_form’ );[/cc]

To create it as a plugin by adding the following to the top of the PHP.

[cc lang=”PHP”]
/*
Plugin Name: HTML 5 Search Form
Plugin URI: hhttp://createmy.com.au/quick-tip-changing-the-wordpress-search-form-to-html5/
Description: This plugin will change your WordPress search form to a HTML 5 search form.
Version: 1.0
Author: Dale Hurley
Author URI: http://createmy.com.au
License: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/[/cc]

Remember if you do turn it into a plugin, do NOT close the PHP tag.

Advertisements