No more sitting on the fence, no more messing about, no more shilly-shallying because in the next week or so WordPress version 3.6 will be released closely followed by Genesis version 2.0 – and you have a decision to make.
Security dictates that you upgrade to WordPress 3.6 and since all the existing Studiopress child themes are compatible with Genesis 2.0 (without HTML5 activation) you can safely upgrade to the latest version of Genesis, but the decision you have to make is… should you activate HTML5?
The current version of Genesis (1.9.2) uses XHTML markup, when you upgrade to Genesis 2.0 your site will be fine because the default markup stays at XHTML, but if you activate the HTML5 markup… it’s not a pretty sight!
As soon as you activate HTML5 markup many of the names of the various layout areas of your website get changed. For example the #wrap ID changes to a .site-container class. Unfortunately since your stylesheet isn’t changed it’s no longer compatible with your new markup, and without styling your site falls apart.
So how do you activate HTML5 markup in your Genesis 2.0 child theme and… make your stylesheet play nice?
Read on dear friends, read on.
The easy way to activate HTML5 markup and knock your stylesheet into shape – Dynamik and Genesis Extender users
There are two things you have to do to activate HTML5 markup in your Genesis child theme and update your stylesheet in line with the HTML5 markup:
- Paste a line of code into your theme’s functions.php file to enable the HTML5 markup – In the video Eric uses the one-click functionality in the Genesis Extender Plugin to add this code. The Dynamik Website Builder also has this functionality.
- Go through your CSS stylesheet and identify and update the element selectors that have changed so that they reflect the new HTML5 markup – In the video Eric uses his genesis XHTML to HTML5 CSS converter tool.
This short video by Eric Hamm shows you how you can activate HTML5 markup and correct your stylesheet… in just a few minutes.
So that’s the easy solution, but don’t worry if you’re not a Genesis Extender or Dynamik Website builder users because the not-so-easy method… is still pretty easy.
Genesis Extender and the Dynamik Website builder
We’re big fans of the Genesis Extender and the Dynamik Website builder here at WM Webdesign and we’ve written a few posts about them in the past.
In case you missed them here are the links to our previous posts:
The not so easy way to activate HTML5 markup and knock your stylesheet into shape – doing it like the devs
Like I said, this may be the not-so-easy way but it’s still pretty easy.
A quick reminder of what you have to do:
- Paste a line of code into your theme’s functions.php file to enable the HTML5 markup.
- Go through your CSS stylesheet and identify and update the element selectors that have changed so that they reflect the new HTML5 markup.
The code – this is the code that you need to add to your functions.php file to activate HTML5 markup.
Cleaning up your stylesheet – once you’ve activated HTML5 markup your CSS stylesheet won’t have the correct element selector names and you need to edit them manually.
Fortunately Brian Gardner of StudioPress has created an XHTML Vs HTML 5 comparison chart. The chart shows the old XHTML on the left and the corresponding HTML5 on the right. You have to change the classes in your child themes style.css file.
Brad Dalton recommends:
“To change all the classes, its suggested you copy your existing child theme to a local installation of WordPress and make the changes in your style.css file there.”
Thanks Brad – sounds like a great idea to us.
Resources for Genesis 2.0 and HTML5 activation
This is a short collection of “must read” resources for Genesis 2.0 / HTML5 activation:
Joost de Valk Yoast)
Schema.org & Genesis 2.0
You may also want to read 11 Essential Resources About the Upcoming Genesis 2.0 That We Think You’ll Enjoy
Activation of HTML5 in Genesis 2.0 – will you, won’t you?
Don’t forget you can upgrade to WordPress 3.6 and Genesis 2.0 (once they are both out of beta) without even thinking about HTML5, because until you activate HTML5 Genesis 2.0 displays XHTML.
If you’re happy with your site and HTML5 doesn’t interest you, you’re done, finished, you can turn on the telly, sit back and relax.
If you’d like to use the HTML5 markup and you use the Dynamik Website builder or the Genesis extender plugin then just follow Eric’s video.
If you don’t use Dynamik or the Extender all you have to do is add this single line of code to your functions.php file and use Eric’s genesis XHTML to HTML5 CSS converter tool or Rafal Tomal’s genesis HTML5 converter tool to update your CSS stylesheet, hit refresh and you’re done.
Genesis has always been on the cutting edge of web technology, and Genesis 2.0 continues in that excellent tradition.
With a single line of code in a child theme, Genesis will now output HTML5 markup in place of the old XHTML tags. Also, every theme we build in the future will be developed on HTML5.
Brian Gardner – Studiopress
So what are you going to do, are you going to activate HTML5 markup… or not?
Thanks for visiting, we hope that you enjoyed the post and please let us know what you decide to do in the comments below.