Dissecting Astatic – Thematic Child Theme Tutorial

Last weekend I released a free Thematic child theme called Astatic. It was probably the most “advanced” Thematic theme I’ve ever made as I made use of several theme filters, as well as CSS styling to make certain pages look differently using the same HTML markup.

In this tutorial, I’ll go over:

• The very basics of making a child theme
• How to use Thematic action and filter hooks
• How to style pages differently with CSS without changing markup

Child Theme Basics

A child theme technically only needs 1 file, a stylesheet named style.css. This differs from a normal theme which requires at least two files, index.php and style.css. Here’s what the header of a very basic child theme’s stylesheet should look like:

/*
Theme Name: Astatic
Theme URI: http://www.themelab.com/free-wordpress-themes/
Description: A very minimal child theme of Thematic
Author: Theme Lab
Author URI: http://www.themelab.com/
Template: thematic
Version: 0.1
*/

Notice the line second from the bottom which says Template: thematic. This is what sets the parent theme to whatever theme is in your /wp-content/themes/thematic/ directory.

You could change this to whatever directory you wanted to inheirit all the parent theme stuff from any other theme, for purposes of this tutorial we’ll stick with Thematic though.

Ever since WordPress 2.7, you can also make pretty much any template file you want in your child theme directory to have it override the parent theme’s template.

Since Thematic has a boatload of action hooks and filters, you probably won’t need to do that. You can make just about any change you want through just a functions.php file in your child theme directory.

Thematic Hooks and Filters

You can take advantage of Thematic’s built-in hooks and filters by placing a file called functions.php in your child theme directory.

I used these for removing bits of code from the template without altering the parent theme files. For example, the first part of Astatic’s functions file removes the Javascript code from the head of the document.

It was mostly used for Jquery dropdown menus for navigation. Since I was only planning on having a simple one-level-deep page navigation, I decided to remove it. Here’s the code I used.

function remove_thematic_js() {
    remove_action('wp_head','thematic_head_scripts');
}
add_action('init','remove_thematic_js');

Code Explanation

1. The first line is where I named the function. This could be named whatever you want but it’s best if you use a descriptive function name. I used remove_thematic_js because, well, the function is for removing Thematic’s JS.
2. The second line is where I define what the function does. In this case, I’m removing the thematic_head_scripts from the wp_head hook
3. The final line makes the magic happen.

Overriding Thematic Functions

To “override” a function, you first have to remove it, then code a new function to replace it. I did this with the thematic_blogtitle function, so I could wrap h1 tags around it on non-singular pages. First, the removal code:

function remove_thematic_blogtitle() {
    remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_blogtitle');

Pretty much identical to the above, except for one seemingly minor detail. Notice the number “3″ in the remove_action line? This is the priority defined in Thematic’s original function files, which needs to match in our function, or it won’t work.

You can find more of these functions in Thematic’s library files. Just make sure the hook name (in this case, thematic_header) and the priority (if applicable) match.

Now, here’s the new and improved blogtitle function:

function new_blogtitle() {
if (is_home() || is_front_page()) { ?>
<h1 id="blog-title"><a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></h1>
<?php } else { ?>
<div id="blog-title"><a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></div>
<?php }
}
add_action('thematic_header','new_blogtitle',3);

Code Explanation

1. First line, is once again, to name the function. Since this is for a new blog title, I’ll call it new_blogtitle. Remember, descriptive names.
2. The second line is a conditional tag which checks to see if you’re on the homepage or front page (basically the only pages which use h1 tags for the blog title).
3. The “else” portion is identitcal to the first part, except the blog-title ID is wrapped in <div> tags rather than <h1>.
4. The final line adds the action to thematic_header with priority 3 (remember, the same number we used to remove the old blog title function.

Excerpt Display on Homepage

By default, Thematic displays the full post on the homepage (as opposed to an excerpt). Since I want it to be consistent with all archive and search pages (which have excerpts by default) I needed to change it. Here’s the code I used:

function astatic_content($content) {
	if (is_home() || is_front_page()) {
		$content= 'excerpt';}
	return $content;
}
add_filter('thematic_content', 'astatic_content');

On top of that, I wanted to limit the amount of words in the excerpt to 20.

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Credits to WP Engineer for the above code, which could be used on any WordPress theme (not just Thematic).

Of course, you can change the “20″ to whatever you want, just keep in mind you may have to increase the height of the non-singular posts to accommodate more excerpt words, which we’ll go over next.

Changing the Look With CSS

Now on to my favorite part, the CSS. You’ll notice on any index pages (main index, archives, categories, tags, and search) posts are laid out in two columns. The markup between these and singular pages (single posts and pages) are essentially identical.

I used the .not-singular class to style the index posts differently. This class is output in the <body> tag on any index pages through the body_class function.

I used the following snippet of code to style posts on these index pages.

.not-singular .post {
	width: 400px;
	height: 150px;
	float: left;
	margin-right: 50px;
	}

Code Explanation

1. The first line selects only non-singular posts, since that’s all we want to style onw.
2. The next two lines give a fixed height and width to the div, this will help the posts look neat.
3. The float: left makes the post float to the left, which forms the “columns”.
4. The right margin sets 50 pixels of space between the two columns, so they aren’t crammed.

Remember, the body classes change from page to page, depending on what type of page you’re on. Let’s say you’re on a “Pink” category archive page, a body class called category-pink will be made available, and you could set the entire background of the page with the following code: body.category-pink { background-color: pink; }.

Keep in mind, pink background would probably make your visitors want to gauge their eyes out, although hopefully you get the idea of the potential of body_class. You can also take advantage of post_class which functions very similarly for styling various types of posts, also integrated in Thematic.

Footer Navigation

Since I removed every single page navigation menu through filtering, I decided I would insert a basic page menu through the thematic_abovefooter hook.

function astatic_footernav() {
?>
<ul id="footer-nav">
<li id="home-link"><a href="<?php bloginfo('url'); ?>/"><?php _e('Home', 'thematic'); ?></a></li>
<?php wp_list_pages('title_li=&depth=1') ?>
</ul>
<?php
}
add_action('thematic_abovefooter', 'astatic_footernav', 10);

This is just a basic, one level deep page menu including a translation-friendly “Home” link. Here’s the CSS code to style it:

#footer-nav { clear: both; list-style: none; text-align: center; padding: 50px 0 20px; }
#footer-nav li { border-left: 1px solid #000; display: inline; padding: 0 10px; }
#footer-nav li#home-link { border-left: 0; }

Code Explanation

1. The #footer-nav clears any floats with clear:both, removes the default bullets with list-style:none, aligns the menu to the center, and adds sufficient padding above and below the list.
2. #footer-nav li adds a 1 pixel border (or separator) to the left of every list item, sets them all up on one line, and adds padding to the left and right.
3. #footer-nav li#home-link makes sure no border is displayed to the left of the “Home” link, since that would look slightly odd.

Footer Link

I decided to add a footer link back to the Astatic theme page, in case any visitor of an Astatic site was wondering what theme it was using. I used the following code.

function childtheme_theme_link($themelink) {
    return $themelink . ' & <a href="http://www.themelab.com/2010/04/03/astatic-free-thematic-child-theme/" title="Astatic Thematic Child Theme">Astatic</a>';
}
add_filter('thematic_theme_link', 'childtheme_theme_link');

Note: Please use & instead of a straight ampersand. I changed it above because it was messing up the code display for some reason.

Basically I’m piggybacking on top of the default “Thematic Theme Framework” link, which can be removed in the Thematic Options page. I picked up this tip from this guide to customizing Thematic.

Conclusion

Make sure to download the Astatic theme and take a peek at the code for a more in-depth look at what went on during the development.

For any more Thematic information, ThemeShaper is the ultimate resource, including their forums. It also may be worth following a site called Thematic 4 You which is run by Thematic lead developer, Chris Gossmann.

I plan on doing even more detailed (if that’s even possible) “theme dissection” tutorials in the Underground when it’s ready. Make sure you sign up to the email list on the previously linked page for any news regarding that, among other goodies.

Phew. I hope you learned a little something hear about making Thematic child themes, and hopefully about child themes in general. Let me know what you think in the comments.

Related posts:

1. Astatic – Free Thematic Child Theme
2. Monochromatic – A Thematic Child Theme
3. Should Child Themes Be Listed on WordPress.org?

Written by - Visit Website