How to convert Genesis child theme to HTML5

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 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

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.

<?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?

32 thoughts on “Advantages Of Genesis 2.0 and How To Convert To HTML5?”

  1. Hi, Reginald.
    Thank You So Much!! I tried to add html 5 to my site earlier and it broke. In reading your article, I realized I may have left the opening PHP tag in. So I tried again the right way (I’d already converted my CSS using Rafaal’s tool) and BOOM!! It worked! Great tutorial! Shared and voted at BE.
    Jennifer

    • Hi Jennifer,

      You are most welcome! Oh my glad you found that working! I tried 3 times and failed so badly. I nearly gave up and paid $150 for developers to fix for me.

      And conscious struck me. I said, hey let me get Genesis guys to help me out. Nick was great and he pointed me roughly where to look at.

      The CSS converter is just … general changes which means it should work on 95% of the themes. If you had done customization like me, then most probably you need to check manually.

      Not a problem but just … time consuming. Oh well, I am happy to learn something new!

      Thanks for the vote as well.

    • Hi Rahul,

      You are most welcome. To change your favicon, add this to your functions.php file:

      //* Load custom favicon
      add_filter( ‘genesis_pre_load_favicon’, ‘custom_favicon_filter’ );
      function custom_favicon_filter( $favicon_url ) {
      return ‘http://www.custom.com’;

      Change ‘custom’ to the URL your favicon was uploaded to.

      Hope this helps.

      • Thanks Reginald for advice but when i copied that code in function.php, my wordpress dashboard and site not opened and an error occured. fortunately i got rid of that error but my site favicon is default at the moment.

        • Hi Rahul,

          Thanks for replying on that. Hmm that is weird. Okay let me show you a print shot of the related: Image

          I think I know why. There should be a ‘}’ <-- closing after it but again, it depends on where you paste the code. Hope this helps. Do tell me if it works 🙂

            • Hi Rahul,

              If you open your function.php, the last line SHOULD be end with ‘}’ right? Paste it right below. Easier said is paste on the last line … right after the ‘}’.

              You use can use Note++ to amend the code. That should work mate.

  2. Hi Reginald,

    This is great thank you. I used the converter as directed and it did all the work for me. I have a custom built Genesis site just for my site which was built using Genesis 1.7 I believe. When I opened up my site and everything looked very wonky, but on a quick refresh it was ‘almost’ back to how it should be.

    The only problem I can see is that it is showing the text title for my site now in addition to the header image. In the header settings the checkbox for showing my site’s title, etc. is switched off yet it’s still showing. I’m assuming that I’ll need to add a little bit of code to the CSS to hide this, but I’m not entirely sure how.

    Since you seem savvy with this, would you be able to help me hide the pink “Sweet 2 Eat Baking” text and the little icon (that’s shown with H1 and H2)? I understand if you don’t have the time to go delving in.

    Thanks for your time.

    • Hi Lisa,

      First of all, hello there 🙂 I removed the link just for security measures. I think your site is slightly broken now.

      I think this could fix the broken look. Open function.php (make a copy first) and find this:

      genesis_widget_area( ‘newsletter’, array(
      ‘before’ => ‘

  3. Hi, Reginand,
    Neither I am using Genesis nor HTML5. But I know the importance of these two. How do I implement Genesis? Could you give some suggestions?
    Thank You!

  4. I’m really excited with the released of G 2.0. Before this I’ve heard about schema.org, but never cared what it is. After reading some articles about it and knows that G 2.0 will utilize schema.org, and I’m really excited to dig more into it. Yoast.com also has written has great article on properly using schema.org on G theme and in Twitter I’ve seen a developer keeps posting his updates on schema.org plugin he is developing specifically for G users.

    • Hi Rudd,

      Yes Genesis 2.0 is great. Converting the theme is easy as long as you have very less … customization. Fully customized ones are having much more issue honestly.

      I read Yoast’s article 3 times as I had no idea what the hell he was trying to say (from a point of view of a beginner) 🙂

      Thanks for commenting mate.

    • Hi Rahul,

      You got to do it step by step.

      1. Convert CSS style but don’t upload.
      2. Convert functions to HTML5.
      3. Upload both and it should work.

      If you are not able to open your site, it could mean that you have pasted the wrong code on function.php. Remember that you are working with two files (one is style.css and another is function.php).

      • Reginald,

        I broke my site yesterday too. Going to be ambitious and try to convert again today. I will use the automatic style.css converter tool.

        Where do I place the code exactly in my child themes functions.php to activate the html5?

        Also, do I need to convert my custom css to html5 from my WordPress admin dashboard?

        • Hi Cliff,

          Thank you for comment. TO answer your question, here goes:

          1. Function.php – Place the code at the last time after the ‘}’. That will enable HTML5 to be active (do this only when you updated your style.css).

          2. Style.css – Two ways to do it. Automatic style.css works on 95% of the theme. If you got custom theme, chances is that you need to recheck back. Just CTRL F and find the old XHTML codes. Replace them accordingly with HTML5 codes.

          Hope this helps and drop me a line if you need assistance 😉

          • Reginald,

            Thanks for your quick reply. I actually added the enable HTML5 at the very top of the functions.php, but my site is not broke.

            Is there anyway you can see if in fact I have correctly switched over to HTML5 by viewing my page source?

            • Hi Cliff,

              Yes your site looks okay on my end so I believe you did correctly. Placing the HTML5 code within the function.php is fine as long as you place it correctly. Actually I am used to adding new codes towards the end but adding at the top most is still fine. Just don’t place it in between the lines of another code 😉

              Now, go treat yourself a good cold beer (actually I need one right now) and enjoy your ‘new’ site!

              Have a great weekend mate.

  5. I’ve been using Genesis for a couple of weeks now and, I must say, I truly love it. Simple, clean, and highly customizable.

    Thumbs up to your recommendation, Reginald, and thanks so much for mentioning Traffic Generation Café!

    • Hi Ana,

      Welcome to my humble blog. Am honored … truly 🙂

      I used Genesis since 2008 or ’09 and I truly love it since then. I can’t really afford a developer so, the support team is great.

      No worries about mentioning as I learned something from you and a few more bloggers; It is always great to share good stuffs. Moreover, sharing is caring right?

      Talk to you soon Ana.

    • Hi Aditya,

      Thanks for commenting mate! Glad to hear you are coming over to the ‘dark side’ and maybe when you have decided that, you could use my affiliate link 🙂 Heh~

      Have a great day mate!

Leave a Comment