In the interest of keeping our websites “future-proof”, I began investigating using the HTML5 DOCTYPE.
As it turns out, the switch for most WordPress themes will be trivial:
- Change the doctype declaration to:
<!DOCTYPE html> - Remove the (now defunct)
profile="..."attribute from the opening<head>tag. - Remove the unnecessary
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">tag. - Add the
<meta charset="utf-8">tag.
Normally, this would be easily found in the header.php file of your theme. In fact, the default WordPress theme (‘TwentyTen‘ as of WP3) automatically uses the HTML5 doctype declaration.
Thematic, however, uses the traditional “XHTML 1.0 Transitional” doctype that WordPress has used for years. In order to use the HTML5 doctype, you will need to override four standard Thematic functions: thematic_create_doctype, language_attributes, thematic_head_profile and thematic_create_contenttype within your child theme’s functions.php file (you are using a child theme, aren’t you?), thusly:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | //replace the standard doctype declaration and html tag opening... function html5_create_doctype($content) { $content = "<!DOCTYPE html>"; $content .= "\n"; $content .= "<html"; return $content; } add_filter('thematic_create_doctype', 'html5_create_doctype'); //replace the lang attribute in the opening <html> tag... function html5_language_attributes($content) { $content = "lang=\"en\""; return $content; } add_filter('language_attributes', 'html5_language_attributes'); //replace the <head> tag opening to remove the now defunct profile attribute and add the <meta charset="utf-8"> tag... function html5_head($content) { $content = "<head>"; $content .= "\n"; $content .= "<meta charset=\"utf-8\">"; $content .= "\n"; return $content; } add_filter('thematic_head_profile', 'html5_head'); //remove the now defunct <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> tag... function html5_create_charset($content) { $content = ""; return $content; } add_filter('thematic_create_contenttype', 'html5_create_charset'); |
[...] other function that creates extra material for head. This broke the theme. Apparently there is a hack for your functions.php folder for your child theme – but I don’t think it as cool as [...]