Create Orchard Bootstrap Theme from WordPress Theme

Topics: Writing themes
Jan 24, 2013 at 2:32 AM

Hi, I am working in my second project using orchard, and this time i have to do a task related to themes creation.

I am having trouble trying to figure it out how to translate a WordPress Theme that a client has chosen to an orchard bootstrap theme. What do you think is the better way to accomplish this task? The rules will not match exactly the theme from one side to another!, so i need some advice from people that already did this job, or has deeper knowledge about Orchard themes y/o Bootstrap. Do i have to rewrite the full theme for Orchard Bootstrap and change the templates, or it is just a matter of changing some .css rules?

Any kind of help(Link, projects, resources, threads, docs, advice, contact, etc..) will be appreciated!!


Thanks a lot!

Jan 24, 2013 at 12:09 PM

I don't know if anyone can give an answer without knowing more specific about the original theme. And what do you mean by "Orchard bootstrap theme"? Are you basing your theme on one of the existing bootstrap themes from the Orchard gallery? 

If the original theme was bootstrap based, your task should be easy. If not, then you will probably have to do a manual conversion of the html and css rules. Working with bootstrap in Orchard, and using Visual Studio, I find the best thing to do is to include the bootstrap files in the theme, and then use the Web Essentials Visual Studio extension to automatically convert .LESS to .css whenever you save the .LESS file. It's much easier and faster if you are working directly in LESS, especially with bootstrap because you can use mixins and avoid having to litter your markup a bunch with bootstrap classes. 

Jan 24, 2013 at 3:54 PM

Thx for your reply.

I have to match this theme: http://livedemo00.template-help.com/wordpress_38932/

and i have to do it beginning from Bootstrap Theme in orchard.( I mean, i downloaded the Bootstrap theme for orchard and that's where i am right now).

Jan 24, 2013 at 4:06 PM

Looks like you're going to have a lot of manual coding if you have to implement it as bootstrap. It would be much easier if you just had to translate without having to use bootstrap, because then you could use all the same .css and .js libraries that theme already depends on, and your task would be purely translating from wordpress to Orchard. But having to write it in bootstrap makes the whole thing a much bigger effort because you have to rewrite mostly the whole thing.

Why do you have to use bootstrap for this? You might want to reconsider that decision if at all possible. Looks like your question isn't really that specific to Orchard, and is more of a "How do I rewrite this existing theme in bootstrap?", and at the same time you will also be translating it from Wordpress to Orchard. The former is the more time consuming problem, the Wordpress->Orchard part is pretty trivial. 

Jan 24, 2013 at 5:02 PM

The specific need is to be able to be responsive. And as you have said, i think there is not a safe way to make it easy! I am thinking about picking another Bootstrap theme closer to the Wordpress one or writing one from scratch as you said copying the wordpress rules. Whatever i choose, i think it will be a lot of work.

Thanks a lot for your help! 

Jan 24, 2013 at 5:15 PM

If the point of bootstrap is you need to make it responsive, i think there might be an easier way. That theme is using the 960 grid system, and there ways of making the 960 grid system responsive. It's actually very similar to how bootstrap does it. So one migration path for you might be 

1. Convert that theme from wordpress to Orchard

2. Patch up the theme to be responsive. Quick google for "960.gs responsive" gives lots of results that will help w/ this. For example: http://benbuckman.net/tech/11/11/migrating-static-960gs-grid-responsive-semantic-grid-lesscss 

 

Or you can do #2 before #1.