E.Share

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. Monochromatic – A Thematic Child Theme
2. Compact Child Themes – Black and White
3. Lighter – A Lightweight 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.