How To Convert Metro Theme For Genesis 2.0

Top Navigation Menu in Genesis 2.0
Top Navigation Menu in Genesis 2.0

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.

[gist file=”6048841″]

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.

[gist file=”6048914″]

This should fix your issue with top navigation.

After Post Widget

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

[gist file=”6048953″]

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.


  1. 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. Sanjeev,

    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!

      • Sanjeev,

        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

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

    • 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. 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!

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


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

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

Comments are closed.