How To Convert Metro Theme For Genesis 2.0

Share and Like

If you are using Genesis framework for your blog then you must be aware that Genesis 2.0 is already in works and would be reaching to you very soon.

Genesis 2.0 is completely rewritten to support HTML 5 and have new css design. It will support responsive design out of the box also will have microdata support.

It is currently in BETA and you can install it on your test server for testing. There is one issue when you will try to upgrade, your child themes will not be compatible for the Genesis 2.0.

Good news is that it will not break anything on your site, if you upgrade to Genesis 2.0 and has an old child theme, it will work as Genesis 1.x.

But if you want to take full advantage of Genesis 2.0, you need to update your child theme to support HTML5 markups.

I am using Metro Child Theme on Makewebworld and have already converted it for Genesis 2.0. Here is how you can convert your installation.

Update Style.css for Genesis 2.0

The first thing, which you need to do, is update your style.css to use the new css tags. You can do it manually by changing tags one by one or you can use the link to convert XHTML markups to HTML5.

XHTML to HTML5 CSS Conversion

You can just paste your Style.css in that page and it will convert the CSS in the new format.

Just copy paste the css in Style.css and you are good to go.

Update Function.php

To enable the HTML5 in Genesis framework, you need to update the Function.php. Its just one line, which needs to be added to that file.

Once this line is added to your Function.php , your blog is activated to use Genesis 2.0.

Correct Small Issues

Once you have done the above activities, you are up and running with Genesis 2.0. This does not mean that you are done, there are small issues which needs to be fixed before you start using it.

Setup Top Navigation

First issue which you will noticing is your top navigation is limited to left side and does not look like it was looking with Genesis 1.x.

Top Navigation Menu in Genesis 2.0

Top Navigation Menu in Genesis 2.0

To correct that you need to update the below function in your function.php. Just copy the below code and replace it in your function.php file.

This should fix your issue with top navigation.

After Post Widget

After post hook has been changed so you need to update that also.

Just replace this line with the old action and you should be able to use the after post widget.

There are some changes in Genesis 2.0 in terms of hooks also, so if you have some custom code you may need to update that also.

You can check this page to see which hook has been changed and you need to replace the name in your custom code.

If you are facing any more issue, mention it in the comments and I will help you out to correct it.

About Sanjeev Mohindra

Welcome to MakeWebWorld! I am Sanjeev, a blogger and Technical Consultant in Software Industry. This blog will provide help and tutorials for creating your web space, Wordpress tutorials, social media management, video marketing or SEO tips. You can connect with me or subscribe to MakeWebWorld free tips.


  1. says

    Hi Sanjeev Mohindra!
    I want aks that Have you upgraded with html5 option? I can’t do it. it’s many error on my site that i don’t know why. I back old version.

  2. says


    Thanks so much for all the detailed code to update to Genesis 2.0! I definitely want to take advantage of all the new features and the responsiveness right out of the box! These are the types of questions that my clients have for me and I really appreciate the effort you have taken to keep us all up to date!

      • says


        My pleasure! Thanks for all your hard work! I am new to Genesis and this is the kind of stuff I need to learn! I’ve been using Thesis for over 3 years now. Ok, I need to add a Banner in a Genesis Child theme. Where do I go to find that information? I am a registered user and paid $349 for their 43 child themes so I can log into the forums, but the answers and information was NOT organized very easily if you ask me. Any suggestions?

        Thanks so much!

        ~ Jupiter Jim

        • says

          I am also a plus member and have all the child theme, I like their services.

          If you are talking about a banner in the header, it depends on the child theme but usually they are targeted by title-area and header-widget-area tags.

          You can also check the visual guide mentioned below, it gives a good idea about the classes..

          If you have any specific child theme in mind let me know I can let you know the exact changes required.

  3. says

    In the final release of 2.0, adding HTML5 support was changed from ‘genesis-HTM5′ to just ‘HTML5′, so your code would look like this:

    add_theme_support( ‘html5′ );


  4. says

    Hi Sanjeev
    Just converted a local Metro site to HTML5 and ran into both the issues you mentioned above.
    Also found that the Genesis featured posts widget had posts all over the page!

    The good thing is that if you concert, you can easily convert back… provided you keep a copy of your stylesheet plus any custom CSS.

    Looks as though revised Metro will be out early next week.

    • says

      Hi Keith, they have made is really easy to convert back, just keep the backup of function.php and style.css and we can go back any time….

      I am also waiting for official release of Metro for Genesis 2.0, Brian indicated that we might get some design changes along with HTML5 markup..

  5. says

    Hi Sanjeev,

    Thanks for sharing this. Good tips and it was great :) Bookmarked too.

    Anyway, I think the layout of this site is a bit off (should be from Genesis upgrade I suspect?) :)

    Take care!

    • says

      I think with genesis 2.0, there are some more changes which got introduced and Metro will require some more changes.
      Good news is that, Metro theme will be upgraded by Studiopress. So it’s just some more days and we will have an official update..

  6. says

    Hi there!

    Thought you make it sounds so easy, I am not using Metro. Haha… using Magazine and probably swapping over to Lifestyle.


    But again, thanks for sharing. Bookmarked this just in case.


    • says

      Hi Reginald,

      Some of the steps might be same, PHP changes will be different and depends on the theme. I am working on other Child Themes and will be adding the process soon for them.

  7. says

    Awesome, looks not that hard. The conversion tool works great, but it only helps converting the CSS, while you need to convert the php manually.

    • says

      Yes, it only converts CSS, but for metro theme there is not much changes in the PHP unless there are many custom modifications. Still looking for some tool which can handle PHP also…