Create a Genesis Child Theme using HTML5

Here at CubicTwo we eat our own dog food, and we like it!

As you know, the CubicTwo website launched last week. We’re a WordPress shop and one of our favorite frameworks is Genesis by StudioPress.

Genesis Theme

Naturally, we built CubicTwo using both WordPress and Genesis. When we set out to create our site, we wanted to ensure we leveraged the best of both, plus we wanted to extend the site into the future a bit.

Early on, we decided to build CubicTwo using HTML5 and CSS3 elements. We know it isn’t fully supported but hey, it’s time for antiquated browsers to catch up!

In any event, a few things need to be done for this to work, this is a quick post to show how we accomplished it. As an example, If you want IE to play nicely, there is a Javascript dependency, so keep that in mind.

HTML5 of course…

If you’re already familiar with HTML5, this part is easy. For HTML5 newbies, we recommend taking a look at 52Framework. It’s a great place to start, and it includes the necessary components to get you on your way to building an HTML5 page, site, and WordPress theme.

52 Framework

The risk: As stated earlier, IE doesn’t play with HTML5 yet. You’ll have to add a special javascript included in the 52Framework to ensure IE loads all of the HTML elements, IE doesn’t see them otherwise, go figure. Here is a great walk through of how the script is used, as well as a few bugs you may run into, and how to fix them.

If coded correctly, your site should degrade gracefully enough for Javascript haters to still navigate around. For us, this trade off was worth it.

Genesis Doctype

Genesis is a well documented framework, and a CubicTwo favorite! The StudioPress team has done a brilliant job enabling theme authors and developers to easily change things around to fit their needs. If you’re ever looking for extended documentation, go check out dev.studiopress.com. If you don’t find what you’re looking for, their support forum is a great place to ask questions.

While cruising the StudioPress developer site, we found a quick way to change the Doctype of Genesis. Unfortunately, the instructions do not cover HTML5, so we made some modifications to fit our needs.

It’s pretty straight forward. Open up your child theme functions.php and place the following code below init but before ?> at the end of the functions file (if it exists).

    #HTML5 DOCTYPE
    remove_action( 'genesis_doctype', 'genesis_do_doctype' );
	add_action( 'genesis_doctype', create_function( '', 'echo "<!DOCTYPE html><html><head>";' ) );

What this is going to do is strip out the default Doctype from Genesis, and load the HTML5 Doctype into your theme.

We can’t emphasize enough that using child themes with a framework is always better than editing the framework itself. You’ll avoid issues down the road when the framework is updated by using child themes!

Just in case: If you’re not sure what a child theme is, go read this post about child themes in Genesis by Brian Gardner.

In Closing

Genesis is flexible, it allows for a lot of great customization and this is just one example. We’d love to hear your feedback on how we accomplished this on our site, and any ways you think we can improve it.

If you have other examples of cool things you’ve done with Genesis, please let us know, we’d love to chat about it.

Cheers!