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.