CAM Web Design » HTML http://camwebdesign.com High quality, cost effective wed design and hosting solutions Mon, 12 Dec 2011 11:48:26 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Using HTML5 with your Thematic Child Theme http://camwebdesign.com/techniques/using-html5-with-your-thematic-child-theme/ http://camwebdesign.com/techniques/using-html5-with-your-thematic-child-theme/#comments Sun, 15 Aug 2010 02:32:38 +0000 Troy http://camwebdesign.com/?p=1180 (more...)]]> 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:

  1. Change the doctype declaration to: <!DOCTYPE html>
  2. Remove the (now defunct) profile="..." attribute from the opening <head> tag.
  3. Remove the unnecessary <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> tag.
  4. 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');

Similar Posts:

]]> http://camwebdesign.com/techniques/using-html5-with-your-thematic-child-theme/feed/ 1