From the BlogSubscribe Now

Genesis 2.0 – one click activation of HTML5 markup with Dynamik and Genesis Extender

Genesis 2.0 - one click activation of HTML5 markup with Dynamik theme and Genesis Extender plugin

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:

Dynamik Website Builder for Genesis or…. the Genesis Extender plugin?

Genesis Extender plugin – Create an EZ Static Homepage

Genesis Extender Plugin – for Genesis Child themes

Dynamik Website Builder for the Genesis Framework

 

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.

If that seems like a lot of hard work, you can use Eric Hamm’s genesis XHTML to HTML5 CSS converter tool or Rafal Tomal’s genesis HTML5 converter tool to update your CSS stylesheet.

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:

Brian Gardner
Genesis 2.0 Beta Now Available
Genesis HTML5 Markup
Add HTML5 Markup Structure
Genesis HTML5 Loop Hooks

Brad Dalton
Convert Your Genesis Child Theme From XHTML to HTML5
New Genesis 2.0 Loop Hooks & How To Use Them

Carrie Dils
What’s the Deal With Genesis 2.0?
Genesis 2.0 Hook Changes

Nick the Geek
Genesis 2.0 Explained
Genesis 2.0, HTML5, and Schema Oh My!!!

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

You can keep up to date with all things Genesis by visiting the Studiopress blog and following the Genesis hashtag on twitter.

 

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 GardnerStudiopress

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.

 

Genesis Child themes: Extended!

Genesis Framework The Extender Plugin for Genesis allows you to add content (like this affiliate box) anywhere you like, without hiring a developer. Best of all, the extender plugin works with ANY Genesis Child Theme!

Now with one-click HTML5 markup activation

Comments

  1. Very good article Keith.

    Since the shuttering of the original Genesis Forums, I am beginning to depend on sites like yours to gives us the real dope on Genesis ;o)

    I think I will upgrade to WP latest and Genesis 2.0 latest WITHOUT HTML 5.

    Brian has confirmed, according to a post on another board that the top seller Metro is being updated to work with Genesis 2.0 and HTML 5, so why take chances?

    Patching an existing and modern theme like Metro may be fraught with dangers on a production site. I think the Genesis developers will do their job and update their themes ASAP. Besides, they may address some of the issues with that theme, such as the Logo Header image on mobile devices that needs workarounds.

    But for older themes, such as the excellent but apparently abandoned LIFESTYLE theme, the patching by customers may just breath new life into them.

    The problem with hacking and patching themes is something that should be avoided. It introduces so many variables that upgrading and troubleshooting down the road can wreck your site and cost too much man hours of lost time.

    It would be ideal if WP Framework developers would avoid this situation wherever possible. They should in my opinion, update their Top 10 themes and release them in conjunction with any new framework – not sometime later.

    What do you think?

    • Hi Everyone
      Thanks for visiting and thanks for the kind words.

      “I think I will upgrade to WP latest and Genesis 2.0 latest WITHOUT HTML 5.”

      That sounds like a good idea. You can activate HTML5 at any time in the future… if you decide to.

      “…, update their Top 10 themes and release them in conjunction with any new framework – not sometime later.”

      Never thought of that but my guess is that they are working on that already.
      Don’t forget, Genesis 2.0 is still in beta and has yet to be released as an update.

      Appreciate such a great comment.
      Keith Davis recently posted..Genesis 2.0 – one click activation of HTML5 markup with Dynamik and Genesis ExtenderMy Profile

  2. For the love of God!! Do I look like someone who’s capable of tinkering with a blinking stylesheet?! Just the sheer notion of making this changeover is giving me heartburn.

    Here’s the deal, Keith …
    When it’s time for me to cross over this HTML5 markup bridge, I’m going to make you the admin of my blog and let you show me what you’re made of! What do you say?

    You can probably make CSS changes in your sleep. Me? I don’t even know how to find the stylesheet. LOL!!
    Melanie Kissell recently posted..Glue Your Wallet Shut, Observe, Take Notes, and Be PatientMy Profile

    • Hi Mel
      “For the love of God!! Do I look like someone who’s capable of tinkering with a blinking stylesheet?”

      I’ve learned never to underestimate the ability of a determined woman and you Ms K are one such determined woman.

      Good thing is that the default settings of Genesis 2.0 will play nicely with existing Studiopress child themes so you can forget that you ever heard about HTML5….
      The SEO advantages of HTML5 are still to be proved.

      Appreciate all the publicity you’ve given me in the Media – thanks Mel.
      Keith Davis recently posted..Epik 1.0 – Genesis child theme for WordPress by Wes Straham of AppfiniteMy Profile

      • ” … you can forget that you ever heard about HTML5….” What a big fat relief! Thank you. I may be a determined (more like stubborn) woman, but you’ll never find “hacking and patching” on my resume!

        Little known intimate fact about me:
        My middle name is “Media”. LOL!

        • Hi Mel
          Yes you can relax for a bit but it’s likely that Studiopress will remove the backward compatibility at some time in the future.

          In fact check out this quote from Nathan Rice:

          At some point, not sure when, we’ll remove the backward compatibility and only offer auto-updates to people who are running a theme that supports HTML5. It’s just the way it has to be … we can’t litter the Genesis source code with conditionals for infinite backward compatibility forever. But before we do that, we’ll update all the StudioPress themes to work with HTML5, and will probably maintain the 2.0.x branch for a year or so with security updates, etc., so you’re not caught with an insecure version of Genesis.

          Keith Davis recently posted..WordPress themes and frameworks – Genesis, Catalyst and Elegant ThemesMy Profile

    • I’m with Melanie! We’re bright enough to know our limitations. Unfortunately, I fear my list of limitations is ever expanding.
      Randy Cantrell recently posted..Episode 180 – Avoid Embarrassment. Do Nothing!My Profile

  3. I am an old web designer and like most I do not like change. I was worried about Genesis 2.0 and html5 coming but Eric Hamm’s video and his Genesis XHTML To HTML5 CSS Converter makes it all less complicated for me. I am glad the convertor tool is free too. Thank you Eric!
    Larry James recently posted..Where Your Visitors Will Look When They Come To Your Website (Probably)My Profile

  4. Woot. There are tools available to convert the CSS to HTML5 compatible? Was thinking of converting the minimum theme myself, I think I can get started.
    Rudd recently posted..How To Show Most Shared Posts in WordPressMy Profile

  5. I made the big switch to HTML5 a few days ago and I’m really pleased I did. I did it on a couple of test sites first. I find there usually are a couple of things that go wrong despite those excellent converter tools you mention. For example, you might have a “old div” in the functions.php for a widget area that need to be converted to an “aside”. All in all, if you’re comfortable with CSS (OK, I use the term “comfortable” loosely) I think you should go for it. Otherwise, get one of the new themes.

    Great article, Keith 🙂
    Rob Cubbon recently posted..Updating to HTML5 with Schema Support on Genesis 2.0My Profile

  6. Hi Rob
    “I find there usually are a couple of things that go wrong despite those excellent converter tools you mention.”
    That’s the bit that bothers me.

    As soon as I find a little spare time I’ll bite the bullet – maybe start on a localhost site.

    Appreciate you coming over and leaving a comment Rob
    Keith Davis recently posted..Catalyst focuses on the Dynamik Website Builder with the Genesis theme framework as the coreMy Profile

  7. Hey Keith, the link to Brian Gardener’s site for the HTML5 update code isn’t working.

    Also, have you used the converter tool recently? It doesn’t seem to be working.
    Rob Cubbon recently posted..Don’t Be A Web DesignerMy Profile

Speak Your Mind

*

CommentLuv badge