WebSite Creation

How To Convert Metro Theme For Genesis 2.0

July 21, 2013

453

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.

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.

19 COMMENTS

Tinh Le September 23, 2013 at 9:51 AM

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.
- Sanjeev Mohindra September 23, 2013 at 2:02 PM
  
  Yes, I have upgraded with HTML5 options. have you done lot of customization to your site. let me know and I can help you in resolving those errors..
  - Tinh Le September 27, 2013 at 5:37 PM
    
    Thank Sanjeev Mohindra! I upgraded success 🙂
Tinh Le September 20, 2013 at 10:39 PM

Tks Sanjeev Mohindra!
Your Metro Design is very AMZING.
- Sanjeev Mohindra September 23, 2013 at 9:43 AM
  
  Hi Tinh, Now there is no need to go through this process. Studiopress has already releasd Metro Pro which can be used to upgrade…
Jupiter Jim September 2, 2013 at 1:07 AM

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 Mohindra September 2, 2013 at 1:33 AM
  
  Hi Jim, Thanks for liking the post, I appreciate the detailed look on the post…
  - Jupiter Jim September 2, 2013 at 2:46 AM
    
    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
    - Sanjeev Mohindra September 4, 2013 at 9:52 AM
      
      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..
      
      http://www.genesisframework.com/markup.php
      
      If you have any specific child theme in mind let me know I can let you know the exact changes required.
Carrie Dils August 30, 2013 at 7:56 PM

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’ );

Cheers.
Carrie
- Sanjeev Mohindra August 31, 2013 at 12:03 PM
  
  Hi Carrie, Yes Genesis 2.0 Final has changed the tag for HTML5 support, I have updated the gist for correct tag.
Keith Davis August 30, 2013 at 7:49 PM

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.
- Sanjeev Mohindra August 31, 2013 at 12:06 PM
  
  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..
Reginald August 8, 2013 at 10:24 AM

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!
- Sanjeev Mohindra August 8, 2013 at 9:35 PM
  
  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..
Reginald July 23, 2013 at 10:53 PM

Hi there!

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

Hmm!

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

Reginald
- Sanjeev Mohindra July 23, 2013 at 11:08 PM
  
  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.
Rudd July 22, 2013 at 9:02 AM

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.
- Sanjeev Mohindra July 22, 2013 at 9:57 AM
  
  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.