Some of us can’t wait for Genesis to roll out 2.0 compatible themes. We need to get the ball rolling on microdata for our clients and don’t want to revamp a theme later. There are easy ways to convert a theme and make it HTML5 compatible. In this post, I’ll show you exactly how I did it and the extra microdata results I achieved that will make Google crazy happy.
Who This Post Benefits
1. Anyone who wants to know how WordPress 3.6, Genesis 2.0, child themes, and SEO plugins work together to produce the microdata Google craves.
2. Theme designers will benefit from knowing how to convert a child theme prior to creating additional customization.
3. Current StudioPress theme owners will benefit from knowing how to safely try the conversion and then switch back to their original version if need be.
See the Series
This is Part 4 in my series of posts to help you get up to speed on configuring schema markup and microdata for your site. I am methodically testing themes, tools, and plugins that will result in a marked difference in the type and depth of content that Google can index on your site.
Baseline
For the tests in this post, I’m picking up where I left off in Part 3 of this series where I showed you all of the extra microdata that you can get from using the following:
WordPress 3.6
Genesis 2.0.1
WordPress SEO plugin, with minimal configuration
Authorship, with only basic connections
The default Hello World post with an image I added will be used for all Rich Snippet tests.
What I’m Testing
I’ll be adding the Metro theme that has not yet been upgraded for HTML5 and testing to see if adding it wipes out all of the schema markup we had accomplished in Part 3.
Then, I’ll add the line of code to make the theme HTML5 compliant and then test those results.
After that, I’ll update the CSS (Cascading Style Sheet) to fix what adding HTML5 to the theme broke.
Why I’m Using this Combo
Most existing and new Genesis theme owners will have this combo for the next several months. They may have upgraded the framework to Genesis 2.0.1, but have not upgraded their theme yet. That means that they cannot take advantage of any of the microdata available.
Right now their choices are to wait for Genesis to roll out an update for their theme or to pay $200-$250 to have their theme updated. Now there is another choice.
This post references the difference in the microdata output of using Genesis 2.0 (found in Part 3) and the output you don’t have until you update your theme.
If you’re a designer or trainer, that is a huge selling point for you. So, be sure to read this full series so that you will be better equipped to make the case for why your clients need to update their theme.
Caveats
Most current Genesis / StudioPress child themes have to be edited to support HTML5. That entails adding a line of code to the functions.php file and updating the CSS file. I cover easy ways to do both in this post. So, this is written mainly for designers who need to make themes HTML5 compliant prior to customizing the design.
For existing themes in live production, use every tip in this post at your own risk.
You can easily back out these changes if you follow my advice on how to create backups before you make those changes. In other words, backup everything before you do anything.
In theory, these steps can be done on an existing theme, even if it has been customized, but customization varies so much that there can be no guarantees.
Also, if you have a child theme that was fully customized from scratch, like I do on BlogAid, the tactics here may not work at all. (It may work just fine, but I have not tried it yet.)
And one last thing. If you’re using a 1.9 version StudioPress theme right out of the box, just know that it will likely be updated by the nice StudioPress folks at some point. At the time of this writing, they have already updated a couple of existing themes and they are styled differently than the 1.9 versions.
Theme Updates
If you have an out-of-the-box theme now, and update to the 2.0 version of that theme when it finally does roll out from StudioPress, you will likely lose some of this conversion process and some of your current styling.
(FYI, just learned from Brian at Genesis that you can’t rely on the version number of the child themes listed in the download section. A few that have version 2.0 listed does not mean that they are compatible with the 2.0 framework. Yeah, it’s confusing. But version numbers follow the revision of the theme itself, not just the framework that supports them.)
Here’s my trick to avoid having my converted theme updated later. Any themes I convert with the tactics in this post, I’ll save it as a new child theme. That way there is no chance it could get updated and overwritten later. In other words, if I name the new child theme something else, there will not even be an update notice issued.
Keep in mind that the beauty of using child themes is that the Genesis framework underneath can update without having to make an update to the child theme, or running the risk of breaking the child theme. The 2.0 framework update has been the exception to this rule.
Okay, here we go.
Add the Metro Theme
For this conversion test, I’m using the Metro theme that has not been updated yet to support HTML5.
After activation, the results in the Rich Snippet Tool showed that I still had all of the benefits of having added the WordPress SEO plugin and authorship connections, but no schema markup.
In other words, I verified that having the combo of Genesis 2.0 and a pre 2.0 child theme, didn’t hurt, but it didn’t help.
(Visit Part 3 of this series to see all of the original Rich Snippet Tool results.)
Enable HTML5 Support on Child Theme
To make use of the new markup, the least that needs to be done is to add HTML5 support to the child theme. That part only requires adding one line of code to the theme’s function.php file.
I strongly advise you to make a backup copy of your entire site and then a backup of just your functions.php file before you try this!
Next, open a plain text editor, like Notepad. DO NOT use a Rich Text Editor like Word. It will goof the code. We’ll come back to this.
To access your functions.php file, go to Appearance > Editor.
Ensure that your child theme is displayed in the drop-down at the top.
Click once on Theme Functions. The code of that file will appear in the content area.
Click your cursor once anywhere in the code. Then copy the code.
NOTE: It is unwise to try to click and drag your cursor through all of the code to highlight it. Use Cntl+A to highlight it all and then Cntl+C to copy. (Mac users, swap Command for Cntl.)
Return to your plain text editor and paste the code. The shortcut key combo is Cntl+V.
SAVE THIS FILE. No kidding. Save it. Maybe consider making a copy of it. You want to ensure that you have the original code available if you need to switch back to it.
To Add the New Code
Scroll to the bottom and click your cursor at the very end.
Hit return to give yourself a new line break.
You can find the code snippet here.
You’ll see several lines of code, but only the last one is needed. I copied the last two lines, which includes the remark for what this code does.
Return to your functions.php file and paste it at the bottom.
It will look similar to this when you are finished.
Fix the CSS
Adding this code will likely goof up your CSS (Cascading Style Sheet). In other words, it will make your theme look funny. So, you’ll need to have the CSS fixed as well. There’s an easy way to do it.
Here’s a before and after shot. (This is sans the primary navigation, which I had not added yet since switching to the Metro theme.)
Convert the Style Sheet
There is an easy way to convert your theme’s CSS, but it’s not bullet proof and there are no guarantees.
I strongly advise you to make a backup copy of your entire site and then a backup of just your style sheet before you try this!
Go to this converter site and leave this tab or window open. We’ll be coming back to it.
Next, open a plain text editor, like Notepad. DO NOT use a Rich Text Editor like Word. It will goof the code. We’ll come back to this.
In another tab or window, log into your site and go to Appearance > Editor.
You should land on the code for your theme’s style sheet. Double check this. Look on the far right and ensure the name of your theme is in the drop-down, and that Stylesheet is highlighted at the end of the list.
Click your cursor once anywhere in the code. Then copy the code.
NOTE: It is unwise to try to click and drag your cursor through all of the code to highlight it. Use Cntl+A to highlight it all and then Cntl+C to copy. (Mac users, swap Command for Cntl.)
Return to your plain text editor and paste the code. The shortcut key combo is Cntl+V.
SAVE THIS FILE. No kidding. Save it. Maybe consider making a copy of it. You want to ensure that you have the original code available if you need to switch back to it.
Now return to the converter site you have open in another tab/window. Scroll to the bottom and paste your code there too.
Click the Convert CSS button. It converts rather quickly. If you blink, you miss it.
Then click the Select CSS button. That will highlight the new code.
Hit Cntl+C to copy it.
Return to your site. Your code should still be highlighted. If not, hit Cntl+A to highlight it. Simply hit Cntl+V and the new code will paste right over it.
Scroll down and click the Update File button.
Check Your Site
Visit the home page of your site and ensure that all is right with the world again.
If it didn’t work, it may just be a caching problem. Try opening a private, or incognito window or tab and viewing your site there.
If it still didn’t work, then go to your plain text file where you saved your original code. Copy and paste it back into your theme. That will restore your theme to its original state and perhaps this update method will not work for you. But, that doesn’t mean you need to give up. Read on to see all the benefits you’ll gain and consider either paying to have your theme updated or waiting for Genesis to roll out an update of your theme.
I can verify that this worked on the Metro theme I’m using for this test.
New Instances of Schema
When I checked the source code, there were nine instances of schema markup. From this previous test with just Genesis (Part 3), you may recall that there were only seven instances. This time, all of those same ones were present, and in the same places. Additionally, the WPSideBar and WPFooter markup was included, even though I still have no content in either.
So, this converter not only worked, it gave me even more markup opportunities than I was getting before.
When I ran the Rich Snippets Tool, all of the schema from Genesis 2.0 was present.
Test Conclusion
With just this much change, we now have everything we gained from the tests in Part 3 of this series, plus extras, and did it on a child theme that had not been updated by Genesis yet.
In other words, we’re cooking with gas! This will help developers and designers continue to crank out new themes without having to wait on them to be updated by Genesis.
More Help
If you’re not already on Genesis, why not? When you’re ready to step up to the best theme framework on the planet, I hope you’ll consider using my affiliate link.
If you just want a safe place out of the public eye to test all of this, or to get your feet wet with Genesis first, I’ve got a way for you to do that too.
Want me to try to convert your theme with this method? Contact me.
In this test I did not maximize the configuration for either the WordPress SEO plugin or authorship. There is a lot more info to give Google by doing both. If you need help with those, check out the SEO and AuthorRank Video Course that covers both. Or, see the full BlogAid Video Tutorials Library for help with everything, all in one place.
What Every Site Owner Should Know could save you hundreds of dollars and months of frustration. Free with subscription to BlogAid News.