Designs By Nick the Geek

Genesis Based WordPress Development and Tutorials for Everyone

Genesis 2.0, HTML5, and Schema Oh My!!!

Hey folks. I have been crazy busy with a bunch of things over at Copyblogger. I have to say, working with them is a real blast and there are so many different projects going that I don’t know if I’ll ever get bored.

One of the big things in the pipe is Genesis 2.0. I’m going to have to make some big changes to my Genesis explained series because of that. Maybe even a whole Genesis 2.0 explained series. If you aren’t familiar with it, Genesis 2.0 is going to be bringing a lot of changes to my favorite framework including HTML5 and Schema.

The Genesis 2.0 Beta is available now, just install the Genesis Beta Tester plugin to enable it. I want to mention that Genesis 2.0 is in beta so there may be bugs. I’ve only found a couple myself and a few more have been reported. Mostly this is very nitpicky stuff, but if you want to test be aware that you might have to fix something that isn’t right.

I am running Genesis 2.0b1 on this site and everything is working well, but I am not using an HTML5 theme so I couldn’t say much about how HTML5 and Schema work. My church web site is already using HTML5 markup for the sermons, but otherwise it was using XHTML 2.0 transitional markup despite the doctype declaration. I figured that converting it over to true HTML5 would only make sense and would give me a better feel for how HTML5 and Schema work.

Changing to HTML5

As I noted, this site is running on Genesis 2.0b. Everything is running smoothly and I didn’t have to do anything but the update. This is an important test because existing sites should not be automatically converted to HTML5. This is something that must be enabled. So if you want to use HTML5 you should start with the Genesis Sample 2.0 beta theme. This is available at my.studiopress.com. After Genesis 2.0 is released other child themes will be made available in HTML5.

Of course, I already had a theme and wanted to keep the same look, so I had to do a bit of hybridizing for the church site. If you look in the style.css file you will see that I did the work very quick and dirty. I started with the sample 2.0 beta style.css file then copied in chunks of code from the Outreach style.css file to change the header, navigation, and other elements. The markup isn’t compatible but this quick and dirty conversion only took me about an hour. At some point I need to go back and clean up the CSS to remove redundancies and make sure everything works. Overall though I am happy with how easy it was for me to make the conversion.

Now, a lot of folks are going to wonder about their own themes and how easy it will be to convert them. Quite frankly that depends on your experience. If you know CSS pretty well you could do a full conversion in a day or less. If you can barely spell CSS you may want to leave HTML5 alone or hire this one out. It will require a solid understanding of CSS basics and the HTML markup structure.

The HTML5 system introduces a whole new set of actions and functions. It isn’t terribly difficult to learn but it is pretty dramatically difference. This is why I probably need a Genesis 2.0 Explained series to supplement the Genesis Explained series.

Genesis 2.0 Schema

This is one of the biggest reasons I wanted to convert my church site over. Schema should really help the indexing of the site. I am using event schema, civic/church schema, location schema, Web site schema, article schema, and audio schema.

I probably need to review the exact organization of the schema levels and make some adjustments here and there as I go. I’m not 100% sure of the best way to nest elements for the absolute best indexing, and I have some old HTML that was in pages that I still need to update. I found the schema system in Genesis 2.0 to be very powerful and easy to adapt to specific needs. For example, to change my sermons over to an audio schema I just added this code to the sermons plugin I built 

add_filter( 'genesis_attr_entry', 'first_sermon_attributes_entry', 20 );
/**
 * Changes sermons to the AudioObject Schema
 */
function first_sermon_attributes_entry( $attributes ) {

	if( 'sermons' != get_post_type() )
		return $attributes;

	$attributes['itemtype']  = 'http://schema.org/AudioObject';

	return $attributes;

}

It is possible to change pretty much any part of the schema markup when using the new filters. I was also adding additional details to the sermons for the date and such so I wrapped those details in spans with the appropriate schema markup for better indexing. Everything is testing well in the Rich Snippets tool.

As you can see, doing more than basic blog post markup will take a bit of work, but this is something that I or someone else may address with a plugin after Genesis 2.0 is released so any post, page, or post type can be converted to the correct schema. I can see how that could be very helpful for users wishing to take full advantage of the power that gives in hinting to the type of content on a page so Google can best handle your indexing.

I just made these changes and I’m trying hard to build authority for my church site, so I hope that this really gives it the nudge it needs to rise in the search results.

Related Posts

Filed Under: Uncategorized

Comments

  1. Hi Nick
    Thanks for the info on updating old themes to HTML5.

    “If you know CSS pretty well you could do a full conversion in a day or less.”

    A day is still pretty expensive so I might leave the old themes alone and wait for new HTML% ready themes.
    I’m looking forward to those new themes and now that you have Lauren Mancke on the team!!!

    • I would probably agree. That is one reason why I did a quick and ugly conversion for the site instead of really digging in and building the theme out correctly.

      You can save a lot of time but you end up with at least a thousand lines of extra CSS. I’ll probably go back and pare it down from time to time when I’m bored and happen to think about it.

      Essentially what I did was copy the CSS from my very slightly customized outreach style.css file to just before the media queries of the Genesis 2.0 sample style.css file. Then I used Theme test drive to load the new theme up and moved sections at a time into the correct locations for the new markup. So for the header, I copied the #header into the .site-header and so forth till the header was right. Then I did the same for each element. In some cases I did a search replace to change out tags en mass.

      The entire CSS conversion took me about an hour.

      However, I wouldn’t consider this a full conversion. To do it right this would probably take me 2-3 hours start to finish, but I’ve been looking through the new HTML5 markup as it was built so I didn’t have to spend time learning that and I’m very comfortable in CSS.

      I’d say the average users will be very happy with the new HTML5 child themes that are being built. I’ve only been able to get a few sneak peaks but they are rather impressive.

  2. Awesome, Nick! Thanks for the intro and clarifying that existing sites can still update to 2.0 without switching to HTML5.

    Looking forward to your upcoming Genesis 2.0 series… you know, in your free time. 🙂

    • I’m glad I made that clear enough, that is one thing I wanted to make sure people knew because I was getting quite a few questions about that in support. Lot’s of people seem to think that Genesis 2.0 is going to break the update cycle for existing themes and that is something the dev team worked really hard to make sure didn’t happen.

      • The people who think that Genesis 2.0 might cause issues with other sites probably either had bad experiences with other frameworks and major updates or heard about the hassles other shops created. I’m thinking about one framework that caused quite a lot of heartache with their 2.0 version.

        One of the reasons I’m so grateful for the StudioPress team is that y’all consistently do the extra work needed to make sure Genesis updates continue to be backwards compatible.

  3. Cool write up. I’ve done pretty much the same with my personal site and while doing that I had the same idea you had regarding the Schema stuff. In fact, I’ve actually already started building a plugin that handles quite a few more schemas 🙂

  5. Hey Nick, Great post.

    I am so looking forward to your Genesis 2.0 series. Your previous one helped me a lot and during the course of that I developed the habit of ‘digging’ stuff. Even in this one, I had no clue about the schema implementation stuff, so I headed to Schema.org are got the grab of what’s happening in ‘Genesis 2.0 Schema’ section you wrote.

    Am excited and overwhelmed at the same time with the possibilities that HTML 5 markup will bring with itself. Your series would surely be time/life-saver for many in that context.

    There is one thing that I want to ask that – Is it a possibility that after enabling the HTML 5 in the stable (official) release of Genesis 2.0, the CSS of the existing site would need a re-work?

    As I read that, many of the hooks will also be renamed (or changed, if you may). So does that mean, that one has to take the code residing right now in the various hooks of simple hooks plugin and put it in the new hooks that will be introduced via function.php or some other method?

    • The change to HTML5 will absolutely require a CSS overhaul. I mention that in the article and also go into a bit more detail in my reply to the first comment which was by Keith. The rough structure is the same, but the ids, classes, and type of markup is dramatically different. Divs have been replaced the the appropriate HTML5 equivalent. So articles, asides, headers, and footers are used. Most IDs were dropped in favor of classes so the #header is now .site-header and #content is .content.

      The hooks are the same but different. The site I converted over was doing a couple of things with hooks and filters and those worked, but some of the hooks have been changed because the HTML5 structure is different. There is a header for each post now and the post image, post title, and post info are all inside this for SEO purposes. This means those items have to be hooked in differently.

      The basic concepts are the same, but taking an existing site and simply enabling HTML5 on it will not work well. You will have to go back and make a lot of changes. That is why HTML5 will not be enabled in Genesis 2.0 by default. That would break hundreds of thousands of sites. Talk about a nightmare. Instead we worked to make sure the 2.0 update would let existing sites work correctly, and only those intentionally enabling HTML5 would need to make the changes.

      There will also be a whole new set of HTML5 child themes. Brian has been posting some teasers for those on his facebook and Twitter. Things are going to be very exciting over the next few weeks as all of this rolls out.