Build a WordPress theme with Thematic

In a previous post, we looked at the new trend of theme frameworks. Today we'll build a WordPress theme step-by-step using the Thematic theme framework.

For the sake of this tutorial, we'll assume you already have WordPress installed and you're ready to begin skinning your site.

Step 1: Download Thematic

To begin, grab the latest version of Thematic from the web site (version 0.9.5.1 as of this post). Install Thematic as you would any other WordPress theme by copying to wp-content/themes/.

Step 2: Create your new child theme folder

Look inside the thematic theme folder and you'll see a folder named thematicsamplechildtheme. Copy this folder up a level (to the same location we put the thematic theme folder) and rename it to the name of your new theme. For the sake of the example we'll call ours mynewtheme.

Open up the mynewtheme folder and let's take a look at what we get out of the box:

• readme.txt
• functions.php
• style.css

Not much, huh? That's because our child theme will extend the thematic theme next to it. We'll just add what we need and override the things we want to change.

Step 3: Edit your theme meta-data

Open up styles.css and edit the meta-data in the comment block at the top of the file:

/*   
Theme Name: My new theme
Theme URI:  http://mynewtheme.example.com
Description: A nice description to show up in the WordPress admin.
Author: Ulysses Everett McGill
Author URI: http://twitter.com/ueverettmcgill/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

Now let's look at the rest of style.css:

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

You're free to use as much or as little of this boilerplate CSS as you want. How much of these @import statements I keep around varies by project.

Before we forget, let's go ahead and activate our new theme under Appearance -> Themes in the Wordpress admin.

As powerful as CSS is, at some point we're going to want to add to or change the markup we get from Thematic when we create our new theme. functions.php is the starting point to do just that.

Step 4: Wire up your hooks and filters

Thematic builds on WordPress architecture and provides two main ways to modify the markup and behavior of your site - hooks and filters.

Hooks

Think of Thematic hooks as placeholders in the underlying theme that you can graft on your own content. These functions are strategically placed in common spots where you would might want to add content such as above and below the page header, above and below posts, above the page footer, etc.

Let's look at using a sample hook to add some content below the page header.

// Creating the content for the Intro
function mynewtheme_intro() {
  if (is_front_page()) { ?>
    <div id='intro'>
     <h1>Why did the little cookie cry? Because his mom was a wafer so long!</h1>
   </div>
  <?php
  }
}
add_action('thematic_belowheader', 'mynewtheme_intro');
// END of Intro

Implementing a hook is a two step process. First, create your function that will provide the content for the hook. I like to prefix the function with the name of the theme followed by a descriptive, meaningful name for what the function does (which may or may not relate to the hook name at all).

The second step is to wire up the hook by calling add_action, passing the thematic hook name and our function name as arguments.

Filters

Filters work much like hooks except they allow you to take some data, act on it, and return something else. Let's say we wanted to add additional RSS feeds to the head of our web page. We can use a filter to do that:

function mynewtheme_rssfeeds($content) {
  $content .= "\t";
  $content .= "<link rel=\"alternate\" type=\"application/rss+xml\" href=\"";
  $content .= "http://feeds.feedburner.com/myawesomesite";
  $content .= "\" title=\"";
  $content .= wp_specialchars(get_bloginfo('name'), 1);
  $content .= " " . __('on Feedburner', 'thematic');
  $content .= "\" />";
  $content .= "\n";
  return $content;
}
add_filter('thematic_rss', 'mynewtheme_rssfeeds');

In this example we use the thematic_rss filter to take the existing RSS feed links (represented in $content) and add to it.

Opting-out

In some cases you'll want to turn off some Thematic features. We do this with remove_action. Let's say we want to remove the default blog description from the header:

// Remove default Thematic actions
function remove_thematic_actions() {
 remove_action('thematic_header', 'thematic_blogdescription', 5);
}
add_action('init','remove_thematic_actions');

We create a function that removes the actions we don't want and then wire up our wrapper function by a call to add_action on init.

Neat! So how many hooks & filters are there?

You can find the complete list of hooks and filters in the Thematic customization guide. The list is long but comprehensive. Fortunately, community member dwenaus created an awesome visual diagram.

As the diagram indicates, Thematic is fully widgetized out of the box with several aside regions for your widgets.

Advanced theming: It's still WordPress

What I love about Thematic is that it does not prevent me from using regular WordPress development features in my themes. I can still override functionality with my own templates, use built-in WordPress filters (like wp_head), and use all the plugins that have made WordPress very popular.

Summary

Thematic is a very full-featured yet extensible theming framework that let's me build WordPress sites quickly without starting from scratch. Give it a whirl and go create an awesome WordPress theme!