Have we mentioned we LOVE the Genesis Theme Framework?
Well, we do! HTWP2.0 is powered by Genesis and a custom StudioPress child theme.
The latest version of Genesis (2.0) has been in the works for awhile. Its release was delayed pending the release of WordPress 3.6, as it requires many of the features and functions in version 3.6 to function optimally. But the wait was worth it!
Genesis 2.0 comes with many upgrades and improvements, but the addition of support for HTML5 and Schema.org markup are two of the most exciting. The benefits of both have been much discussed and we couldn’t wait to implement them on HTWP2.0.
In this tutorial, I will show you how easy it is to convert your site from XHTML to HTML5 markup (it took us just a few minutes).
The benefits of HTML5 markup are numerous, but here are a few of the highlights:
- 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 is cleaner and more efficient in terms of storage, API interaction, and other ways that impact user experience.
Step 1 ~ Update to the latest version of WordPress
Genesis 2.0 requires WordPress 3.6+ to function. Simply log into your WordPress Dashboard and click to update to the latest version.
Be sure to backup your current WordPress installation before updating.
Step 2 ~ Update to Genesis 2.x
Once WordPress 3.6 is installed, return to the updates page and update to the latest version of Genesis.
Step 3 ~ Add this code to your functions.php file
Copy and paste the following code into your Genesis Child Theme’s functions.php file:
add_theme_support( ‘html5’ );
The functions.php file can be edited within your Admin Dashboard via Appearance » Editor » Theme Functions.
Step 4 ~ Convert style.css file from XHTML to HTML5
There are many guides available that can walk you through doing this manually, but the fastest and easiest method we found was to use Eric Hamm’s excellent, and free, Genesis 2.0 XHTML To HTML5 CSS Online Conversion Tool.
To use the tool, simply follow the step-by-step instructions provided on the page.
Your style.css file can be edited within your Admin Dashboard at Appearance » Editor » Stylesheet.
To show you how easy it is, here are the instructions directly from Eric that we used to convert HTWP2.0’s style.css file instantaneously. It was an effortless cut and paste process.
To convert your Child Themes CSS code to reflect the new HTML5 markup found in Genesis 2.0+:
- Save a backup copy of the CSS you are going to convert.
- Copy and paste your entire stylesheet code into the textbox provided.
- Click the “Convert CSS” button.
- When you click that button your CSS code will instantly be edited to reflect the new HTML5 elements.
The program goes through the code pasted in, finds all of the elements that need updating, and replaces them with the correct HTML5 markup. The rest of your styles stay intact, only the necessary elements are affected.
Once converted, follow these steps:
- Click the “Select CSS” button and then copy all the CSS.
- Paste all the CSS back into your Child Theme’s stylesheet.
- Save your changes.
- Refresh the front-end of your site to view the results.
Note that this may, or may not, be a perfect solution for all cases, but should be a huge time saver for many Genesis users.
Step 5 ~ Check your site
Go through your site and make sure that everything displays properly after the conversion. Be sure to check your posts, pages, archives, about and contact pages, etc., because any customizations you have made, may need some extra attention.
If things look a little wonky after the conversion, don’t panic, it is most likely either a site caching issue, or a missed bit of CSS code.
To test for a caching problem, first try deleting your browser cache. If you are using a caching plugin on your site, clear its cache as well.
If neither of those worked, you’ll have to go through your CSS code to locate the selector(s) that weren’t converted, and fix it/them. The resources below will help you with that.
If for any reason you need to restore your original CSS stylesheet, simply copy and paste the original code back into your theme and refresh your page.
- Genesis Visual Markup Guide – Genesis Framework
- Genesis Markup Comparison – StudioPress
- Extending HTML5 Microdata – HTML5 Doctor
- Online tool for checking differences between two blocks of text – Diff Checker
HTML 5.0 is the new web standard, and Genesis 2.0 allows you to take full advantage of it. By following the steps laid out in this tutorial, and utilizing the tools suggested, you should have your site converted in no time.
Don’t let the task of converting your site to HTML5 be a daunting one. We converted HTWP2.0 in just a few minutes following theses instructions and experienced no issues whatsoever. I am confident you can do the same.
So upgrade as soon as possible so yo can start reaping the benefits of HTML5 and Schema.org markup.
P.S. We are currently testing a plugin that adds Schema markup to posts and pages. We hope to have a review of it for you soon.
What Do You Think?
Are you excited to start using HTML5 and Schema markup on your site(s)? Have you already started using them? Did you have any problems converting your Genesis theme? We’d love to hear from you. Give us a shout in the comments below, then share the stuffin’ out of it!
- How To Change The Default Genesis Favicon - Video
- How To Automatically Nofollow All External Links In WordPress
- How To Expand/Collapse WordPress Posts Using jQuery SlideToggle - Video
- The Ultimate Image Size Cheat Sheet For Facebook, Twitter, Google+, And More [INFOGRAPHIC]
- When Guest Blogging For Links, Should You Nofollow Links? - Video