HTML5 Support in WordPress 3.6

For the longest time, I had hooked into the default search and comment form to add HTML5 features for my themes. With the release of WordPress 3.6, a new core option was introduced that already has an HTML5 option built-in for these elements.
It doesn’t take much to activate but it requires one extra step to make sure things look right.
First you need to open up functions.php. If your theme is built correctly, it should have a function that hooks into the after_theme_setup action. Here’s the code block from Tonic:

add_action( 'after_setup_theme', 'bavotasan_setup' );
if ( ! function_exists( 'bavotasan_setup' ) ) :
/**
 * Initial setup
 *
 * This function is attached to the 'after_setup_theme' action hook.
 *
 * @uses	load_theme_textdomain()
 * @uses	get_locale()
 * @uses	BAVOTASAN_THEME_TEMPLATE
 * @uses	add_theme_support()
 * @uses	add_editor_style()
 * @uses	add_custom_background()
 * @uses	add_custom_image_header()
 * @uses	register_default_headers()
 *
 * @since 1.0.0
 */
function bavotasan_setup() {
	load_theme_textdomain( 'tonic', BAVOTASAN_THEME_TEMPLATE . '/library/languages' );
	// Add default posts and comments RSS feed links to .
	add_theme_support( 'automatic-feed-links' );
	// This theme styles the visual editor with editor-style.css to match the theme style.
	add_editor_style();
	// This theme uses wp_nav_menu() in one location.
	register_nav_menu( 'primary', __( 'Primary Menu', 'tonic' ) );
	// Add support for a variety of post formats
	add_theme_support( 'post-formats', array( 'gallery', 'image', 'video', 'audio', 'quote', 'link', 'status', 'aside' ) );
	// This theme uses Featured Images (also known as post thumbnails) for archive pages
	add_theme_support( 'post-thumbnails' );
	// Add a filter to bavotasan_header_image_width and bavotasan_header_image_height to change the width and height of your custom header.
	add_theme_support( 'custom-header', array(
		'default-text-color' => 'fff',
		'flex-height' => true,
		'flex-width' => true,
		'random-default' => true,
		'width' => apply_filters( 'bavotasan_header_image_width', 1500 ),
		'height' => apply_filters( 'bavotasan_header_image_height', 550 ),
		'admin-head-callback' => 'bavotasan_admin_header_style',
		'admin-preview-callback' => 'bavotasan_admin_header_image'
	) );
	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
		'header01' => array(
			'url' => '%s/library/images/header01.jpg',
			'thumbnail_url' => '%s/library/images/header01-thumbnail.jpg',
			'description' => __( 'Default Header 1', 'tonic' )
		),
	) );
	// Add support for custom backgrounds
	add_theme_support( 'custom-background' );
	// Add HTML5 elements
	add_theme_support( 'html5', array( 'comment-list', 'search-form', 'comment-form', ) );
}
endif; // bavotasan_setup

The important part for including HTML5 support is that snippet at the end.

// Add HTML5 elements
add_theme_support( 'html5', array( 'comment-list', 'search-form', 'comment-form', ) );

So far those three options are the only ones available. But if it gets updated you can always find out but looking at the codex:
http://codex.wordpress.org/Semantic_Markup
Once you’ve added that to your setup the only thing left to do is include some CSS.

/* =Assistive Text
-------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
}
/* =Search Form
-------------------------------------------------------------- */
.search-field {
  width: 100%;
}
.search-submit {
  display: none;
}

I’m not a fan of the search button so I like to remove it. And I like to force my search field to the full width of its container. If your theme has accessibility build in then you might already have the screen reader CSS. If not, be sure to include it so that you don’t see text that is only there for a screen reader.
With just that little bit of code you can now guarantee that certain core elements in WordPress use the appropriate HTML5 semantics.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie