Here’s the first resurrected theme released on Theme Lab. Originally designed by Small Potato back in 2007, I ported it to the Thematic theme framework. It now includes features such as threaded comments as well as many features inherited from the parent theme, Thematic, such as new markup.

As always, remember how to install a WordPress child theme. You will need both Thematic and the Braintied child theme uploaded to your themes directory. Just activate Braintied.

Related posts:

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

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. Braintied – Free Thematic Child Theme
3. Monochromatic – A Thematic Child Theme

It’s been a long time since I’ve released a Thematic child theme. This one is called Astatic, and it’s designed to be a very minimalistic WordPress blog theme with posts formatted in two columns on index pages.

If you remember how to install a child theme, you also need to have Thematic uploaded to your /wp-content/themes/ directory, but activate Astatic.

Notes

• I removed several elements through the functions.php file. I could’ve used display: none; to disable them through CSS, but that kinda freaks me out.
• The blog title will show up wrapped in an H1 tag on non-singular pages. On singular pages, the post title uses the H1 tag. This is to keep the SEO crazies happy since I removed the blog description (see above note) which usually handles the H1 stuff.
• The posts on the index pages are styled in two columns on index pages through the .not-singular selector. Credits go to the body_class function.
• Only three files included in the child theme: screenshot.png, functions.php, and style.css. No images are used in the design at all.

I tried to make the code in functions.php pretty well commented so you can hopefully figure out what’s going on there. I may do a follow up post on my development process.

Credits

Every time I make a new Thematic child theme is a learning experience. Here are a few resources I used to help me out:

• ThemeShaper Forums – This place has a wealth of useful info in their archives. Tip: Use a site specific Google search followed by your query (i.e. site:themeshaper.com/forums/ child theme question).
• The Right Way to Override Theme Functions – A nice tutorial on overriding Thematic functions. This information was probably gone over in some post in the Thematic forums (see above) too.
• Useful Thematic Filters – This post has a nice list of useful Thematic filters (like the title would suggest).

There are also a lot of good info on the ThemeShaper blog, particularly through the How To Modify WordPress Themes The Smart Way series.

Conclusion

Hope you all like the design. It all started when I coded this when I was bored, then I decided to turn it into a Thematic child theme.

Most of you who have seen my “designs” know that there are very few images, mostly because I suck at making them in Photoshop. Hence, they are almost always pure CSS.

I know it’s really simple but I’m sure it could come in handy for something. Let me know what you think in the comments.

Related posts:

1. Dissecting Astatic – Thematic Child Theme Tutorial
2. Braintied – Free Thematic Child Theme
3. Monochromatic – A Thematic Child Theme

There has been some discussion recently on child theme inclusion in the official theme repository. Child themes are WordPress themes that latch onto a parent theme to do something a little extra, whether it be adding additional styles or functionality.

There are a lot of great child themes out there that do some amazing things on top of frameworks like Thematic and Hybrid, but unfortunately those who don’t look for themes anywhere but WordPress.org will probably never hear about them.

I made a site over at Themelets to list all of the child themes you won’t see on the official theme directory a while back, but nothing will beat the promotion of child themes than on the official WordPress website.

Great designers who support WordPress deserve to have their themes listed in the official theme directory. Not only is it a disservice to them, but also to WordPress users who miss out on these awesome themes, such as these free Thematic child themes from Cozmoslabs.

I think as long as the child themes are designed for parent themes already listed in the WordPress.org theme directory, there shouldn’t be any reason why they’re not included. Be sure to vote if you think they should be included.

Related posts:

1. Child Themes, Coming to a WordPress.org Theme Directory Near You
2. Monochromatic – A Thematic Child Theme
3. Braintied – Free Thematic Child Theme

I came across Martín Fernández‘s website a while back, and noticed it was using a modified version of the Lightweight theme. Check out what he did with it below.

As you can see, it’s still a light theme with a slightly different color scheme. It really works great to showcase his graphics work.

I got in touch with Martín and he agreed to let me release his modified WordPress theme here on Theme Lab. I converted it to a child theme, so the only things in the file are a stylesheet and a screeenshot. Download it here. Check out the demo here.

Make sure you know how to install a child theme, so you’ll need the Lightweight theme uploaded as well as the Ligher child theme. Activate “Lighter” in your WordPress admin.

Related posts:

1. Pink Lightweight Theme Available For Download
2. WordPress Theme Tweaker Plugin Review
3. Monochromatic – A Thematic Child Theme

I registered the domain themelets.com several months ago (way back in August of last year) in the hopes of one day making a WordPress child theme “portal” of sorts. I started working on it off and on for the past few weeks, and earlier today I finally got it ready.

On the site you can find information on the latest WordPress child theme releases, announcements regarding many popular theme frameworks, along with tutorials and other resources.

Yeah, I know the site is pretty much dominated by Thematic child themes at the moment, but in time maybe we’ll see more variety of child themes spanning across different frameworks.

Don’t worry, I’m not jumping ship from Theme Lab to start posting about new child themes all day. Think of it as a sister blog to complement the content here.

So go on and check out Themelets and let me know what you think in the comments.

Related posts:

1. Should Child Themes Be Listed on WordPress.org?
2. Braintied – Free Thematic Child Theme
3. Announcing the Underground + New Newsletter + Free Theme Bribe

I recently came across a pretty cool plugin called Theme Tweaker, which basically lets you alter the colors of your theme without touching your CSS code. I thought I would go over this plugin in a review post. In this review, you’ll learn:

• How to install the plugin in WordPress 2.7+
• How to identify and change various colors to your liking
• How to update your stylesheet with changes
• How to generate a custom child theme on the fly

And now, onto the review…

How To Install Theme Tweaker

Luckily, this plugin is available in the official WordPress plugin directory. Therefore, it is readily available to be installed automatically through your WP admin panel.

Just search “theme tweaker” and go through the install process. It should be pretty straightforward.

Go ahead and activate the plugin. Now that the plugin is successfully installed, let’s take it for a spin.

Changing Theme Colors

Now it’s time to put this plugin into action. I’ll be using the Lightweight theme for example purposes. This theme is completely imageless, and all colors are handled through CSS, so it will work well with this demonstration.

To change the colors, go to Appearance -> Theme Tweaker. On this page, you’ll be able to change individual colors using a HEX code or color picker. You can also change all the colors at once using a predefined color preset with the buttons on the right.

With the predefined color presets, you can do the following with the click of a button:

• Invert colors
• Black and white
• B&W negative (inversion of above)
• Sepia effect
• Random colors

My favorite of these would probably have to be the random colors preset, since you can completely change the look of your blog theme with the click of a button. Okay, that’s the last time I say “click of a button.”

The above is the result of the random colors preset. That’s pretty ugly, I know…but with enough random color clicks, something semi-good looking would probably come out of it.

Saving Your Changes

After you’ve picked your desired colors, you have a few options after this for saving your changes. By default, the color changes are only visible to you: the administrator. If you want to display them to all your viewers, you can simply select the “Activate the new color scheme” checkbox.

For a more permanent solution, you can either generate a replacement stylesheet or a child theme. Picking either of these options will prompt you to download a style.css file. The result of the “Tweaked Stylesheet” could replace the current stylesheet of your theme, however I’d recommend the child theme generator.

With the style.css file created from the child theme generator, all you need to do is create a new directory on your /wp-content/themes/ folder, upload the stylesheet there, and then activate the new child theme in your admin panel.

Conclusion

All in all, I think this is a great plugin, especially useful to people who aren’t comfortable with manually editing CSS code themselves. The color picker and color presets make it really easy to change the colors of your blog. Although I used it to completely change the entire look, it could also be used for changing minor details, like link colors, etc. The child theme generator feature is also pretty cool.

Anyway, hope you liked the review. If you wanted to change the colors of your blog, would you consider using a plugin like this, or would you rather just edit the stylesheet (or make a child theme) manually? Let me know what you think in the comments.

Oh yeah, and if anyone wants the ugly Lightweight child theme (pictured above) by any chance, download it here.

Related posts:

1. Gallery WordPress Theme Review
2. How to install a WordPress plugin
3. Want More Retweets? Use the TweetMeme WordPress Plugin

If you like one column themes, then you may have seen Compact theme here at Theme Lab. This is a very simple theme, and is great for building child themes off of. I made two quick examples that get rid of the magenta background image and replace it with solid background colors.

Live Demo | Download

Live Demo | Download

Remember, you’ll need the original Compact theme uploaded to your themes directory before these child themes will work. You can use these child themes to alter the solid background color to a light or dark color of your choice.

Related posts:

1. Monochromatic – A Thematic Child Theme
2. Compact – Free WordPress Theme
3. Lighter – A Lightweight Child Theme

This is a first here at Theme Lab, a free WordPress child theme, or themelet. After receiving some very nice feedback over at my personal blog, I have decided to release it here. All this child theme consists of is a directory with a single stylesheet in it. This stylesheet overrides a few lines of CSS in the parent theme to alter the color scheme, as well as change up the header a bit. Everything else is handled by Thematic, so you’ll need this theme uploaded to your WordPress theme directory as well.

Live Demo | Download

Related posts:

1. Braintied – Free Thematic Child Theme
2. Astatic – Free Thematic Child Theme
3. Dissecting Astatic – Thematic Child Theme Tutorial