Theme Frameworks: A Glimpse Into The Future Of WordPress Themes [WordCamp Malaysia Presentation]

This was my presentation at the 1st ever WordCamp Malaysia where I was fortunate enough to be invited as a speaker.

Theme frameworks are the next evolution in WordPress themes. They’re still relatively new, so let’s start off by asking…

What is a Theme Framework?

Theme frameworks for WordPress can be a little confusing, and it doesn’t help that there are many blank themes that call themselves ‘theme frameworks’.

In my opinion, theme frameworks are a solid base that serves as a starting point for other projects. A defining characteristic of theme frameworks are theme hooks (actions & filters) and when developing for a theme framework, it feels a little like developing a plugin. Examples of theme frameworks are Thematic and Hybrid.

A Little History

One of the best features of the WordPress platform are it’s themes. From the outset, the community has been creating and sharing their themes – first on themes.wordpress.net and now through the official theme directory. E.g. MistyLook, Andreas, K2, Vigilance

Site owners would install the theme and frequently make modifications to customise the theme to their liking. Inevitably, the theme developers would add new features to their themes e.g. Widget support. If you wanted to upgrade your theme to get the new features, you had to re-do your modifications.

In 2007 Scott Wallick organised a contest to create skins for Sandbox. It was meant to be a contest for designers and not developers, so you were not supposed to modify the templates, only the CSS. To give everyone an equal starting point, the contest made use of Sandbox as the framework. Entries had to be in the form of child themes.

The contest sparked an idea – child themes were a way of customising your site but keep upgrades simple. You start with a parent theme that you like, but make the modifications in a child theme. When the developer upgrades their theme, you replaced the parent theme only. Your child theme was unaffected and upgrades become less of a hassle. Ian Stewart & Justin Tadlock really took the concept further and have been pushing the envelop with parent & child themes.

The themes that Ian & Justin created were the first ones that were real theme frameworks – they were meant to be used as foundations to be customised or for totally new themes.

In the last few years, the premium themes market has exploded. Many premium themes offered exhaustive design options but site owners still resorted to editing CSS & theme files for more advanced customisations. Instead of child themes, premium themes like Thesis, Frugal & Headway separated user customisations into specific files – custom.css and custom_functions.php. That way when the main theme was upgraded, you only had to copy those files over.

Because you were not encouraged to change the theme files of the master theme, they offered a wide variety of actions and filters which you could customise through your functions file. These hooks and filters are a common feature and what I consider to be a defining characteristic of a theme framework.

Why Should I Care?

We’ve already seen one of the main benefits of theme frameworks – easy upgrades. Here are some more benefits for bloggers, businesses and developers

Bloggers: Build a Better Blog

  • More cost effective – invest time & money in 1 framework, get many styles
  • Easy to customise – point and click, widgets, child themes & skins
  • More options that you can shake a stick at
  • Better quality themes developed faster

WordPress for Businesses: Even Better as a CMS

Premium theme frameworks have so many features and customisation options, it makes it easy to launch a website with a customised design at an affordable cost. You could, for example, invest in a premium theme from WooThemes, StudioPress or the Headway Premium Theme (my fave!) and launch a business website in a week, at much lower cost than getting a designer to do it for you. I would know, because I charge lots for a custom theme.

Developers: Faster & More Efficient Projects

  • Build off a solid foundation
  • Add advanced features into projects (without actually knowing how to do it yourself)

To that last point, you can include theme options easily without having to code the theme options completely from scratch. Just use the theme framework’s built in options or API features.

How Do I Start?

So if you wanna be more efficient with your blog customisations, here’s how to get started. But first, we need to understand what types of theme frameworks exist. This is because customisations for each type is different.

Based on the different ways that these frameworks are customised, I’ve divided the different theme frameworks into 3 different models.

Child Theme Model

Theme frameworks in this model make use of a Child Theme to customise the theme framework. Example themes in this category include Sandbox, Thematic and Hybrid. To customise theme frameworks in this model, you need to create a Child Theme.

Your Child Theme needs to be in the themes directory, together with the framework. Within your Child Theme folder, there needs to be a style.css file. And in the file, you would have something like this:

/*
Theme Name: Child Theme
Description: Example Child Theme
Template: parent-theme
*/

/* Import the parent theme style (if you want) */
@import url(../parent-theme/style.css);

In the code above, the Template: parent-theme line tells WordPress to reference the parent theme when loading the Child Theme. Here’s an example of how this looks like if you’re using the Thematic theme framework and loading the Thematic Power Blog Child Theme.

I really like the Child Theme model, except that it’s pretty confusing especially for non-geeks. If your clients aren’t very web savvy, you could end up with the situation where they accidentally delete the Parent Theme, not knowing what it is.

Separate your Customisations

The next way you can customise your theme framework is to separate out your customisations into custom.css and custom_functions.php. Depending on your theme framework, these may be different.

Here are the steps to separate your customisations:

  1. Create a file called custom.css in your theme directory

  2. Tell your theme to include this file in the of the theme. Some theme frameworks will do this automatically for you, otherwise you’ll need to modify your header.php file like this:

  3. Optional: modify your body tag to make it easier to override the theme framework’s CSS

  4. Make your customisations in custom.css, e.g.

.custom #header {
/*custom styles for header*/
}

Now when your theme gets upgraded, you can simply copy these 2 files to your new theme to re-apply your customisations. Easy-peasy.

The new default theme that comes with WordPress 3.0 onwards–Twenty Ten–is actually a great starting point for your theme customisations, if you’re not using something like Thesis or Headway.

Learn to use Hooks

Hooks allow you to inject code into different points of your theme, without having to mess with your core theme files like header.php, etc. However, to use hooks effectively, you’ll need to know quite a bit of PHP. Here’s an example to get you started.

Let’s say I want to add a footnote to the end of every post. If I were to do it in the theme files, I would have to modify  index.php, single.php and archive.php. Or, I could put it into my functions file like this:

// create the function
function insertFootNote($content) {
$content.= "
?>
<div class="footNote">

Don’t forget to subscribe to our RSS feed so you never miss a post!

</div>
";
return $content;
}
// tell WP to add the function at the_content hook
add_filter ('the_content', 'insertFootNote');

That bit of code will now be injected everywhere the_content() appears on my site. Cool!

In the example above, I’m simply using one of WordPress’ many many hooks. If you use a theme framework like Thematic, you get even more hooks to use.

Conclusion

The new features and increased Child Theme support introduced in WordPress 3.0 makes the potential of theme frameworks even more powerful. I expect to see theme frameworks taking advantages of features like custom header and background images, simple navigation menus and custom post types and taxonomies.

And when your theme upgrade does add these new features in, you’ll be able to upgrade painlessly because you separated your customisations into a Child Theme or separate custom.css and custom_functions.php.

I foresee that Theme Frameworks are really going to be the future of WordPress themes. As the premium theme market heats up, premium themes will start adding new functionality like Theme Hooks to cater to power users. Regular themes like Twenty Ten may start adding Theme Hooks too so that it becomes even more viable as a Theme Framework.

And best of all, site owners like you and me will ultimately benefit from the increased maturity of the WordPress themes ecosystem.

* * * * *

If you liked my presentation, please share it via Twitter or Facebook, leave a comment and follow me on Twitter – @blogjunkie. Thanks!


7 Comments on "Theme Frameworks: A Glimpse Into The Future Of WordPress Themes [WordCamp Malaysia Presentation]"

  • Interesting talk at wordcamp. Thanks for sharing

    • thanks Thomas. where were you at WordCamp? didn’t see you in person

      • Somewhere in front, but am sure you are too psyche that day to see who is around 😛 Anyway great job.

  • NK says

    great talk!

    really interested with your presentation, i guess child theme and framework would be great on wordpress 3.0,

    been to wordcampmy, and your presentation really make me want to learn more on frameworks

  • Azure says

    thanks for sharing the information..

Trackbacks

  • Trackback from Wordcamp Malaysia 2010 | Confession of a Terminal Junkie

    […] Theme Framework: A glimpse into the future was the next topic by David Wang better know as blogjunkie on the twittersphere. He basically covers theme creations and how we can make use of the framework to extend themes. I think this will be best explain by the man himself at his blog post. […]

  • Trackback from What is a Wordpress Theme Framework?

    […] in recent years, a third option has entered the picture: WP theme frameworks. And many are predicting that they will completely take over. But what exactly are […]

Leave a Reply

%d bloggers like this: