WordPress: How to easily create a Thematic child theme

by Jean. 36 Comments -

Are Theme Frameworks the future of WordPress Themes? In this article, I’m going to show you how to easily create a child theme for the popular Thematic WordPress Theme framework.

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.

  • http://toddsantoro.com Todd Santoro

    I love WordPress and have needed a great tutorial for creating Child Themes for my staff! Thanks Cats!!!

  • http://fwebde.com/ Eric B.

    Great article. I’ve never used a theme framework before, but this makes me want to give it a try.

  • Maxi

    Very good . good article

  • http://www.e11world.com e11world

    I never used thematic either but I think I will try it after this for my next project.

  • http://oustcat.com oustcat

    Thank you for the great article, and including the custom functions.

    If you don’t mind me sharing it here, another useful function (provided below) gets and displays the content from a page. Here, a welcome blurb is being added to the header in position 6 via the thematic_header hook.

    /** Welcome blurb added to header div **/

    function welcome_blurb() {

    if (is_front_page()) { // show blurb on front page
    $n = 16; // page id
    $welcome_blurb = get_page($n);
    print $welcome_blurb->post_content;
    } else { // else show this blurb on all other pages
    $n = 440; // page id
    $welcome_blurb = get_page($n);
    print $welcome_blurb->post_content;
    }
    }
    add_action(‘thematic_header’,’welcome_blurb’, 6);

  • http://wpzone.cn wpzone

    thanks!
    this is a great tutorial

  • http://www.hilario.lu/ djaVu

    I started using thematic but I had not time to go deep into it, because thematic is a framework where you have to take time to learn it.
    That’s why I clicked on this tutorial to “learn it faster” but I am a bit sad that it is more for beginners level.
    Nevertheless good article.

  • http://www.underworldmagazines.com julio

    NICE! well put together post.

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

    @oustcat : Nice function, thanks for sharing it :)

  • http://www.greenandchic.com/blog Carla

    I was trying to find the “catmatic directory” that was mentioned, but I dont actually know what it is or how to find it. Can you point me in the right direction?

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

    @Carla : “Catmatic” is a custom name for the child theme created in this tutorial. Unless you created it, you won’t find it ;)

  • http://www.trainhols.com Andy Holiday

    Is this the sort of thing used on large corporate wordpress magazine type blogs with one featured post on the index page followed by a list of sub posts all formatted differently to the main one, and with secondary featured posts in a number of categories followed by a list of other posts in that category?

    I really want to get into wordpress development a little more and your post has opened my eyes to the possibilities.

  • Pingback: links for 2010-01-28 « The Online Portfolio of Mary McCutchen

  • http://www.travelling-italy.com Paul Italian

    It is even easier than I have thought. Thanks!

  • http://robcubbon.com/ Rob Cubbon

    I’ve just had a company ask me to help them modify their website that was created with Thematic. (Problem is the developer modified the Thematic theme files instead of creating a child theme – but never mind).

    So, when you activate the theme, I guess you activate the child theme not the Thematic theme? And, is there somewhere you go to get a list of functions/hooks to add to your child theme’s functions.php?

    Sorry, just trying to get my head around this and this is the first blog post I’ve come across. No need to answer the questions :)

  • http://www.fharemortgage.com/FhaSecure.aspx Mikhail

    Frame work helps to give style and good designs to your template and theme. It is a awesome post and will be surely of great help to web designers and coders. Even newbie will gain a boost to their knowledge and people will surely like it.

  • Pingback: Stuff You’ll Like | Chuqui 3.0

  • http://www.flamescorpion.com Lucian

    What do you think is the best wp theme framework ? headway or thesis ?

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

    @Lucian : I prefer Headway which is more powerful than Thesis. If you’re looking to buy Headway, you can get a 20% discount here.

  • http://www.pawsoftware.co.uk Peter Coursely

    Thanks for the headsup on “thematics”. I am looking at Headway and it does look very impressive, it will be nice to have a powerful basic framework without having to get stuck into programming and coding. Is headway easy to use or will I need to do a course to get to grips with it?

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

    @Peter Coursely : Headway is great because you can do lots of things with little or no coding. If you’re interested in Headway, you’ll get a 20% discount there.

  • http://www.designstrom.com Natvar

    I never used thematic either but I think I will try it after this for my next project.

  • Pingback: Weekend Roundup #70

  • http://www.joshstauffer.com Josh

    This came at a good time because I was researching Child Themes a few weeks ago. I was up in the air over using Thematic or Hybrid. I ended up not going with either because I wasn’t looking forward to paying anything and the free documentation was poor. Also, I would imagine the learning curves for using the frameworks are steep.

    Tip: It is possible to use any theme as a parent theme.

  • http://www.letsgeek.net/ Harsh Athalye

    Hi,

    This is really great tutorial. It helped me a lot to customize my thematic WP theme. All credit goes to you.

    Cheers!

  • http://webgrrrl.net Lorna

    OK, I’ll admit, this howto is deceptively simple. I really got the whole thing, up to creating a folder for the images. The hooks part, that got me baffled. But I suppose I need to slow down and take things one at a time. Thanks for introducing me to the Thematic framework, I’m definitely using this for my future WP theme development.

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

      Yes it is simple, because the goal of this tutorial is to get started. I take note of your desire to see more advanced Thematic hooks. This should be a nice subject of a future article ;)

  • Pingback: Thematic WordPress Theme Toolbox: 10 extremely useful hooks

  • http://ebizoffers.net Jill

    I tried a couple of Tools , few for Dreamweaver and one stand alone. I was not really satisfied with results. I am gonna give a try with Thematic framework following your tutorial. It looks much better.

  • http://www.londonparistraintickets.co.uk/blog Jonathan

    I have just created a child theme using your tutorial. There were some errors in the beginning, but finally I did it. Thanks for such elaborated post.

  • http://bucurion.info/ Bucur

    Add this code to functions.php to upload a logo to a child theme.

    add_action(‘admin_menu’ , ‘childtheme_add_admin’);

    function childtheme_add_admin() {
    add_submenu_page(‘themes.php’, ‘Child Theme Options’, ‘Child Theme Options’, ‘edit_themes’, basename(__FILE__), ‘childtheme_admin’);
    }

    function childtheme_admin() {

    $child_theme_image = get_option(‘child_theme_image’);
    $enabled = get_option(‘child_theme_logo_enabled’);

    if ($_POST['options-submit']){
    $enabled = htmlspecialchars($_POST['enabled']);
    update_option(‘child_theme_logo_enabled’, $enabled);

    $file_name = $_FILES['logo_image']['name'];
    $temp_file = $_FILES['logo_image']['tmp_name'];
    $file_type = $_FILES['logo_image']['type'];

    if($file_type==”image/gif” || $file_type==”image/jpeg” || $file_type==”image/pjpeg” || $file_type==”image/png”){
    $fd = fopen($temp_file,’rb’);
    $file_content=file_get_contents($temp_file);
    fclose($fd);

    $wud = wp_upload_dir();

    if (file_exists($wud[path].’/’.strtolower($file_name))){
    unlink ($wud[path].’/’.strtolower($file_name));
    }

    $upload = wp_upload_bits( $file_name, ”, $file_content);
    // echo $upload['error'];

    $child_theme_image = $wud[url].’/’.strtolower($file_name);
    update_option(‘child_theme_image’, $child_theme_image);
    }

    ?>
    Salvat

    Child Theme Options
    <form name="theform" method="post" enctype="multipart/form-data" action="”>

    Use logo image instead of blog title and description:
    <input type="checkbox" name="enabled" value="1" />

    Current image:
    <img src="” />

    Logo image to use (gif/ jpeg/ png):
    (you must have writing permissions for your uploads directory)

    <?php
    }

  • Joseph

    Warning: fopen(D:\theyoutomorrow.com\wwwroot/wp-content/themes/JosephThemeChild/style.css) [function.fopen.php]: failed to open stream: No such file or directory in D:\theyoutomorrow.com\wwwroot\wp-includes\functions.php on line 4452

    Hi I did as you said and when I wanted to preview this is message I got..Please help
    “Warning: fread() expects parameter 1 to be resource, boolean given in D:\theyoutomorrow.com\wwwroot\wp-includes\functions.php on line 4455

    Warning: fclose() expects parameter 1 to be resource, boolean given in D:\theyoutomorrow.com\wwwroot\wp-includes\functions.php on line 4458

  • sarah

    @Joseph. You need to have a (local) webserver running in order to be able to view .php files. also if you are refering to a file on a server, you need to use the http:// protocol. D:\ is used for files, not webpages

  • http://www.40dollarwpinstall.com Andrew

    Thanks for a great tutorial! I used to think it’s so complicated :)

  • ayatali
  • ayatali