WordPress Theme Frameworks explained

by Cristian Antohe. 84 Comments -

A theme framework is a theme that is designed to be a flexible foundation that can serve as a parent theme for building child themes. While not for everyone, they bring good value to the Wordpress themes community through quality code and lot’s of child themes.

Reasons to use a WordPress theme framework

  • Ability to build just about any type of site.
  • If you don’t know to create your own WordPress theme from scratch
  • Valid and semantic XHTML
  • If you want to start to learn about WordPress theme design
  • Web developers that need a fast turnaround for their clients websites
  • SEO optimized theme
  • Out of the box support for many popular plugins
  • Dynamic body classes so you can target any particular page through css
  • Makes use of microformats

6 Frameworks to help you build that next killer WordPress theme

Sandbox

06_sandbox

Probably the first real Theme Framework. The Sandbox is a powerful tool available for WordPress theme designers and developers. The Sandbox can be easily designed just with CSS, so beginners will feel comfortable not bothering with PHP.

Thematic

01_thematic

Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it. It’s perfect for beginner bloggers and WordPress development professionals.

Hybrid

02_hybrid

Hybrid is a user-friendly, search-engine optimized theme framework, featuring 18 custom page templates and 9 widget-ready areas, allowing you to create any type of site you want.

Carrington

03_carrington

Carrington is a CMS theme framework for WordPress that makes it easy to create unique looks for different categories, posts and comments just by creating custom templates.

WPframework

04_wpframework

WP Framework was created to serve as the starting point in WordPress theme development.

It accomplishes this by providing you with commonly used functions and features that modern WordPress themes should have. So when you start a brand new WordPress project, using WP Framework you’ll already have the basic functionality set so you don’t have to worry about mundane task like creating the loop, or recreating all the standard template files.

Parallel

05_parallel

The Parallel Theme is a modular WordPress Theme developed for “Do it Yourself” designers and website owners. By allowing the selection of modules, this theme allow non-technical people to create a unique blog or website that meants their needs, as well as web standards.

Quick intro into child themes, filters, actions and templates

Child Themes

Child themes inherit all the functionality of the framework, but can also improve upon it.

Creating a child theme

Technically, creating a child theme is easy and straight forward. The first thing we need to do is upload our theme framework of choice into wp-content/themes. Our Child Theme will inherit all the functionality of our framework (widget areas, templates, theme options, etc.)

Next we’ll create a folder inside wp-content/themes, for example: DemoChildTheme. Inside it create a style.css file and add the following code inside it:

/*   
Theme Name: DemoChildTheme
Theme URI: www.example.com
Description: Use this theme to start your Child Theme development.
Author: Cristian Antohe
Author URI: http://cozmolabs.com/
Template: frameworkname
Version: 1.0
Tags: My Child Theme
.
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.
*/

The part that instructs WordPress that this is a child theme is:

Template: frameworkname

frameworkname should be the name of your framework (for example Thematic or Hybrid)

You now have a brand new child theme that you can go and activate from the WordPress backend. It doesn’t have any css because we didn’t add any. Now you can add your own css to the XHTML skeleton of the framework.

Hooks, actions and filters

Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress. Theme developers have takes this plugin functionality and expanded it so they can use it for themes. Most frameworks use hooks and filters to push your own content into predetermined places of the html (before the header, under the main loop, after the sidebar, etc.)

This is achieved by adding your own code into the functions.php file that you should create inside your DemoChildTheme folder.

There are two types of hooks:

  1. Actions
  2. Filters

The one similarity between these two is that one can use add_filter() for an action, and for a filter too. However, there are few differences between these two and they are addressed as below:

Actions and Filters have a different code.

Filters are functions that WordPress passes data through, at certain points in execution, just before taking some action with the data.

Actions are triggered by specific events that take place in WordPress, such as publishing a post, changing themes, or displaying a page of the admin panel. In theme frameworks they add code to your theme that you can change by targeting specific action hooks put to your disposal by the theme developer.

If you don’t have a clue what I just said don’t worry :). It’s a lot easier to show you.

All future examples will work with the Thematic Framework as I’m most experienced with it, but should work just fine for any framework that uses actions and filters.(provided you target the right hook)

Action Example – change the default loop of Thematic

By default the Thematic loop lists all the posts like any normal blog theme. We’ll now change the loop so it lists the first post normally, but for the rest of the posts on the page it will only list the title of the post.

The action hook that we’ll use to do this is called thematic_indexloop(). There already is a function attached to that hook (thematic_index_loop) that lists the default thematic loop. We need to remove the initial loop and then add our own otherwise will have 2 loops and we don’t really want that.

Any Thematic action can be removed if desired. It’s important to note that unlike add_action, remove_action cannot be called directly by functions.php — instead, wrap the remove_action function in a wrapper function called by the ‘init’ action, like this:

function remove_index_loop() {
	remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');

Next we’ll add our own loop

function child_index_loop(){
	/* Count the number of posts we have content for the first post only  */ 
	$count = 1;
	while ( have_posts() ) : the_post() ?>
			<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
    			<?php thematic_postheader(); ?>
				<div class="entry-content">
					<?php 
					if ($count == 1){ 
						thematic_content(); 
						} else { 
						echo '<p><a href="'.get_permalink().'" class="more-link">Read More...</a></p>';
						}
					?>
				</div>
				<?php thematic_postfooter(); ?>
			</div><!-- .post -->
			<?php
                        $count = $count + 1;
		endwhile;
}
add_action('thematic_indexloop', 'child_index_loop');

Filter Example – add the Home menu link to the main menu.

By default the WordPress wp_page_menu() function that lists the main menu doesn’t include a home link by default.

This Thematic filter will do just that:

function childtheme_menu_args($args) {
    $args = array(
        'show_home' => 'Blogue',
        'sort_column' => 'menu_order',
        'menu_class' => 'menu',
        'echo' => true
    );
	return $args;
}
add_filter('wp_page_menu_args','childtheme_menu_args');

Filters inside action hooks – remove the blog’s description

There’s more to actions and filters then you might think. Inside your action hooks you can have filters defined. Each filter can have it’s own place (order).

In this example we’ll remove our blog description from out Thematic child theme (the ‘Just another wordpress blog’ part):

function remove_thematic_blogdescription() {
    remove_action('thematic_header','thematic_blogdescription',5);
}
add_action('init','remove_thematic_blogdescription');

To add an about me section instead of the blog description with an image, after we’ve removed the description:

function about_me(){
   echo 'Hello, I'm Cristian. Here's an image of me. <img src="www.example.com/my_picture.jpg" alt="my picture" />';
}
add_action('thematic_header', 'about_me', 6);

 

Beyond hooks and filters

Hooks and filters are fun (at least for me) and a recommended way to create your child theme. However they aren’t the hole story.

Since WordPress 2.7 you can overwrite any template of the original theme (single.php or archives.php for example) and add your own code inside it. This way you have absolute control over your child theme without ever touching a single file inside your framework.

Conclusions

Theme frameworks are here to stay. We have this to thank all the framework developers for a lot of hard work, with a special mention to Ian Stewart who was/is a promoter of the framework – child theme concept.

Theme frameworks aren’t for everybody. They are mainly aimed at developers and DIY people that don’t have time (or don’t want) to code a theme from start.

Also people with good css skills but limited knowledge of WordPress theme developement or php will find it easy to build their own custom built theme just by css styling.

What was your experience with theme frameworks? Let me know in the comments!

  • http://www.Rarst.net Rarst

    As for me biggest advantage of frameworks is different paradigm.

    Regular theme development is for people used to HTML coding. Thinking in tag soup fashion.

    Developing on top of framework is for people used to programming in general. Thinking in functions, procedural logic.

    I am tinkering with custom theme for my blog using Hybrid framework. :) So far I had written about two hundred lines of functions code and hadn’t even touched original templates yet – no need.

  • http://www.catswhocode.com Jean-Baptiste Jung

    I have to admit that even if I know a bit about WP, I never tried any Theme framework. Thanks a lot to Cristian for this complete post about a subject I need to work on :)

  • http://www.cozmoslabs.com Cristian Antohe

    @Rarst – building on top of other people work is a really smart thing to do. This is why I love working with Thematic. I can build a child theme on a tight schedule.

  • http://nometech.com Alex Denning

    Nice post, but it’s pretty much repeating the SM post from a while back –> http://www.smashingmagazine.com/2009/05/27/wordpress-theme-development-frameworks/

  • http://www.cozmoslabs.com Cristian Antohe

    @Alex Denning – I did document my self from that post, but that was about: ” finding the right framework that works for you” while this post discusses in more detail the Theme Framework – Child theme concept!

  • http://www.0window.com/blog/ Catrin W

    Great share Cristian. Thanks a lot, this is bookmarked for future wordpress theme installations.

  • Pingback: Wordpress Theme Frameworks explained | bllogger

  • Pingback: Wordpress Theme Frameworks explained

  • Pingback: Wordpress Theme Frameworks explained - PSD to HTML - PSD to Wordpress - PSD Conversion

  • Pingback: Wordpress Theme Frameworks explained

  • Pingback: Wordpress Theme Frameworks explained | Neorack Script

  • http://austinpassy.com The Frosty @ WPCult

    Theme frameworks are a great tool for custom theme building. I’ve uses Thematic and Hybrid for many of my projects. There great and powerful tools that have complex functions and great SEO features built in.

  • http://clutterlovers.com theCount

    Great Article on frameworks, really helped me out on a couple of points- thanks! diggin it!

  • http://www.conversion-matters.co.uk Adam

    No thesis? I realise it’s expensive but it’s pretty good..

  • Pingback: Wordpress Theme Frameworks explained « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  • http://www.the42ndestate.com Adam Pieniazek

    Would you consider Thesis a theme framework? It doesn’t have child themes per se, but the custom stylesheets and custom functions file gives pretty much the same capability, right?

  • Pingback: [WORDPRESS] Wordpress Theme Frameworks explained – ワードプレスのテーマ製作用のフレームワーク - mBlog

  • Pingback: links for 2009-07-17 | synapsenschnappsen

  • Dan

    Thesis is not a framework. It’s a theme with a lot of options, but it’s aimed at non-developers who want a lot of flexibility built into a theme. Personally I don’t know why anyone would shell out that many dollars for Thesis when all these excellent frameworks are available for free.

    I use Thematic for client sites. The best part of using the framework is the ability of the client to keep all their themes updated just by downloading and installing the framework updates. This saves them a ton of time and hassles. I use frameworks for building client sites for WordPress and WordPress MU.

    • http://jronaldlee.com James

      I disagree. Thesis is not aimed at “non-developers who want a lot of flexibility built into a theme.” That’s how it’s marketed… but that is not what it is. Thesis has a lot of functionality built into the theme, but to achieve any kind of serious customization, you need to know your way around CSS and PHP.

      I bought Thesis based on the myth that it is for non-developers, and caught a lot of heat at work because it took me a long time to customize it to match our existing offerings.

  • Pingback: How to include JQuery on your WordPress theme

  • Pingback: Darklg Web (darklgweb) 's status on Friday, 17-Jul-09 14:33:02 UTC - Identi.ca

  • Pingback: Today in WordPress world - 17/07 | Links | WereWP

  • http://www.bluelimemedia.com Christine

    Hi there,
    Thanks for the great review Christian. I’ve taken a look at most of these but not all of them and you’ve reminded me to do so. I just put together a few frameworks (www.framework-templates.com) myself and would love to hear your feedback. When I created these I hadn’t realized that the ones you mentioned existed and now of course I’m seeing much more info about frameworks. I haven’t added my frameworks to the WordPress directory yet, but will do once I get more feedback.

  • Pingback: NewsPeeps

  • Pingback: WordPress Theme Frameworks Explained

  • http://www.ithemes.net ithemesdotnet

    First off thanks for the informative post. I, personally, have not jumped onto Framework fad… YET. Even after reading this post, I still have a hard time seeing the point in using them.

    Christian you said, “Also people with good css skills but limited knowledge of WordPress theme development or PHP will find it easy to build their own custom built theme just by css styling.” But isn’t this true for any theme, whether it is built off of a framework or not?

    The part I struggle with is stating that frameworks are for people with limited knowledge of WP theme development or PHP. So I pose the question, shouldn’t someone take the time to learn more about WP theme development and PHP first vs. learning how to use the numerous frameworks that are available?

    Please take this comment as my confusion instead of criticism. Perhaps I just need to sit down and try to use a framework then I could prove to myself it’s worth.

    One last thing… Christian, can you provide links of the themes you have built with thematic?

  • Another Flava

    While frameworks are a great idea, Yet they fail to solve WP’s basic problem and that is themes need to be designer friendly, have you ever tried editing a WP theme in Dreamweaver or any web page design program for that matter, it is impossible… is not a bit old fashion to be still using includes to render parts of a theme.

    There has to be a better solution to theme development than frameworks, which only seem to compound a simple problem that could be solved with some very basic theme revisions.

    In fact every reason given here “Reasons to use a WordPress theme framework” is a reason to leran to do it yourself.

    :)

  • http://www.colontours.com Jill

    I’m quite new to WordPress and I’ve found your article interesting and easy to follow. Thanks! I still find wp designs quite difficult to edit…hope they get easier soon.

  • Pingback: Wordpress Tema Ä°skeletleri | Sinerjik Blog

  • http://www.alecksdad.com Daniel Pavey

    Great article, I’ve learn a lot about WordPress development over the last few months, but had not come accross this technique yet. Looks very useful…

  • http://www.wordpressthemes.nu/ Robert

    I was gonna say “no Thesis” but then again, I dont think its any better than any one of these fine frameworks.

  • Pingback: BlogBuzz July 18, 2009

  • Pingback: How to include JQuery on your WordPress theme | Tutorials and wordpress

  • Pingback: Wordpress Theme Frameworks explained | WpMash - WordPress News

  • Pingback: links for 2009-07-18 » 4exp.net

  • Pingback: Wordpress Theme Frameworks explained « Design • iMenn

  • VB

    I wonder why WordPress wouldn’t design a framework that everyone could use and learn. Then designers could just add their child theme to the the official WordPress framework.

    I’ve used Theme Shaper , Hybrid and Thesis. All three are excellent, with great support.

    As you can see from your post, there are many frameworks in the works. Nathan Rice just announced his new framework. In another year or so the WP frameworks will double. Nothing will be standardized. Learning the different frameworks will be a nightmare and some of them won’t work, which wastes the time of WordPress users.

    What do you think of WordPress.org developing a standard framework that supports child themes?

    Just think of the framework, the WordPress community would have, if all the Theme Framework makers you mention in your post, put their heads together and built a standardized WordPress framework.

    I just bought Thesis and it’s easy to use, with lots of features. You can over ride the CSS and functions. How is it different that the other frameworks mention in this post and why isn’t it a framework?

  • http://www.urcoolgames.com/ markus

    yeah i liked it because the frameworks are really very important for the blogger like us!

  • Pingback: links for 2009-07-19 « Mandarine

  • Pingback: Wordpress Theme Frameworks explained | www.kotihost.com

  • http://zacklive.com Zack

    Great tutorial, especially the child theme part, thank you very much. I am wondering if there are any articles explaining how to create a theme framework?

  • http://www.stockrants.com/forum McTwist

    thanks for the wordpress frame works i think it will work very well after all i like to have change on my blog!

  • http://www.nutnbutshootinggames.com/ Michlle

    really the frame works are very great thing for our blogs for becoming a modified blog with a distinct list of features!

  • http://www.spieletipps-cheats.de Thomas

    Theme framework could be elaborate. Thanks for your help.

  • http://www.dollarshower.com/about Ajith Edassery

    Excellent post! I had actually started building my newest theme on WPframework but got a bit bored with it (due to time consumed to understand the well-modular structure). Finally, I had to take a simple theme and design mine.

    Next time, I shall remember one of the other frameworks.

    Tweeted!

  • http://www.mybuildingmaterials.net Chris

    Excellent article, full of very useful resources, thanks for sharing this..

  • Pingback: Weekly Wordpress Roundup 2

  • http://www.101waystomakemoney.com/ Robert Keller

    nice and useful article. It is very very useful to me. thanks

  • Pingback: Weekly Fave’s | Eiencafe.com --> New way to graphic

  • http://www.frasi-celebri.org frasi

    Great info. Thanks a lot, this is bookmarked for future wordpress theme installations.

  • Pingback: Madyson Designs » Blog Archive » Web in Review for July 23rd, 2009

  • http://www.forum-22.com/ clark

    I use Thematic a lot, did not know other frameworks, will gave them a try

  • Pingback: WordPressのフレームワークまとめ – ReplyReply: あきらめないをカタチにするアイデア

  • Pingback: Wordpress Theme Frameworks « Wordpress-News.de

  • http://bestonlinebeatmaker.com Danny

    After just about mastering WP I was really pleased to find this information about Themed Frameworks the explanations are quite simple to follow and I think it will become very useful to me in the future,

  • http://www.mytechguide.org/ MTG

    In my site, I am using Carrington Blog theme which is based on Carrington theme framework. I like this theme. I am also experimenting with Hybrid theme framework on my test site to compare both of them.

    Really WordPress theme frameworks are here to stay! :)

  • Hirvesh

    Hey, recommended this posts to other readers in my blog post. It’s really good! Keep it up!

    http://codefusionlab.blogspot.com/2009/07/20-kick-ass-wordpress-theme-frameworks.html

  • Pingback: Wordpress. Обзор ферймворков | Очередной блог фрилансера

  • Pingback: Frameworks themes Wordpress | Jose Orestes

  • Pingback: Daily Digest for August 15th | Half-baked

  • http://affordable-quality-seo-services.blogspot.com Brad

    I am brand new to wordpress and I am looking for as much info on it as possible. Thank you for this good article.

  • http://aquazullauderdalebythesea.com Michael

    Hello

    I’m new to wordpress and appreciate all the infromation you have provided. Thanks of sharing

  • Pingback: Wordpress Wednesday: 50 Links & Resources from around the web | Wordpress Guerrilla

  • Pingback: Wordpress Theme Frameworks explained - tutsmore

  • Pingback: Wordpress Theme Frameworks explained | TopRoundups

  • http://www.christmasideas.7md7.com Md

    Hi,

    I don’t know how to code, so this will be a dumb question. I like my current WordPress theme that I’m using, but I would like to put an online shop in there with a different theme but yet it’s still inside my blog. How do I do that? I know some code but not a lot.

    Thanks!

  • http://jayfluck.com/ Jay Fluck

    If you have the money I would invest in the Thesis theme for word press…it is a bit pricey but it is extremely easy to design a site without opening up an FTP all of the time. Not only that it is perfectly SEO for onsite optimization.

  • James

    Hi.
    I use a wp framework with 960 css grid. This really brings down the development time. Did tinker with thematic and child themes before setteling on wp framework.

  • Pingback: Getting funky with the thematic loop – Open Source Design - fall09

  • Pingback: A Comparison of 6 Popular WordPress Frameworks | Pro Blog Design

  • buzztone

    @ Jay Fluck – Thesis is in my view not a framework like the others discussed here. I see it as one of many commercial non-GPL themes that are now available with lots of user configurable options for people who don’t want to look under the hood when tuning their WordPress.

  • http://gwtips.com Tipster

    I’ve been using Thematic for the past few months at my blog and I’m pretty happy. Using a framework is a different way of working for me with setting up a child theme, making edits within a functions.php file, but once you get the jist of it you see how much easier it makes your life. Plus, the Thematic framework has some pretty good support documents… so props to them for that.

  • Kirby

    Nice Job Cristian, especially with the point that Thesis is not a framework. Most of the theme designers out there are jumping on the framework bandwagon in name only. What many call a framework is not.

    Thematic is the framework by which all others should be defined. The options are almost limitless. Many newer so-called frameworks like genesis are not.

  • http://danielkoskinen.com Daniel Koskinen

    I think it would be good to point out more clearly that the Carrington framework is very different compared to the likes of Thematic etc. Carrington simply provides an extension of the WP templating system and makes it very easy to create a unique template for, say, the post display in a specific category while leaving all other parts of the page untouched. The Carrington Framework (note that I’m not talking about the Carrington themes, Blog & Text) doesn’t impose any restrictions on the structure of the markup, class naming schemes or CSS. While Thematic and the like are really cool for quickly creating a fairly standard web site or blog, if you want something very different from the original layout you have to jump through quite a few hoops (or hooks…) to get the functionality you want. In those cases I’ve sometimes felt it can be easier to just take a basic theme and modify it directly.

  • Pingback: 3 WordPress Theme Frameworks – Streamhead

  • Pingback: Comparison of Popular WordPress Frameworks | MikeCapson.com | A Saint John Web Designer

  • Pingback: Best practices for WordPress coding

  • http://www.makingofmoney.com Kevin Lampard

    Theme Hybrid looks like a great theme.I will definitely have a closer look at that one.Love the framework

  • http://learnhowtoloseweight.net Jake

    I usually just make my own framework when I’m making a theme and then use it for other themes that I make later on.

  • http://www.baglamadualari.com Bağlama Duaları

    I usually just make my own framework when I’m making a theme and then use it for other themes that I make later on.

  • http://www.emailreadingjobs.info ugdjan

    Thanks lot for you Cristian. It will so useful to me.

  • http://www.incomeopportunity.uni.cc/ John UG

    Your Quick introduction is so nice. It will help to all the beginners.

  • http://www.411waystomakemoney.com Lena

    Great staff , but why pay for something when you can get it for free?