WordPress Theme Frameworks explained

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!

Enjoyed this article? Please consider donating: 3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK