The hype is finally over. Genesis 2.0, HTML5 and Scheme are here to rock your website.
I personally waited more than 3 months for this and I know many who waited way longer for this. When I saw Brian Gardner’s post on G+ yesterday hinting on the possible Genesis 2.0 release, I was basically glued to the download page.
Yes this is the one of the advantages of being a Genesis Pro user. I have unlimited access to all their child themes and updates.
In this article, I am going to cover a few things such as:
- Why you should use Genesis framework and the advantages?
- Why you should update to Genesis 2.0 right now (for those current users)?
- How you can convert Genesis child themes to HTML5 correctly?
I know your heart is pounding like the drums of Amazon and therefore , without any further delay, let’s dive in!
The Advantages using Genesis Framework
Here are three very obvious advantages for using Genesis framework. With so many website owners using it, I bet you can’t go any wrong with it!
1. Search optimized
State of the art code and smart design architecture mean search engines clearly see your content. And with automatic updates, you never have to think about it again.
Genesis framework and all the child themes are SEO ready out of the box.
This means that you don’t need to spend precious time trying to get your website optimized as Genesis will take care of it.
Genesis framework is also working together with Yoast SEO to ensure that all the themes are having great SEO features. If you want to rank well on search engines, you need Genesis framework.
2. Turn-key designs
The Genesis turn-key designs give you an array of beautiful frames for your content. The design settings give you unprecedented control of the framework.
Imagine you are a website developer and you want to customize the website. Genesis framework empowers you to do so … without hassle!
Basically, this feature offers you a huge range of beautiful designs that you can work with.
Imagine this: Each child theme works as a ‘general body’ for your customized theme. Choosing the right theme and customizing the detailed to fit your requirement is so easy and can be done without needing a developer.
3. Unlimited everything
Unlimited support. Unlimited updates. Unlimited websites. There’s no “Developer Option” here. One low price entitles you to support, updates, and domains.
StudioPress’s business isn’t charging you for every upgrade. Instead, you’ll just need to pay only once and that entitles you for a lifetime update.
What else can I say about this?
Related article: Why did I choose Genesis Framework over Thesis theme?
Why should you buy or upgrade to Genesis 2.0 now?
Not yet upgrade to Genesis 2.0 … or maybe still deciding on whether to get Genesis? Let this three reasons be the ONLY reasons you need to get it right now!
1. HTML5 ready
Being HTML5-ready out of the box means your site will be fast, flexible, and future-compatible without hassles or headaches.
There are many advantages using HTML5 for your website such as:
- 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 impact user experience.
2. Mobile responsive
Now every visitor to your site will get a layout optimized for the device they are viewing from, without you spending big $$$ on a separate mobile site.
We are living in the 21st century and technology is over our heads. Gone were the days where you surf website on your laptops or PC.
Mobile responsive ready out of the box? Bring it on!
3. Microdata
Don’t make search engines guess about the most important elements on your page. Support for schema.org markup lets you do just that.
No idea what microdata or scheme are? Don’t worry! Here’s are what the pros think about it:
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 Inc.
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. – Joost de Valk’s (Yoast SEO)
Still want to read more about Schema? Then I highly recommend you to check on Ana Hoffman’s article on Schema Markup.
Converting Genesis child themes to HTML5
One thing you have to understand is HTML5 is NOT automatically enabled on your current theme unless it is recently released.
Being said that, you would need to get your hands dirty a little bit to get it working. At this point of writing, all child themes will be able to convert to HTML5 easily.
Important disclaimer: Backup your functions.php and style.css before doing any changes.
1. Adding Genesis HTML5 markups
Open your style.css and replace the old codes (left side) with the new ones (right side). You need to use programs such as Note++ to do the conversion.
Example below:
You can find the full list provided by Brian Gardner here.
2. Update the new Genesis HTML5 loop hooks
Now, open your functions.php and do the appropriate changes or updates. Again, credit to Brian’s for the codes which you can find it here.
Do not panic if some of the codes are not in your file. These are just very general codes and you just need to replace them if they are available 🙂
3. Enabling HTML5 markup features to your Genesis
As I said above, Genesis is not able to automatically enable HTML5 markup for you. Instead, you need do it yourself.
Before you go wandering around for the solution, all you need to do is to place the code below in your functions.php.
<?php
//* Do NOT include the opening php tag//* Add HTML5 markup structure
add_theme_support( ‘html5’ );
Yup, you are all done.
Now, clear your cache and check your website out. 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.
Related article: This is how you build a WordPress website like a pro … even though you are a novice!
Bonus! I’m lazy/not confidence/afraid of changing the codes
Let’s say you are worried to change the codes as you might break the site. But … you still want to do the changes!
Lucky for you, Rafaal and Cobaltapps team had created a simple tool to help you perform the conversion from XHTML to HTML5 CSS.
All you need to do are:
- Copy your original style.css codes
- Paste in the converter found here
- Press Convert CSS and paste the codes into your style.css
- Lastly, update your functions.php with the codes given in step 3 to enable HTML5
What if your pages looks distorted?
It happened to me (using Streamline theme). Now, here’s a quick fix for it. Open your functions.php file and check if the </div> are closed properly.
Here’s an example of broken homepage layout of mine:
genesis_widget_area( ‘newsletter’, array(
‘before’ => ‘<div class=”newsletter widget-area”>’,
) );
This happens because there is no </div> closing which caused the ‘error’. And the fix (bold) is as below:
genesis_widget_area( ‘newsletter’, array(
‘before’ => ‘<div class=”newsletter widget-area”>’,
‘after’ => ‘</div>’,
) );
The reason for this is when using HTML5, we (StudioPress) cannot default to </div> for the closing tag since it could be opened with <article> instead – Credit to Nick_TheGeek for explaining this to me.
Did I miss out anything?
Tell me … have you converted to Genesis 2.0 and enabled HTML5 on your website? If yes, how was the process like? Tell me using the comment form below.
Hold on!
Not yet a Genesis user? WHY?!
With all the features and advantages of Genesis framework, I see NO REASON why you shouldn’t give it a try. See what Genesis framework can offer first hand and this is how you can save over $850 on WordPress themes.
If you like this article, could you please share it for me using the red button below?
