Now that Genesis 2.0 has been released in beta, you may already know it provides support for adding HTML 5 to all StudioPress child themes.
The only problem is, all existing child themes built on Genesis don’t include HTML 5 markup. In order to convert your child theme to HTML 5, you need to convert the XHTML markup to HTML 5.
Learn how to add HTML5 markup and check out the new Genesis HTML5 markup.
Step 1 : Select ALL CSS code from your child themes style.css file and paste it into the online converter using the link above.
Step 2 : Delete ALL the existing code from your child themes style.css file
Step 2: Copy the new code from the online converter and paste it back into your child themes style.css file.
Step 4: Copy one line of PHP code below and paste it in your child themes functions.php file.
Step 5: Clear your browser cache and reload your home page.
Code for step 4.
add_theme_support( 'html5' );Here’s more detail on the new loop hooks which also need to be changed if applicable and other information you may find useful.
Before Entry
XHTML Hook Location – HTML5 Hook Location
genesis_before_post – genesis_before_entry
Entry Header
XHTML Hook Location – HTML5 Hook Location
genesis_before_post_title – genesis_entry_header
genesis_post_title – genesis_entry_header
genesis_after_post_title – genesis_entry_header
genesis_before_post_content – genesis_entry_header
Entry Content
XHTML Hook Location – HTML5 Hook Location
genesis_post_content – genesis_entry_content
Entry Footer
XHTML Hook Location – HTML5 Hook Location
genesis_after_post_content – genesis_entry_footer
After Entry
XHTML Hook Location – HTML5 Hook Location
genesis_after_post – genesis_after_entry
The chart is basically a table showing you the old XHTML on the left and the corresponding HTML 5 on the right. All you need to do is change the classes in your child themes style.css file.
Once you have made the changes, you can then add support for HTML 5 to your child theme after updating to Genesis 2.0.
Here’s an example which shows some of the differences for the header markup:
Changing Classes
To change all the classes, its suggested you copy your existing child theme to a local installation of WordPress and make the changes in your style.css file there. This way you can test out how it works, update to Genesis 2.0 and then add support for HTML 5 in your child theme.
Note: HTML 5 will not work in your child theme until you have updated to Genesis 2.0 and added support in your child theme for HTML 5.
Using your favorite text editor like Notepad++, you can simply use the search, find and replace feature to change from the old to new classes.
Changing Hooks
You may also need to change some of the genesis_hooks otherwise your functions won’t work after you add support for HTML 5 to your child theme.
I believe StudioPress will also publish a table comparing the name changes for the new and old hooks as well.
Testing Plugins
You may also want to download your plugins folder from your server and drag them into your local installation so you can test them for HTML 5 compatibility.
Comment Form Allowed Tags
One thing i did notice since converting to HTML 5 was the comment form allowed tags. I can’t be certain but it seems i have been receiving more spam comments including offers to buy Louis Vuitton handbags since changing to HTML 5.
It may have something to do with the automated spam programs picking up on the fact the comment form now allows HTML tags.
This is a problem which is easily fixed as you can hide the form allowed tags using CSS code or remove the function completely using PHP code which is a better solution in my opinion.
Read more about how to remove comment form allowed tags in Genesis child themes.
Hiding HTML elements using CSS code doesn’t remove the output from the source code therefore may not be as effective.
I’ll be writing about how to remove comment form allowed tags shortly as well as reporting on whether removing them removes spam links in comments.
Problems
The only problems i had after changing the classes was some buttons on the home page which are non Genesis and the after post newsletter widget where i need to change to the new hooks.
Some of the home page widgets where also messed up which may have something to do with the new markup however its not a big problem as i simply removed the content using those widgets.
I made all the changes locally and tested before uploading the child themes style.css and functions.php files to the live site.
Conclusion
I have noticed an increase in search traffic after upgrading to HTML 5 however i cannot be certain its the result of the new markup. It could be a combination of the better markup, single post navigation links and support for schema microdata.
Leave a Reply
You must be logged in to post a comment.