Genesis 2.0 Beta for WordPress was just released for public review and one of the key features is HTML5 support. However, HTML5 isn’t on by default though and some may wonder why. So I thought I’d illustrate that by comparing the DOM of one of my test sites before and after enabling Genesis 2.0 HTML5 support. First, the method being used to enable HMTL5 is by using WordPress’ add_theme_support function:
add_theme_support( 'genesis-html5' );
UPDATE: After Genesis 2.0 RC2 StudioPress changed this. In the final version of Genesis 2.0, this is now:
add_theme_support( 'html5' );
This is the right and sensible way to add this and this is why just updating to Genesis 2.0 won’t break your site. If all you do is update to Genesis 2.0 you won’t get HTML5 but you also won’t get a broken site as you will if you just toggle on genesis-html5 without making the necessarily changes to your CSS. I simplified DOM a little so it’d all fit on one page, but all the key elements inside <body> are intact. There are some minor changes in the <head> but the changes inside <body> are what will break existing CSS since ID’s like #content have been replaced with HTML5 elements like <article> and this means your CSS no longer applies. Also note, this isn’t meant to be an exhaustive guide of every change, just a few major ones and in a simple visual format to answer the question “Why can’t my existing Genesis child theme be magically updated to HTML5 with the press of a button?”.
Major DOM changes between Genesis 1.9.2 and Genesis 2.0 for WordPress I see on first glance:
| HTML | HTML5 |
| <div id=”wrap”> | <div class=”site-container”> |
| <div id=”header”> | <header class=”site-header”> |
| <p id=”title”> | <p class=”site-title”> |
| <p id=”description”> | <p class=”site-description”> |
| <div id=”inner”> | <div class=”site-inner”> |
| <div class=”post-10 page type-page status-publish hentry entry”> | <article class=”post-10 page type-page status-publish entry” itemscope itemtype=”https://schema.org/CreativeWork”> |
| <h1 class=”entry-title”>The Title</h1> | <header class=”entry-header”><h1 class=”entry-title” itemprop=”headline”>The Title</h1></header> |
| <!–nothing before –> | <footer class=”entry-footer”></footer> |
| <div id=”sidebar” class=”sidebar widget-area”> | <aside class=”sidebar sidebar-primary widget-area” role=”complementary” itemscope itemtype=”https://schema.org/WPSideBar”> |
| <div id=”sidebar-alt” class=”sidebar widget-area”> | <aside class=”sidebar sidebar-secondary widget-area” role=”complementary” itemscope itemtype=”https://schema.org/WPSideBar”> |
| <div id=”footer” class=”footer”> | <footer class=”site-footer” role=”contentinfo” itemscope itemtype=”https://schema.org/WPFooter”> |
A lot of these could probably be fixed with some careful text search and replace strings, but I think it’s always going to take a little TLC to make sure it’s right. I’ll probably give it a shot on this site in the coming weeks when the beta has proved itself stable (not problems so far) Here’s the screen shot in FileMerge and DiffMerge:
I think you may have missed <code></code> somewhere.
Thanks Nathan. I had tried putting <code> tags in when I first published but it was just a mess. I’ve added it back to the add_theme_support line, but left it out of the table.
Thanks for the informative post. I was wondering how to enable HTML5 in genesis themes and there isn;t much information available yet. Keep up the good work.
Thanks Jeremey! I’m sure StudioPress will be documenting things more once 2.0 gets out of beta. I also think that for most child themes it’s not going to be THAT hard to do a search and replace of a dozen strings in the style sheet to convert them to HTML5. Of course that’ll vary by child theme.
I have to say this is actually perfect timing and extremely exciting.
I can’t wait to finish the site I have put off as I was busy and now that I have the time not to be stuck behind me HTML 5 ball.
You guys once again prove you’re the best in themes and landing pages definitely the best VPS regardless of Windows are not.
Hi Jon
“This is the right and sensible way to add this and this is why just updating to Genesis 2.0 won’t break your site.”
Yes Studiopress have done a great job with the way they have managed this update.
The delay of WordPress 3.6 may actually be a good thing because it has allowed Genesis users to do some reading about the update.
The single line of code required to activate HTML5 is pretty easy to add and I’ve seen a couple of CSS converter tools that will convert XHTML to HTML5 – should make life a tad easier.