Advantages Of Genesis 2.0 and How To Convert To HTML5?

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:

  1. Why you should use Genesis framework and the advantages?
  2. Why you should update to Genesis 2.0 right now (for those current users)?
  3. 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

What makes Genesis Framework so popular?
See why over 86,000 website owners trust StudIoPress themes

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?

Advantages of Genesis 2.0
Upgrading to Genesis 2.0 offers you more mobility that you can ever imagine

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 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 if you weren’t convinced yet. Not just Google uses, 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, 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

What are the advantages of converting to HTML5?
Converting to HTML5 is easy with the guidance

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:

Structural codes for HTML5
All you need to do is to change the codes on the left with the ones on the right

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.

//* 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:

  1. Copy your original style.css codes
  2. Paste in the converter found here
  3. Press Convert CSS and paste the codes into your style.css
  4. 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?

Leave a Comment