Last week I got an email from my friend Dave:
What do you think of the eleven40 Pro theme.
Will you be upgrading this site to the new theme.
Since I was already working to convert my site to HTML5 here was my respond:
Yes, I’m upgrading my blog to Genesis 2.0 and HTML5 and will bi finished in a couple of days.
As you noticed well, eleven40 Pro is a completely new theme and upgrading old one to HTML5 will mess the site.
I don’t know about others but I had a lot of work to back things like I want.
My next post will be about upgrading eleven40 to Genesis 2.0. and maybe I’ll offer a service for those who want to migrate to HTML5 markup.
I like the eleven40 Pro and StudioPress made a good decision not to change the initial design. After all this is one of their most successful themes.
What I don’t like is that they left that orange logo :-(, but that’s just me.
Thanks for asking and stay tuned.
If you’re a user of the Genesis Framework then you probably know about latest Genesis 2.0 version. What makes this version so special and long-awaited is the brand new look with the latest high-end features.
I’ll mention some of them:
- Genesis 2.0 now is a stand alone theme (if you wish to use it that way)
- It’s completely mobile responsive
- Support for HTML5 and schema.org markup
No fears with updating to Genesis 2.0
Let this clear right away. Updating your existing child theme to Genesis 2.0 is just one-click update and won’t do any harm. Your site will look the same and it won’t break anything.
With the updates in WordPress 3.6 and Genesis 2.0 you get all the security updates and your website will be running on XHTML, just like before the update.
It’s always been so easy and painless updating to higher versions of the Genesis, and it’s just another reason why I like this framework.
Why HTML5 and schema.org markup
Let me repeat again. Your current child theme when updated to Genesis 2.0 is NOT automatically enabled to HTML5. What’s essential to realize is that after you update, your site will continue to output its current XHTML markup.
The HTML5 update will involve rolling up your sleeves, but hopefully not getting too dirty. 😉
But first let see some benefits using HTML5:
- It makes your website future compatible
- It improves cross-browser compatibility
- It makes your site truly mobile-friendly
- It allows for extensible design and supports video and audio like no other markup language
- It’s cleaner and more efficient in terms of storage, API interaction, and other ways impact user experience
Besides HTML5 I mentioned the new Schema.org markup that comes with the Genesis 2.0.
So, to not get too geeky about microdata or scheme, here’s what the pros think about it:
Let me start with explaining why you should be bothered with schema.org if you weren’t convinced yet. Not just Google uses schema.org, all 4 major search engines, Google, Yahoo!, Bing and Yandex use it for several different purposes … but it’s not just them. Recently, Pinterest joined the party by announcing support for Product, Recipe and Movie schema’s through their Rich Pins effort. So, in my opinion, schema.org markup is a must for everyone serious about their websites optimization. ~ Yoast de Valk (Yoast.com)
Google doesn’t use markup for ranking purposes at this time — but rich snippets can make your web pages appear more prominently in search results, so you may see an increase in traffic. ~ Google
Upgrading Genesis child themes to HTML5
Important note: Before doing any changes backup your functions.php and style.css. Don’t say I didn’t tell you!
1. Update your style.css
The first thing you need to do is to update your style.css for the new css tags. You can do it manually by changing tags one by one or you can use the link to convert XHTML markups to HTML5.
You just need to copy and paste your entire css into that converter. After converting, paste the all css back into your child theme’s stylesheet.
2. Update your functions.php
To enable the HTML5 in Genesis framework, you need to update the functions.php. It’s just one line which needs to be added to that file.
That’s it! Everything should be inline and looks … no different from the previous.
All the changes done are basically done on the backend which has little effect on visual part.
But if you’re using custom design, be prepared your site can “break” once the HTML5 is enabled.. This is because major element names have changed so styles that were previously targeting/affecting these elements are not properly targeted after the upgrade.
Here’s an example which shows some of the differences for the header markup:
You can find the comparison chart provided by Brian Gardner.
Upgrading eleven40 to eleven40 Pro
You already know why eleven40 is my favorite child theme and that’s the one I use here on DomainsFlow. How is this theme important to StudioPress simply shows it’s the very first child theme upgraded to Genesis 2.0 called eleven40 Pro.
For all of you with eleven40, upgrading to eleven40 Pro is free (I just love free updates, don’t you?). But you must be aware this is a brand new theme and upgrading will overwrite your current code. So make sure to update your files before making any changes.
As I earlier mentioned in my email, I like the fact they didn’t change the initial design. What I don’t like is they left that recognizable (orange) logo. A little bit higher price is in line with the latest updates.
Did I miss out anything?
So how about you … have you upgraded to Genesis 2.0 and enabled HTML5 on your website? If yes, how was the process like? Let me know in the comments below…
Stop right there!
Not yet a Genesis user? WHY!
Regardless of your experience, whether you’re a newbie to WordPress and theme frameworks or a grizzled developer, I see NO REASON why you shouldn’t give it a try.
Click here to purchase Genesis Framework, and take your WordPress site even further.