How to create a child theme for Canvas (a practical case study) – part one

Let’s consider the following case study: Take one guy that wants his own WordPress-based website. He is quite skilled in front end development, fairly good with web design and has basic knowledge of PHP programming. In the past, he had customized several basic WordPress themes, starting from the default theme and replacing the code with its own markup. Now, to get the website of his dreams, he has two options available. First is to design his perfect website, code it down then, using the many tutorials available online, transform his markup into functional WordPress theme. The second one is take one theme, that has the functionality he desires, then tweak, twist and build upon the existing code to get the desired results.

As you might have guessed, that guy is me. I decided to take the second road in my quest for the right theme, because I lack the knowledge and the experience needed to build a proffesional-level theme. The solution, in theory, is simple enough. Take one great theme (Canvas), with the desired functionality already implemented, good documentation (a must) from a trusted provider (WooThemes) and make a child theme for it. And because I am sure there are many other people in the same situation, I am going to document the entire process via a series of articles.

First question would be: why Canvas? At this moment Canvas is the flagship theme from WooThemes. The bare looking default look is actually a feature, not an oversight. To be poetic I might say it’s an empty canvas that wants you to start painting on it. And you do it via a very powerful options page, where you can control and modify every aspect of the theme. You don’t have to know anything about CSS and HTML to be able to customize this theme.

What’s the catch? All this awesomeness has to have a downside. Canvas trades top performance for flexibility and adaptability. All the extra third party features mean as many external resources that need to be loaded (scripts, stylesheets, images). The changes done in the control panel are outputted as a big style block in the head section of the document. And so on. This does not mean though that the performance is crippled. Far from it. To make a car analogy, you get a great full spec family car, with all the bells and whistles, not a perfectly tuned competition model. It’s like comparing the full options Ford Focus you can buy from the Ford Dealer with the WRC model that participates in the World Rally Championship.

Next question: why a child theme? Why not get your hands dirty and modify the theme directly? While this is an option, a child theme has one big advantage. If the mother theme gets any upgrades, you risk loosing your customizations. A child theme allows all the customizations to remain separate from the original one; you can update Canvas and the WooFramework without worry.

A great guide in starting a child theme for Canvas is this article from WPTheming.com (http://wptheming.com/2010/03/woo-themes-canvas/). The information is slightly outdated (there seem to have been slight changes in the theme structure since the time that article was written), but is a great starting point. The next great resource is the Canvas HookFilter Reference (http://www.woothemes.com/woocodex/canvas-hookfilter-reference/). Registered users have also access to the WooCodex, the support forum and the community, for those special cases when the solution simply does not want to become visible.

I guess that is enough for now. Next time we will start getting our hands dirty with some code.

3 Replies to “How to create a child theme for Canvas (a practical case study) – part one”

Leave a Reply

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