Genesis 2.0 HTML5 Conversion

One of the first things I read about Genesis compared it to a car. The Getting Started page at StudioPress has a really cool illustration of that analogy. Basically, WordPress is the engine, Genesis is the frame and body, and the child theme is the paint job.

When Genesis Beta 1 dropped I did a conversion on my church Web site and then wrote about that experience in the Genesis 2.0, HTML5 and Schema oh my post.

Based on that experience and the more recent conversion of this site to HTML5 I think there is a lot to the car analogy.

My first car was a 1980 Datsun (yeah, before they were called Nissan) 200SX. It was a baby blue, but it probably didn’t start life that faded. All things considered it was a really good first car. Most of the time it was pretty reliable, but the starter had issues. Twice a year I had to put a new starter into it. Technically, the starter wasn’t the problem, it was the solenoid, so in a pinch I could make things work.

So here is the situation, school is out, and it is freezing cold. I have hung out in the junior hall with my friends till the parking lot is mostly empty, then I run to the car and hop in, trying to get it started so I can get some heat building up before my fingers start going numb. I turn the key and … nothing happens. So I leave the key in the on position, pop the hood and grab a big screw driver from the glove box.

When I open the hood I reach in and use the metal end of the screw driver to arc against the contacts of the solenoid. Sparks fly and the engine roars to life. This is how I start my car for the next couple of days till I can get to the parts store and pickup a new starter. Fortunately the starter is covered under warranty so all it costs is an hour of my life. I have mastered replacing the starter and that hour includes the time it takes to pull the old starter, take it to the parts store, drive home with the new starter, and bolt it on again. I feel comfortable I could do it with my eyes closed to this day.

Get better with Genesis by practicing

Working with Genesis can be a lot like that. The more you do something the faster you get at it. I can solve a Rubik Cube in about 2 minutes. Well, I used to be able to. Before writing this I timed myself and was down to 5 minutes. Guess it isn’t exactly like riding a bike. I can do a whole lot with Genesis very very quickly because I have done a whole lot with Genesis over the years that it has been around.

My first HTML5 conversion took a bit because it was something I hadn’t done before, but I am sure that with practice I could do a Genesis HTML5 conversion much faster.

Of course, there is more to being a good mechanic than just doing the job a lot. See, I’m not a good mechanic and it would take a lot more than work on my car every weekend to make me into one. I also need the tools that make things easier.

Once I got in a small accident on the ice. It was actually kinda fun looking back. I didn’t hit anyone else and the car spun around in a complete circle then another 270° before jumping the curb. I pretty much held on for the ride. The problem is I bent the split axel on the car and had to replace it. We were able to pick one up for cheep at the salvage yard then I spend the better part of 2 days trying to pull that stupid axel. The repair manual made it look so easy, but it wouldn’t budge for nothing. Finally we went to the parts store and asked if there was a trick to it and this older guy goes to the back and brings out a slide hammer. He told us that would make things a lot easier.

I was a bit discredulous ($50 word for the win) but willing to try anything. Wouldn’t you know, about 5 minutes with the right tool and the job was done. Amazing!!!

HTML5 Genesis Conversion with the right tool

The slide hammer made that job so much easier. Having the right tool really helps, and sometimes you really do need a specialty tool. Converting an existing Genesis child theme to HTML5 can benefit from the right tool. Rafal Tomal built a simple but very effective tool for helping users convert a site to HTML5. (Note: Rafal’s tool was taken down or moved. There is a tool here that appears to be working.)

That is what I used for this site. It did 90% of the work for me in no time. Basically it uses a bunch of search/replace strings to replace existing markup in the style.css file to the HTML5 equivalent.

Please note, it is not perfect. You will have to make a few small adjustments. It changed a couple of things that probably shouldn’t have been changed. It also assumes a specific placement of certain items. For most Genesis child themes that is fine, but for the Streamline theme, the post info was moved outside the entry-header so I had to fix the markup for that manually. As of the time of this writing, it does not currently fix .s for input[type=search] so I had to fix my search markup. Also, there is some HTML5 specific code that really needs to be added to the style.css file to make it backwards compatible.

You also still have to adjust your actions to use the new Genesis 2.0 HTML5 hooks.

Still, I was able to do this site in HTML5 in about 15 minutes. It has taken me much longer to write about it than to do it. I think that Rafal’s tool is going to be something that all developers will want to make sure they know how to use correctly as the Genesis 2.0 release nears.