How To convert your WordPress Theme to a Framework Child Theme

Let’s face it: build a theme from scratch could be hard. Lucky of us, we have Theme Frameworks… and life will be really easy right?. Oh, well…sort of.
I think that build a theme inside a framework, any framework could be a headache. Well, for me it is.
Consider more variables and more options when designing a new theme isn’t help me at all. I have to divide the effort in two different ways, one for designing, one for taking care of the framework.

Also, If there is so many excellent themes and many of them (let’s say a discrete 99% of the total) are  ‘framework-free’, why do you will design a theme with a framework in mind? Chances are that you’ll become crazy dealing with the extra-complexities and you’ll get with a so-so theme with framework functionality. That’s was bugging me for a while when I started using WordPress frameworks.

Let’s face it: build a theme from scratch could be hard. Lucky of us, we have Theme Frameworks… and life will be really easy right?. Oh, well…sort of.
I think that build a theme inside a framework, any framework could be a headache. Well, for me it is.
Consider more variables and more options when designing a new theme isn’t help me at all. I have to divide the effort in two different ways, one for designing, one for taking care of the framework.

Also, If there is so many excellent themes and many of them (let’s say a discrete 99% of the total) are  ‘framework-free’, why do you will design a theme with a framework in mind? Chances are that you’ll become crazy dealing with the extra-complexities and you’ll get with a so-so theme with framework functionality. That’s was bugging me for a while when I started using WordPress frameworks.

So one question arise between my thoughts: How difficult is to ‘port’ a theme to a framework? How difficult could it be to add code and
convert a theme, any theme, even a theme I didn’t build to any framework? The answer is what you’re reading at this moment.

If you ever have designed a theme this post will be easy to follow. But for those who will start your first theme they will gain a lot if you keep reading. A Theme Framework adds flexibility and extend new ‘powers’ to your theme. Talking about benefits I already mentioned that before so please take your time to review it if you like.

The following post (and other to come) explain how to upgrade a regular theme to exploit the power inside a Theme Framework. If you decide to ‘power-up’ a theme or your own design, you should split your winning strategy in the following steps:

Step 1: Choose a theme.
Maybe you already did this, in this case you can skip this step. But if you want to upgrade a theme, you could spend long time choosing it. There are too many possibilities and variations nowadays. And the difficult depend mainly in your personal taste.

In this post I decided to select the Freemium Theme . The selection was based on this few considerations:

  • I like the theme , I think is elegant and actually I used to build a variation for this site.
  • The theme is XHTML 1.0 Transitional what is telling me a lot about theme’s undercover. It is a minimal guarantee that design is well structured and well formed. This is IMPORTANT. You won’t like to convert a theme to find out that most of the problems are because the theme is bad designed.

So you can see the bar is lower enough to convert any theme that you like.

Step 2: Select a framework
Now again, you maybe did this choice before anything. I know people sticked to different frameworks. I experimented a few Frameworks like Thesis or Hybrid, solid frameworks both of them. The concepts on this guide are flexible enough to apply to any framework.
For this example I  finally choose Thematic because my familiarity and extensive support.

Step 3: Theme Structure Adaptation

My strategy consisted in split the problem in small steps, but you will have to know some understanding of several topics:

  •  Get a deep understanding of theme structure , framework structure and WordPress inner working (this last step is very important). Get familiar with template hierarchy inner working to understand every file in the theme and its mission. This hierarchy rules ALL WordPress designs no matter if you have a single theme or a framework. Both of them are handled by the same rules.
  • Although you can do almost anything with a theme framework, every framework has its limits, and their limits are given by its hardocded structure, is minimal but is there. A framework is simply a theme with steroids, and because it’s a theme it has a base structure. In most cases you can expand and adapt, but you will have an non-replaceable skeleton that you have to respect.
  • Given that limitation (a very little indeed) , you first theme adaptation consists in mimic this basic theme structure.

Let’s see a schematic comparison between Thematic structure versus Freemium structure:




There are a few points to note here:
-In Thematic exist two aditional divs: main and container , there are not equivalent on Freemium theme
– the container div is present in both themes but doing different functions.
– The wrapper div in Thematic is identical to container div in Freemium
-Freemium has another additional divs (div menu by example). This can be easily implemented in Thematic so those additonal divs will be
handled programming in functions.php

So, the goal is to adjust Freemium Theme so Thematic and Freemium use the same structure.
Basically:
1- Renamed the div wrapper to container
2- Added the missing divs :main and container

This action implied changes to the header.php, footer.php and index.php

Consequences:
-Changing header.php implies changes to footer.php too. Note that main div spans from header.php to footer.php so we have to be careful. This is not a big deal since WP struct will use the same header and footer in all pages, preserving the structure accordingly.
-Changes to index.php are more delicate. If you adjust the loop,  It implies changes on page.php, single.php, search.php and every page using a loop to show posts. Refer to Template Hierarchy to understand its implicancies.

Step 4: Theme Style Adaptation
If you change the basic structure, chances are that you will have to adjust the stylesheet too.
This implies an search&replace inside style.css to make the theme works right. You’re best friend in this situation: Firebug
Not a trivial task but feasible. In the Freemium Theme, a good design clearly made the things easier.

Step 5:Re-Coding
After structure is in position and the style is ok , I started to add the features needed to resemblence the original theme.
This implies to have a good knowledge about the theme and all actions and hooks that framework provides.
Any good framework has the power to add/remove code from virtually any place needed .

The challenge here was to find out what exactly need to deactivate in the framework to things work right. Usually the framework come with a minimal setup that you have to selectively enable/disable to match your needs. In this part is when you will need a good knowledge base for the framework in question or simply to digg into the framework’s code to get an idea how to accomplish every theme’s detail.
In Thematic for example there is a good help about structure in this link .
This is the point where the framework forums are more needed. Every framework has some ‘quirk’ to apply in some particular cases.

Step 6: Test & Re-test
It takes time to check the theme and see if it works in the way expected. I usually use WordPress y the preview feature to compare head to head the original and the enhanced theme to see if everything works in the way we expected.

Conclusions:
The conversion requires an analysis and very good framework knowledge. This first time conversion took me a regular day of job and fine tuning required a couple of hours more. With a little practice the work can be handled in matter of hours.

So, if you are a designer take my advise: Design the theme outside of the framework, then start thinking how to put it inside. If you convert your
theme to one framework, to convert to another will be far easier.

So now, we have an theme upgraded , what can you do with it? Well, maybe the question is: what can’t you do with it?
The sky is the limit and I will try to show you in future posts.

In the next post I will present the enhanced theme called Clone Freemium

Thanks!

(I can’t believe you could keep watching to here…congratulations!)

So one question arise between my thoughts: How difficult is to ‘port’ a theme to a framework? How difficult could it be to add code and
convert a theme, any theme, even a theme I didn’t build to any framework? The answer is what you’re reading at this moment.

If you ever have designed a theme this post will be easy to follow. But for those who will start your first theme they will gain a lot if you keep reading. A Theme Framework adds flexibility and extend new ‘powers’ to your theme. Talking about benefits I already mentioned that before so please take your time to review it if you like.

The following post (and other to come) explain how to upgrade a regular theme to exploit the power inside a Theme Framework. If you decide to ‘power-up’ a theme or your own design, you should split your winning strategy in the following steps:

Step 1: Choose a theme.
Maybe you already did this, in this case you can skip this step. But if you want to upgrade a theme, you could spend long time choosing it. There are too many possibilities and variations nowadays. And the difficult depend mainly in your personal taste.

In this post I decided to select the Freemium Theme . The selection was based on this few considerations:

  • I like the theme , I think is elegant and actually I used to build a variation for this site.
  • The theme is XHTML 1.0 Transitional what is telling me a lot about theme’s undercover. It is a minimal guarantee that design is well structured and well formed. This is IMPORTANT. You won’t like to convert a theme to find out that most of the problems are because the theme is bad designed.

So you can see the bar is lower enough to convert any theme that you like.

Step 2: Select a framework
Now again, you maybe did this choice before anything. I know people sticked to different frameworks. I experimented a few Frameworks like Thesis or Hybrid, solid frameworks both of them. The concepts on this guide are flexible enough to apply to any framework.
For this example I  finally choose Thematic because my familiarity and extensive support.

Step 3: Theme Structure Adaptation

My strategy consisted in split the problem in small steps, but you will have to know some understanding of several topics:

  •  Get a deep understanding of theme structure , framework structure and WordPress inner working (this last step is very important). Get familiar with template hierarchy inner working to understand every file in the theme and its mission. This hierarchy rules ALL WordPress designs no matter if you have a single theme or a framework. Both of them are handled by the same rules.
  • Although you can do almost anything with a theme framework, every framework has its limits, and their limits are given by its hardocded structure, is minimal but is there. A framework is simply a theme with steroids, and because it’s a theme it has a base structure. In most cases you can expand and adapt, but you will have an non-replaceable skeleton that you have to respect.
  • Given that limitation (a very little indeed) , you first theme adaptation consists in mimic this basic theme structure.

Let’s see a schematic comparison between Thematic structure versus Freemium structure:




There are a few points to note here:
-In Thematic exist two aditional divs: main and container , there are not equivalent on Freemium theme
– the container div is present in both themes but doing different functions.
– The wrapper div in Thematic is identical to container div in Freemium
-Freemium has another additional divs (div menu by example). This can be easily implemented in Thematic so those additonal divs will be
handled programming in functions.php

So, the goal is to adjust Freemium Theme so Thematic and Freemium use the same structure.
Basically:
1- Renamed the div wrapper to container
2- Added the missing divs :main and container

This action implied changes to the header.php, footer.php and index.php

Consequences:
-Changing header.php implies changes to footer.php too. Note that main div spans from header.php to footer.php so we have to be careful. This is not a big deal since WP struct will use the same header and footer in all pages, preserving the structure accordingly.
-Changes to index.php are more delicate. If you adjust the loop,  It implies changes on page.php, single.php, search.php and every page using a loop to show posts. Refer to Template Hierarchy to understand its implicancies.

Step 4: Theme Style Adaptation
If you change the basic structure, chances are that you will have to adjust the stylesheet too.
This implies an search&replace inside style.css to make the theme works right. You’re best friend in this situation: Firebug
Not a trivial task but feasible. In the Freemium Theme, a good design clearly made the things easier.

Step 5:Re-Coding
After structure is in position and the style is ok , I started to add the features needed to resemblence the original theme.
This implies to have a good knowledge about the theme and all actions and hooks that framework provides.
Any good framework has the power to add/remove code from virtually any place needed .

The challenge here was to find out what exactly need to deactivate in the framework to things work right. Usually the framework come with a minimal setup that you have to selectively enable/disable to match your needs. In this part is when you will need a good knowledge base for the framework in question or simply to digg into the framework’s code to get an idea how to accomplish every theme’s detail.
In Thematic for example there is a good help about structure in this link .
This is the point where the framework forums are more needed. Every framework has some ‘quirk’ to apply in some particular cases.

Step 6: Test & Re-test
It takes time to check the theme and see if it works in the way expected. I usually use WordPress y the preview feature to compare head to head the original and the enhanced theme to see if everything works in the way we expected.

Conclusions:
The conversion requires an analysis and very good framework knowledge. This first time conversion took me a regular day of job and fine tuning required a couple of hours more. With a little practice the work can be handled in matter of hours.

So, if you are a designer take my advise: Design the theme outside of the framework, then start thinking how to put it inside. If you convert your
theme to one framework, to convert to another will be far easier.

So now, we have an theme upgraded , what can you do with it? Well, maybe the question is: what can’t you do with it?
The sky is the limit and I will try to show you in future posts.

In the next post I will present the enhanced theme called Clone Freemium

Thanks!

(I can’t believe you could keep watching to here…congratulations!)

1 Comment


    • Reply Cancel Reply
    • June 4, 2010

    thnx a lot ,now I can atleast make some of mine child themes.

Leave a Reply

Your email address will not be published Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*