While adding the new Twitter buttons on Thesify, I noticed that they used the new HTML5 Data Attributes which invalidated my markup. While having an valid markup may not be on the top priority for most people, there’s no reason not to switch.
I used the thesis_doctype and thesis_head_profile filters to change the site’s doctype to HTML5.
Add the following code to your custom_functions.php to switch your Thesis powered site’s doctype to html5.
add_filter( 'thesis_doctype', 'thesify_html5_doctype' );
function thesify_html5_doctype() {
return '<!DOCTYPE html>';
}
add_filter( 'thesis_head_profile', 'thesify_html5_head_profile' );
function thesify_html5_head_profile() {
return '';
}
function thesify_html5_doctype() {
return '<!DOCTYPE html>';
}
add_filter( 'thesis_head_profile', 'thesify_html5_head_profile' );
function thesify_html5_head_profile() {
return '';
}
{ 14 comments… read them below or add one }
Question: Would this break other components of my Thesis site if deployed? Like tracking code or something?
It shouldn’t break anything according to John’s article linked above. I’ve been using this on a few sites and haven’t had any problems.
Have you managed to drop in any HTML5 features into any of the sites yet?
What kind of features? I’ve used the data attributes on some sites, that are HTML5 only.
I was thinking of using the fig and figcaption attributes with Thesis….got the idea off this site.
http://www.elated.com/articles/smooth-fading-image-captions-with-pure-css3/
Just not sure if it’s worth the effort if you get my drift….it does save me the effort of custom fields each time though.
If you follow the tutorial exactly, it should work fine. Make sure you either include html5shiv script or the Step 7 from the tutorial for Internet Explorer compatibility.
I had a small question about this post..
I was just curious why/how it created an invalid markup in the first place. How did adding the twitter element invalidate markup? HTML5 starts at case of year 0 thinking. If you added the html 5 markup as wouldn’t the markup have to validate under HTML5 circumstances?
Thesis uses XHTML1.1 by default, and the data-* attribute methods used by Twitter Tweet buttons are defined only in HTML5.
I was just wondering since the markup will be HTML5 for thesis if this causes any further problems because thesis was defined by XHTML 1.1 and not HTML 4.01 ? So while validating for HTML5 after the inclusion of this code the markup shows no errors?
Thanks for your help
It shouldn’t cause any compatibility problems, as John Resig’s post I linked to mentions.
Worked as advertised. Good stuff.
Did you add in all the sections and everything rather than div’s? Like , , , etc?
that was supposed to say did you add in -article-, -aside-, -nav-, etc etc or just change the doctype? I understand this little snippet at the top just changes the doctype, but what about the actual markup? Did you go through and change your theme or what…
Nope, I just changed the doctype. I didn’t have any need to change the rest of the markup.