WP SITES

Log in

How To Enable HTML 5 In Genesis 2.0 Child Themes

—

by

Brad Dalton

Genesis 2.0 Beta is now available for download for existing owners or purchase for new customers.

It’s not recommended existing users update just yet, however new users building new sites on Studio Press child themes shouldn’t have any problems.

Here’s a post about how to convert your existing child themes XHTML markup to HTML 5.

If you also want to test out the latest version of Genesis risk free and enable HTML 5 support in your StudioPress child theme, you’ll find the code below.

Here’s 3 potential benefits of turning on HTML 5 in your child theme once you have updated to Genesis 2.0 are:

  1. HTML 5 Markup
  2. Microdata
  3. Single Post Navigation Links

While all future child themes will be built using HTML 5, you’ll need to add the code to turn on HTML 5 for any existing theme.

All you need to do to enable Genesis to output HTML 5 in your child theme is add a line of PHP code to your child themes functions.php file. Once your child theme is HTML 5 supported, it will also output your HTML 5 markup as microdata.

HTML 5 Support Code

Simply updating to Genesis 2.0 won’t enable support for HTML in your child theme.

Some of the other SEO benefits of using adding support for HTML 5 in your Genesis 2.0 child theme are:

Single Post Navigation

Simply add one line of code to your child themes functions.php file and single post navigation links will appear at the end of every post. This links all your posts together meaning its highly unlikely any of your posts will miss out when search engine bots crawl your links.

Single post navigation also increases page views which leads to more time on site and can lead to more conversions, sharing of your content, subscribers and so on.

HTML 5 Micro Data

Another potential benefit of updating to the latest version of Genesis is HTML 5. Genesis 2.0 also includes support for micro data therefore potentially increasing search engine visibility. If micro data is something you believe will benefit your sites search visibility, you’ll also want to make sure your child theme can take advantage of this and add support for HTML 5.

Note: In no way am i suggesting Microdata or HTML 5 will guarantee an increase search rankings however i do believe it will help.

New Loop Hooks

Once you’ve turned ion HTML 5 in your child theme, you may need to replace any old loop hooks with the new Genesis 2.0 loop hooks.

You’ll find any of the old hooks will NOT work once your theme is using HTML 5.

Test Drive Genesis 2.0

Try Genesis 2.0 for 30 days risk free.

Note: You’ll also get access to Genesis 1.92 and the Genesis 2.0 Sample theme.

Genesis

Once you download any of these 3 themes, you also get access to a getting started guide which walks you through how to setup your theme correctly.

Comments

24 responses to “How To Enable HTML 5 In Genesis 2.0 Child Themes”

  1. New Genesis 2.0 HTML 5 Loop Hooks & How To Use Them

    […] will need to add HTML 5 support to your Genesis child theme in order to make these new hooks […]

  2. Denrrou Avatar
    Denrrou

    Hey, Brad!

    It seems like simple hooks plugin is not going to be updated too soon…

    I was trying to hook some stuff i had on my theme before the genesis 2 update but i am having a very hard time with it….

    The piesce of code was hooked in the genesis_after_post_content Hook and i was trying to do it through my functons.php with:

    add_action( ‘genesis_entry_footer’, ‘child_post_infooter’ );
    function child_post_infooter() {
    if ( is_single ) {

    content goes here

    }
    }

    But it does not output anything…. =(

    Would you please give me some clues on how to handle it?

    1. Brad Dalton Avatar
      Brad Dalton

      Its because you’re using the new HTML 5 loop hooks plus you have one too many closing braces

    2. Brad Dalton Avatar
      Brad Dalton

      It will be updated the same day as Genesis 2.0 hits the shelves. Within days.

  3. Search Engine Optimisation – SEO meets Blogging and Social Media and…

    […] Not all WordPress themes will support HTML5, but Studiopress are just about to release Genesis version 2.0, which will have full HTML support. If you want to know more about Genesis and HTML5 take a look at Brad Dalton’s post How To Enable HTML 5 In Genesis 2.0 Child Themes. […]

  4. Brian Gardner Avatar
    Brian Gardner

    Brad, might be helpful if you added a link to the HTML5 Markup Comparison that I posted on my site. This will help folks who want to activate HTML5 on their existing themes, and assist them in patching up the CSS.

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Brian. Only just saw that this morning and think its really helpful for that purpose.

      Was actually going to use it on my child theme and then write a separate post but i’ll also put the link to the table at the top of this post also.

  5. Radu Avatar
    Radu

    I did it and the style of my theme just crashed…

    Will we be able to enable html5 in the future with our customised themes and keeping the style?

    1. Brad Dalton Avatar
      Brad Dalton

      Simply remove the support for HTML 5 from your child theme and it will be fine.

      It depends on your child theme and whether it supports HTML 5.

      The current theme i am using on this site does not support HTML 5 so i’m in the same boat.

      StudioPress have stated all future child themes will be HTML 5 however it remains to be seen whether they make past releases HTML 5

      1. Denrrou Avatar
        Denrrou

        Thanks a lot, Brad.

        I already removed the support for HTML5 from my functions.php, but…

        I want it so badly that i am really worried about the guys from studiopress not releasing updates for the previous themes.

        Cause it will be a very hard work to do it manually… wont it? =(

        Great blog, man!

        On my bookmarks already!

        1. Brad Dalton Avatar
          Brad Dalton

          Agree 100% Denrou.

          I want HTML 5 on this site but the child theme Developer has no plans to do that.

          I’m building a new theme using Genesis 2.0 with the 2.0 Sample theme which is HTML 5 and it looks really nice.

          I think you’ll find SP will release some great looking HTML 5 child themes very soon.

          Thanks for the kind words.

  6. Genesis resources: Sprites, HTML5 and the Genesis grid loop

    […] Well we aren’t quite there yet, but a beta version of Genesis 2.0 has just been released and Brad Dalton has tried it out. Brad has reported back in his post How To Enable HTML 5 In Genesis 2.0 Child Themes. […]

  7. Keith Davis Avatar
    Keith Davis

    Thanks for the info Brad
    What happens to all the old themes – do we just upgrade to Gen 2 but don’t add the code for HTML 5?
    Presumably Studiopress will be giving out info when 2 is released out of beta.

    Also wondering if the renaming of hooks will cause problems with existing themes!

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Keith

      I’m using Genesis 2.0 on this theme so it works fine but adding HTML 5 support to your child theme is hit and miss at the moment.

      You can try it but you’ll need to update to Genesis 2.0 first which may also be a risk.

      I tested the HTML 5 support code locally with a copy of my child theme but it messed up after adding HTML 5 support so i removed it.

      If they renamed them then yes it will if you use them in custom functions but maybe they have built in a solution for this. Need to test it so thanks for bringing that up.

      Still waiting to find out how they’re going to handle this and will report on it as soon as i do.

      Thanks for the comment.

      1. Keith Davis Avatar
        Keith Davis

        Thanks Brad
        Yes Nathan Rice put out a post on changing the hook names…
        http://www.nathanrice.net/blog/genesis-loop-hooks/

        1. Brad Dalton Avatar
          Brad Dalton

          Thanks Keith.

          Saw that but he didn’t include the old hooks.

          I’m putting together a list of the old vs new hooks so its easier to change them if you want to add HTML 5 support after updating to Genesis 2.0

          1. Keith Davis Avatar
            Keith Davis

            Good man
            Appreciate the help you give to the community.

          2. Brad Dalton Avatar
            Brad Dalton

            Always happy to help out with Genesis questions Keith

          3. Jonathan Avatar
            Jonathan

            Just want to point out that I don’t like the act that the hook name changed. If the only reason to change it was to make it more conventional, then I’d have to disagree. We’re still going to query posts, use custom post types, add to our posts, but they renamed it all to entry instead of post?? Even the loop uses while : has_posts…

            I believe this just causes a bunch of needless updating. Just my 2 cents.

          4. Brad Dalton Avatar
            Brad Dalton

            Thanks for the comment Jonathan

      2. Brandon Kraft Avatar
        Brandon Kraft

        2.0 is 100% backwards compatible. No changes on existing themes are needed, even with custom mods.

        The new hooks will only applicable when HTML5 is enabled. Existing themes will use XHTML as before and the old “post” style hooks.

        The idea is all new themes built on Genesis should be adding in HTML5 support and using the new “entry” convention. Everything older, proceed as before without issue.

        Nathan Rice wrote a post on his blog about it. I assume they will say this much on the StudioPress blog when the final version ships.

        1. Brad Dalton Avatar
          Brad Dalton

          Thanks Brandon

          Just tested the new hooks and they work in Genesis 2.0 child themes which include support for HTML 5.

          The old hooks won’t work as soon as you add HTML 5 support to your child theme but its very easy to change code from genesis_after_post to genesis_after_entry

          You can still use Genesis 2.0 without adding support for HTML5 to your child theme but you’ll need to use the old hooks in some cases as shown above.

          Looks like all the hooks within the loop have been changed for Genesis 2.0 with HTML 5 support added.

          I’ll write up on this as soon as i test them all.

  8. Kraft Avatar
    Kraft

    You mentioned this, but just wanted to highlight—don’t do this on current child themes! 🙂 The styling won’t match up and people will cry many tears.

    1. Brad Dalton Avatar
      Brad Dalton

      Correct. Works on the Genesis 2.0 Sample theme.

      However, i would like to note that wpsites.net does run on Genesis 2.0 without any problems.

      After Adding support to my child theme for HTML 5, i very quickly deleted the code from my child theme.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.