Genesis 2.0 – User Beware

Those of you that are using Genesis as your parent theme or framework may have noticed that there’s a new version available. Genesis 2.0 is a major overhaul to the old theme, including a fairly new structure, new hooks and actions, and completely new styles.

However, if you’re using a custom theme built on top of Genesis, all of these changes mean that there’s extra potential of something breaking.

This example shows the layout of a site in Genesis 1.9.2 and the way it changed after upgrading to 2.0

This example shows the layout of a site in Genesis 1.9.2 and the way it changed after upgrading to 2.0

Traditionally, when I create a new child theme, I usually import the parent theme’s style sheet, and then build a fairly minimal style sheet for the child theme. The child theme’s style sheet simply overrides the items that need to be overridden from the parent, and adds any new styles that need to be defined. With the update to Genesis 2.0, I found out how dangerous this behavior can be. Because the entire base style sheet changed, with a massive redesign, any sites I have that were based on Genesis are now completely broken until I have a chance to overhaul the child themes. As a result, I have had to instruct my clients not to upgrade Genesis until I’ve had a chance to sort things out.

If you’re not using HTML5 support in Genesis, I’m not sure how many changes you’ll notice or how many issues you’ll have. However, if you were already using HTML5 support in Genesis, and you built your child theme the way I usually build mine, you might be in for a major surprise.

However, even if you did build your child theme without importing any of the base Genesis styles, you may still need to make some changes to your theme.

First of all, if you had HTML5 support enabled by using add_theme_support( 'genesis-html5' ), you’ll need to change that to add_theme_support( 'html5' ) instead.

Then, you’ll need to search and replace some instances in your style sheet. Be careful, though, when doing so; you don’t want to replace any old classes or IDs that start with the items in the search box, you just want to replace classes and IDs that match the items in the search box (for instance, if you have an element with an ID of “nav-header”, you don’t want it to get swapped out when you search for “#nav” in your style sheet).

You’ll also need to know that the structure of the HTML5 version of the theme changed a bit. For instance, the old structure of a post looked something like the following:

<div class="post...">
<h1 class="entry-title">Post Title</h1>
<div class="post-info">Date, author, etc. goes here</div>
<p>Post content goes here</p>
</div>

Now, there are a few more structural elements wrapped around things, meaning that you have extra styles to define or override. The new structure looks something like:

<article class="post...">
<header class="entry-header">
<h1 class="entry-title">
Post Title
</h1>
<p class="entry-meta">Date, author, etc. goes here</p>
</header>
<div class="entry-content">
<p>Post content goes here</p>
</div>
<footer class="entry-footer">
<p class="entry-meta">Categories and tags go here</p>
</footer>
</article>

As you can imagine, this may break quite a few things in your site when you upgrade, so I would not recommend updating Genesis on your production site right away. Even more than usual, you should be sure to update on a test site first, and then test thoroughly before you actually update on your production site.

As an editorial aside, I have to say I’m somewhat disappointed and a bit frightened by these massive changes to Genesis. One of the core tenets of WordPress is to maintain backward-compatibility and not break anything. However, in the past few versions of Genesis, they’ve made fundamental changes that potentially break a lot of things. In one of the 1.9.x releases, they removed some options from the Genesis settings, and, when you saved your Genesis settings, the values for those options were removed from your database automatically (meaning that, if your child theme relied on those options, things broke). In Genesis 2.0, the massive structural and style changes had the potential to break quite a few things in child themes. These changes can be a bit distressing for people that rely on Genesis to make their workflow simpler.

While I applaud the StudioPress team for moving forward, I also wish more time was taken to allow users to easily stifle some changes that were made. If they had included an alternative legacy style sheet for Genesis, and allowed site managers to easily choose that legacy style sheet in favor of the new style sheet, that would have gone a long way.

The main issue I have with the way things were done, though, is the way in which it’s done. If you upgrade WordPress and find that something broke, it’s simple enough to find an old copy of WordPress and revert the whole installation, or just a piece of it back. However, StudioPress only appears to make downloads available for the current version; there doesn’t seem to be any archive of previous versions to download. Also, with WordPress, you can constantly check out the trunk, or packaged beta versions in order to test upcoming releases ahead of time. With Genesis, you don’t get the opportunity to test the new version until it’s released into the wild.

With all of that said, you may find that nothing breaks at all. It all depends on how you were using Genesis and how your child theme was built. For instance, on WPHighEd, we’re using very few features of Genesis (we don’t really have any widgets set up, etc.) and we are using one of the official Genesis child themes (Education), which seem to have complete style sheets of their own, rather than importing the Genesis style sheet; we upgraded to 2.0 here and haven’t noticed any oddities yet.

I think the fundamental issue here is really a matter of identifying what Genesis should be. To me, as a developer, I think of Genesis as a skeleton or framework. However, it’s clear from the new changes that Studiopress is thinking of Genesis more as a base theme, now. Until Genesis 2.0, this wasn’t a major issue, since the base Genesis theme was simplistic enough to work well in both instances. However, with the new version, the base Genesis theme is now much more of a designed theme that can stand on its own, which makes it less useful as a skeleton off of which to base other customized themes.

I still plan to continue using Genesis moving forward, but this situation does give me a bit of pause. What do you think? Have you already upgraded Genesis on your site or sites? Did you run into any issues?

Comments

  1. Joel G Goodman says:

    This is precisely the reason I have a custom base starter theme that I use. If I do child theming it’s off of a structure I already have in place. That way I know what’s changing and what isn’t. It’s also precisely why –– were I ever to use a framework –– I like Justin Tadlock’s approach with Theme Hybrid (actually, come to think of it, why _s [Underscores] makes so much sense, too). Drop in functions to whatever theme structure you have, not an entire theme + framework that are closely tied together.

    Also, if a change to HTML5 elements is breaking stuff… someone’s doing their stylesheets super-specific (and probably not too efficiently).

  2. Curtiss,

    > I usually import the parent theme’s style sheet

    Well, that’s your first mistake – and the Genesis style sheet warns about doing exactly that for exactly the reasons you’ve discovered:

    /* WARNING – Please read the notice below:

    This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances. Please do all modifications in the form of a child theme.
    Copy the contents of this file to the child theme. Do not use @import, as the CSS included with Genesis might change in the future.

    */

    This isn’t the fault of Genesis.

    > However, if you were already using HTML5 support in Genesis, and you built your child theme the way I usually build mine, you might be in for a major surprise

    If you were already using HTML5 support in Genesis, then you should expect surprises – you’re most likely a developer who is using pre-release software. Yes, the tag of Release Candidate was incorrect on this release cycle, but if one can’t handle changes, then they should wait for the final release.

    > You’ll also need to know that the structure of the HTML5 version of the theme changed a bit

    That’s highlighted as a feature. Old themes that don’t have HTML5 support will stay with the same structure, but the emphasis you appear to have given it is that the structural changes are a bug of some sort – upgrading sites to Genesis 2.0 on it’s own shouldn’t be a problem (if the theme doesn’t import the parent style sheet of course).

    > In one of the 1.9.x releases, they removed some options from the Genesis settings, and, when you saved your Genesis settings, the values for those options were removed from your database automatically (meaning that, if your child theme relied on those options, things broke).

    Which settings are you referring to here exactly?

    > In Genesis 2.0, the massive structural and style changes had the potential to break quite a few things in child themes.

    Only for themes that are doing things the wrong way to begin with (importing the parent style sheet). For everyone else, using a XHTML theme (other than one bug which has been identified and fixed regarding linked post author), everything is completely backwards compatible.

    > I think the fundamental issue here is really a matter of identifying what Genesis should be.

    It’s a framework, and that hasn’t changed. The theme is not a base theme that you should import, but you can use the Sample theme which uses exactly the same styles, as the starting point for your own customisations. All of the functionality that may be used by the majority of child themes is included within the framework.

    This article mixes in:
    a) issues arising from your own incorrect working practices.
    b) small problems (with quick fixes) that arise from you working with pre-release software and the changes between RC2 and final
    c) general changes that are features of Genesis that only developers with new or refreshed themes will need to care about,.

    …yet it’s written to scare ALL USERS away from updating to Genesis 2.0, and that’s really not helpful to the community.

    P.S. Your current logo breaks the WordPress Foundation Trademark Usage Policy (http://wordpressfoundation.org/trademark-policy/).

    • Thanks for your comments, Gary. You’re absolutely right in your first point. I failed to RTFM, as it were.

      That said, I attempted to make it clear that I was not telling people not to update to Genesis 2.0, I was simply reinforcing the idea that none of us should be flying by the seat of our pants and updating our production sites without testing things out first. I apologize if I came across differently in the post. I appreciate you taking the time to respond to this from your point of view.

      Regarding the options that were removed, they were the options to enable/disable the Primary and Secondary navigation menus. Again, I totally understand removing options, but it was frustrating that, upon saving Genesis settings, the values for those options were deleted from the database. Thanks again for your comment.

      • > That said, I attempted to make it clear that I was not telling people not to update to Genesis 2.0

        A quote from the post is: “As a result, I have had to instruct my clients not to upgrade Genesis until I’ve had a chance to sort things out.”

        Maybe that could be less ambiguous if it said: “As a result, I have had to instruct my clients whose sites use this import style sheet method not to upgrade Genesis until I’ve had a chance to sort things out.”

        > I was simply reinforcing the idea that none of us should be flying by the seat of our pants and updating our production sites without testing things out first.

        and from the post:

        > With Genesis, you don’t get the opportunity to test the new version until it’s released into the wild.

        You may find http://wordpress.org/plugins/genesis-beta-tester/ is useful then – this is the official plugin for testing any pre-final releases of Genesis before final comes out. Although there were some critical last minute changes in this cycle, 2.0.0-beta1 come out in the middle of May, and final on August 7th. That’s nearly three months to play with the bulk of the new code, so developers don’t get caught out, and make suggestions such as including legacy style sheets.

        > Regarding the options that were removed, they were the options to enable/disable the Primary and Secondary navigation menus.

        These were indeed removed in Genesis 1.9 (Jan 2013), but the option to use page and category Genesis Menus had been removed since Genesis 1.6 (April 2011) and replaced with a message that said “NOTE: In order to use the navigation menus, you must build a custom menu, then assign it to the proper Menu Location.”. Most users had to edit their menus or at least the Genesis theme settings within the intervening 21 months so it was (perhaps wrongly) assumed that folks had moved over to using the menu location setting already. Furthermore, there was one-off tasks during the 1.6 and 1.9 upgrade procedures that tried to alleviate users menus from being dropped completely (which apparently didn’t work, but was something that the Genesis devs did try and take action on).

  3. When I read few of your first paragraph, I was a little bit frustrated and was thinking there was something wrong on your site as I knew Genesis is backward compatible. I even had upgraded few of my sites to G 2.0 and nothing is broken. Thanks for Gary for his long clarification.

Trackbacks

  1. […] Genesis 2.0 User Beware: My friend Curtiss Grymala discusses the newly released Genesis 2.0 framework, changes in structure, hooks and actions, new styles and how your child theme might be affected. […]

Leave a Reply