11 Essential Resources About the Upcoming Genesis 2.0 That We Think You’ll Enjoy

Earlier this week we released Genesis 2.0 Beta 2, which puts us one step closer to the stable release of Genesis 2.0. In the spirt of preparing our users for what’s coming, I wanted to share some really great posts that talk about it.

There are a lot of great features coming in Genesis 2.0, from the introduction of HTML5 markup to a new default design. Our community has done an excellent job in writing about some of the changes and things that are new.

Here’s a list of resources on Genesis 2.0 that we think you’d enjoy:

1. Genesis HTML5 Visual Markup Guide

HTML5 introduces new CSS classifications. They may take learning and getting used to for some, but the effort will be worth it for the benefits provided. Here, Nathan Rice provides a helpful visual layout of some of the basic HTML5 markup.

2. Genesis HTML5 Markup Comparison

As a useful companion piece to Nathan’s visual layout above, here are several tables that compare HTML5 markup to XHTML. For those excited about learning the new markup, this “cheat sheet” is a useful starting point.

3. Genesis HTML5 Loop Hooks

Now let’s get Genesis-specific with the HTML5 changes. This post provides more tables that show what the pre-HTML5 loop hooks were and what the HTML5 loop hook locations will be.

4. New Loop Hooks in Genesis 2.0

And here is how the loop hooks look in action. Nathan Rice breaks down the new standard loop in Genesis 2.0.

5. Genesis 2.0 Hook Changes

Carrie Dils provides yet another breakdown of the changes to the hooks in Genesis 2.0.

6. Genesis 2.0 Explained

Wow, what an intro! That’s what you’ll be saying after you read this post by Nick Croft, which is the latest in his renowned Genesis Explained series. In this edition, Nick provides a complete hook reference for all Genesis 2.0 hooks.

Once you’re done reading, you’ll likely echo the thoughts of a commenter, who said, “Thank you so much, Nick. I too am a little uncertain about what 2.0 brings, so this is extremely valuable.” Indeed.

7. Schema.org & Genesis 2.0

An incredibly profound article written by SEO expert Joost de Valk covering the new Schema.org markup found in Genesis 2.0. He has already implemented it on his own website, and he explains in detail the many benefits of using it.

8. Preparing for Genesis 2.0

Rebecca Gill and her company Web Savvy Marketing has your back here with an overview of what’s coming in Genesis 2.0. She highlights some of the main features and gives you a little bit more about HTML5.

9. How To Convert Your StudioPress Child Theme From XHTML to HTML5

Remember that HTML 5 will not work in your child theme until you have updated to Genesis 2.0 and added support in your child theme for HTML 5. But don’t feel intimidated by this process. Brad Dalton provides point-by-point instruction for bringing your current StudioPress child theme into the future.

10. DOM Changes updating to Genesis 2.0 HTML5 support

Upgrading to Genesis 2.0 will not break your current site. HTML5 support must be added separate from the update, which you can do easily by adding a simple line of code. This post at Wandering Jon shows you how to do this, and shows you a side-by-side comparison of Genesis code with HTML5 enabled and without it.

11. What’s the deal with Genesis 2.0?

So … should you update to Genesis 2.0? Do you need to enable HTML5 support? What are the benefits of converting to HTML5? Do you need to change your CSS? Get answers to all of these pertinent questions here.

Updated: Here are some more resources we’ve found. If you find others that you think we should add, drop us a comment below.

12. Genesis Child Theme CSS Converter from XHTML to HTML5
13. Genesis XHTML To HTML5 CSS Converter

Comments

  1. You got me at HTML5 :)

    I’m a big fan of HTML5 and I’m really looking forward to it being a native part of Genesis.

    Super amped for the 2.0 release.

  2. Good list Brian,

    Eric Hamm’s xhtml to HTML5 Converter would make a great 12th resource:
    http://dynamiktheme.com/genesis-xhtml-to-html5-css-converter/

  3. Thanks for listing all the goodness expected in Genesis 2.0 – excited for sure!

  4. Just put it on my to do list to check out!

  5. Thanks Brian
    I’m just putting a “Genesis 2.0 – activation of HTML5″ post together and will add your links.

  6. Awesome support from the StudioPress community.

    I know a lot of people are very excited and can’t wait to update their child themes to HTML 5.

    Great stuff Brian.

  7. Great tutorials,Instantly bookmarked it.Going to involve in conversion process.Thanks brian and other contributors.

  8. I’m really looking forward to purchasing Genesis 2.0. When will it be released?

  9. Thanks Brian for the resources list. Changing rem units to 10px is really handy! No need to pick calculator every time I code.

  10. Awesome post!

    How about including Rafal Tomal’s HTML5 CSS Converter too

    http://rafaltomal.com/genesis-html5-converter/

  11. It’s been about 2 years since I’ve really used studio press … any good resources for css cheat sheets and tutorials to do the different things as far as customizing your front page on studio press? Hope I didn’t confuse you

  12. Will any of the current child themes be updated to fully utilize Genesis 2 or will mainly the new themes after the Genesis 2 release use the new functionality?

  13. Campbell McArthur :

    Very nice and informative read with your up and coming release Brian. I enjoyed it immensely!

    Cam

  14. I love WordPress and I cannot wait to get the REAL Genesis 2.0. Not the beta. I’m going to wait for awhile. Just in case. Anyway, the HTML 5 looks pretty slick on that Genesis 2.0. It made it a lot easier. Anyway, thank you for sharing these links. Will read them more later.

    Angela

  15. Wow! Joost de Valk have done with nice experiment.
    And I hope Genesis 2.0 breadcrumb can be show up on Google search, so we can move out some plugins and make it more minimalist :D

  16. I’m about to buy the News theme and set up Genesis (I’m not a developer). I want to do this soon but if the release will happen in a few days-ish I’ll wait. Or, should I go ahead and get set up but not do any customizations? I mainly don’t want to have to do big revisions a few days after setting up. Thanks :)

  17. Hi All,

    Huge fan of Genesis. I use it for all my WP development, and I’m been itching to start building Genesis sites with HTML5 for over a year now.

    In preparation for G2.0, I’ve built a fork of the original Bones for Genesis (which is no longer maintained). Bones for Genesis 2.0 is a starter Genesis child theme, which includes:
    – A genesis.php file for one-stop customization of Genesis settings, including enabling/disabling HTML5, widgets, layouts, and meta boxes.
    – SASS/Compass-ready, with a config.rb file and a Compass folder layout.
    – Modular SASS, with starter selectors mirroring G2.0’s style.css.
    – Functions for admin branding.
    – Useful WP admin snippets from around the web (proper asset enqueing, TinyMCE customization, cleanup, etc.).
    – A starter structure folder, with file names mirroring G2.0’s.
    – …and much more!

    Check it out on Github: https://github.com/cdukes/bones-for-genesis-2-0 . Feedback is very welcome.

    Keep up the amazing work StudioPress, and looking forward to building with the G2.0 final release!

    • David Hedley :

      Hi Cooper, this looks fantastic. I’m looking at starting a new project with your Bones fork, but have a couple of questions if that’s ok:

      How would I handle any css and code updates that are added to Genesis Beta 2 before the final release?

      Am I able to use standard css or do I need to use SASS with your fork?

      Thanks!
      David
      David

      • Hi David,

        Any code changes made to Genesis are unlikely to break child themes. The folks at StudioPress have done an excellent job not breaking backwards compatibility so far, and since all code snippets in BFG2 use Genesis (or WP) actions/filters, everything should keep working.

        That said, I’m keeping on eye on Genesis updates, and will update BFG for any compatibility issues, noted in the commit and the change log.

        Since SASS compiles into CSS, you would have no trouble using CSS directly with BFG. Take a look at the enqueued styles in /includes/structure/header.php to see/tweak what goes where, but basically, you can add a style.css file to /css and everything should work fine.

        Thanks,
        ~Cooper

  18. I have been playing with 2.0 beta today and it is almost exactly what I’d been looking for. Had already been looking at integrating schema and HTML5 elements through a child theme but looks like I won’t even need to now!

  19. I was looking at the Genesis HTML5 Visual Markup Guide and had a question on the comments section. I haven’t grabbed a copy of the beta yet, so I don’t know what the structure looks like inside the <div class=”entry-comments”>.

    Still, I’m wondering why use a div and not a section for that, It seems like a tailor made use case for the section. Unless you are putting the comments in a list and then why not forgo the div altogether and just run the list?

  20. Well done, as usual Brian. I’ve been messing with it today and like what I see.

    Here’s one thing I notice that seems common with responsive sites, especially when viewed on a smartphone screen such as iPhone.

    Obviously the logo and menu links take up lots of screen real estate on an iPhone, especially at the top. The problem I see with iPhone screens (and other smartphones) is that if you click on a link in the menu below the logo it may appear as if nothing has happened because the logo and menu appear also at the top of the page that was clicked.

    I’d like to be able to put an ‘anchor’ link for the site’s pages and posts. Click on a link below the logo and the new page/post opens, but also opens right at the title instead of displaying the logo and menu again.

    Any idea how to do that in HTML5?

    • That’s actually a great idea. additionally implementing a header like the one in Google+ that reduces height when you scroll down and then expands again when you scroll up would help

  21. Stupid question maybe but when we buy and install a studiopress theme now, will this be a upgraded 2.0 theme / framework?

    Best, Rogier

  22. IF we buy a child theme after the release of Genesis 2.0 will it be HTML ready or do we still need to do the conversion? Thanks.

  23. I miss the simple hooks plugin so much… =(

    Will you guys soon update it?

    • Yes, that plugin will have an update as soon as Genesis 2.0 is released, mainly because when HTML5 is enabled a few of the hooks have changed names.

      • Great!

        Cant wait for this final release!

        I’m already using the html5 enabled but with it i lost some hook contents that i have seted with that plugin.

        Thanks, Brian!

  24. David Hedley :

    Hi Brian,

    Looking forward to the full release of Genesis 2.0.

    Are we safe to develop using the Beta 2 child theme, or is this likely to change too? Obviously I can easily upgrade Genesis, but am concerned about having to wade through the child theme styles, etc, once 2.0 is live.

    Thanks!

  25. this is helpful :) i’m actually NOT looking forward to an upgrade since it took me about two months to make the theme i’m using now but i’ve already started working on it with the 2.0 :P should be interesting. can’t wait for it to go live ;)

  26. Wow Brian, thanks a lot for this resources!!! I really liked piece by Rebecca Gill!!!

  27. I’am a fan of Joost van der Valk. In combination with the Studiopress developers it`s awsome.

  28. Can’t wait for the new release! I’ve been building Genesis sites for nearly all my clients as of late and I’m loving it.

    With Genesis 2.0 will there be an easy way to add in a logo area? That’s one thing that I’ve found to be difficult in Genesis. I think it would be great for people like me that aren’t developers. Either way, looking forward to seeing Genesis 2.0.

    Cheers,
    David