WordPress: How to easily create a Thematic child theme
What is a Theme framework? And why use it?
Basically, a Theme framework is a WordPress theme that you can extend using functions, styles and child themes.
Child themes are most of the times two files: function.php and style.css. An optional directory containing images can be used as well. Child themes can’t work without a parent theme, which is a synonym for “Theme framework”.
So, why use a Theme framework instead of a “classic” theme? The answer is quite simple: When you need to modify one of WordPress’ functionalities, you don’t edit the core file. Instead, you use a plugin of a hook to modify what you need without editing the core files. That way, you can customize WordPress to fit your needs while at the same time being able to upgrade it without loosing your mods.
Theme frameworks use the same logic: Modify as you need, but don’t edit core file so you’ll be able to upgrade.
In this tutorial, I’m using the Thematic theme framework, a GPL licenced theme brought to you by Ian Stewart. Thematic is in my opinion very powerful and optimized. Therefore, you may be interested in taking a look at other WordPress frameworks as well, such as Hybrid, Headway, Thesis or WP Framework.
Creating the child theme
Right now, you should know what a Theme Framework is and why you should use them. But enough theory for now, let’s get ready to create our own child theme for Thematic.
Download Thematic
Of course, the first thing to do is to download the Thematic Theme Framework. Once finished, unzip the file on your hard drive.
If you want, you can activate Thematic and take a look at your blog. Thematic can be used as a parent theme, or in standalone mode. Without a child theme, Thematic is ready to use and features a really gorgeous typography. There’s no images or even colors, so that you can create your child theme and make Thematic fit your needs, either in its look or functionality.
Create your child theme directory
After you unzipped the Thematic zip file, open the directory. You’ll find a sub directory called thematicsamplechildtheme. Copy it and paste it on the wp-content/themes directory. Rename it with your desired theme name. In this tutorial, I’ll use the name catmatic.
Modify the stylesheet info
Navigate to your new catmatic (or whatever you named it) directory. you’ll find two files: The first is functions.php and the other one is style.css. Open style.css in your favorite text editor. You’ll find the following lines:
/* Theme Name: A Thematic Child Theme Theme URI: Description: Use this theme to start your Thematic Child Theme development. Author: Ian Stewart Author URI: http://themeshaper.com/ Template: thematic Version: 1.0 Tags: Thematic . Thematic is © Ian Stewart http://themeshaper.com/ . */
What you have to do is simply to name your child theme and give more info about it, as in the following example :
/* Theme Name: Catmatic Theme URI: http://www.catswhocode.com Description: A Thematic child theme. Author: Jean-Baptiste Jung Author URI: http://www.catswhocode.com Template: thematic Version: 1.0 Tags: Thematic . Thematic is © Ian Stewart http://themeshaper.com/ . */
Once finished, save the style.css file.
Styling the theme
At this point of the tutorial, we have prepared our child theme but we haven’t started to code yet. So what are we waiting for? The first stage of child theme development is to give the desired look to the Thematic framework, using CSS and images.
Add CSS Styles
Defining CSS styles on your theme child is definitely easy. All you have to do is to add styles to the style.css file from the catmatic directory.
Add images
Adding images to your child theme isn’t hard either. To do so, navigate to wp-content/themes/catmatic and create a new directory named images. (You can name it the way you want, but images is pretty much self-explanatory)
Then, simply put image files in the images directory. If you want to link to those images using CSS, you’ll do the following:
body{
background: #fff url(images/bg.gif) repeat-x top left;
}
Supercharging Thematic
Well, after having some CSS fun, your Thematic child theme should look as you want it to. Though, what if you want to modify the theme? Should you edit Thematic theme files?
No, you shouldn’t. Of course, it is possible to do it but it is not a good practice at all. If you’re familiar with WordPress development, you probably know about hooks, which allow you to “hook” a custom function to another. In addition to WordPress hooks, Thematic also adds lots of hooks that allow you to do many things to customize your child theme.
Add functions/hooks
Add your custom functions to your child theme is easier than it seems: Open the functions.php file from your child theme directory and paste your functions there.
To help you get started, here is a bunch of ready-to-use functions:
Modify theme link:
function my_footer($thm_footertext) {
$thm_footertext = 'Powered by WordPress, theThematic Theme framework and the Catmatic child theme.';
return $thm_footertext;
}
add_filter('thematic_footertext', 'my_footer');
Define where to use excerpt/full posts
$full_content = false;
function childtheme_content($content) {
if ($full_content) {
$content= 'full';
} elseif (is_home() || is_front_page()) {
$content= 'excerpt';
} elseif (is_single()) {
$content = 'full';
} elseif (is_tag()) {
$content = 'excerpt';
} elseif (is_search()) {
$content = 'excerpt';
} elseif (is_category()) {
$content = 'excerpt';
} elseif (is_author()) {
$content = 'excerpt';
} elseif (is_archive()) {
$content = 'excerpt';
}
return $content;
}
add_filter('thematic_content', 'childtheme_content');
Display Thematic menu above header
function remove_thematic_actions() {
remove_action('thematic_header','thematic_access',9);
}
add_action('wp','remove_thematic_actions');
add_action('thematic_aboveheader','thematic_access');
Add a favicon
function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.png"/>
<?php }
add_action('wp_head', 'childtheme_favicon');
Activate your theme
Right now, you should have a child theme that fit your needs in both the look and functionality. The last thing we have to do is to upload the theme to your wp-content/themes directory and activate it. Make sure that Thematic is available on your wp-content/themes directory as well.
Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?
WordPress: How to easily create a Thematic child theme