So you’ve decided to use Thematic as your WordPress parent theme and your ready to set up a kick ass child theme.

Here’s how I do it! I’m not going to claim this is the best way, or even the right way to set up a Thematic child theme. I’m not sure there’s a “best way” or “right way” to set up a Thematic child theme, but I’ve built quite a few, and this is the folder structure that I find easiest to use.

The Thematic Child Theme Basics

I’m assuming you’ve already downloaded the Thematic Theme from the WordPress directory and created a child theme.

If you need help setting up a Thematic child theme please visit my previous post on the subject. Setup a WordPress Thematic Child Theme

After setting up your Thematic child theme the folder structure should look something like this.

• MyKickingCoolSite
  • functions.php
  • readme.txt
  • style.css

The Style Sheet style.css

Your edited child theme style.css style sheet looks something like this.

/*    
Theme Name: My Kicking Cool Site Theme URI: http://www.mykickingcoolsite.com 
Description: My kicking cool site that I love to spend lots of time with. 
Author: My Nmae Author URI: http://www.mysite.com 
Template: thematic
Tags: Two Column, Right Sidebar, Right Aside, Custom Header . 
Thematic is © Ian Stewart http://themeshaper.com/ 
My Kicking Cool Site @ My Name http://www.mysite.com . 
*/  
/* Reset browser defaults */ 
@import url('../thematic/library/styles/reset.css');  
/* Apply basic typography styles */ 
@import url('../thematic/library/styles/typography.css');  
/* Apply a basic layout */ 
@import url('../thematic/library/layouts/2c-r-fixed.css');  
/* Apply basic image styles */ 
@import url('../thematic/library/styles/images.css');  
/* Apply default theme styles and colors */ 
@import url('../thematic/library/styles/default.css');  
/* Prepare theme for plugins */ 
@import url('../thematic/library/styles/plugins.css');

As you can see most of the styles are still being imported from the Thematic parent theme.(../thematic/ points back to the Thematic parent theme). This is great if you don’t need to do much editing to get your custom theme up and running. If that’s the case great, start adding your custom style below the last @import url.

If you’d like to learn how I create a completely customized child theme that I can easily pull components from to create other completely unique child themes keep reading.

Major edits to a Thematic child theme.

When I’m making a lot of edits to a child theme I don’t like overriding styles. For one, overriding styles can be a lot more confusing when editing your CSS files and if done wrong, it will add extra HTTP requests and slow your site down. Also you can combine a few of the Thematic style sheets (or all of them) to make your site even faster. Thematic uses @import to include style sheets, I’m not going to go into the pro’s and con’s about @import, but I will say this, “less is more, always when it comes to the speed of a website”.

Much to the opposite of what I like to do with my CSS files, I like to break my functions up rather then including everything in functions.php. If you wanted to, you could put everything in your functions.php file, but by breaking your functions up into separate files you can easily include only the files you need in the projects you’re currently working on. For example If I’ve built custom images and thumbnails into a theme and I also want to include them in another theme, I can easily copy the file over to the new theme and simply import them into my functions.php file. Sure I could find that function in my functions.php file and copy it from there, but it can easily become a problem if I have a few thousand lines of code in my functions.php file.(If you’re lost here, bare with me, I’ll explain in further detail later in the tutorial)

New Child Theme Folder structure.

Personally I like to stick with the same folder structure that Thematic uses. So In your child theme create a folder called “library”.

Your folder structure should now look like this.

• MyKickingCoolSite
  • functions.php
  • library
  • readme.txt
  • style.css

Now, inside the “Library” folder create the following folders:extensions, images, layouts, scripts, styles (extensions if you plan on adding features like thumbnils, shortcodes and extra widget areas )

Your folder structure should now look like this.

• MyKickingCoolSite
  • functions.php
  • library
    • extensions
    • images
    • layouts
    • scripts
    • styles
  • readme.txt
  • style.css

Populate The Library Folders

Next time in part#2 I’ll show you how to populate the Library folders and you’ll learn how to create extensions that you can easily include in all of you child themes.

If you don’t want to wait until next time you can purchase my Portphotio Plus Thematic Child Theme for $4.99. It has the exact folder structure, extentions, shortcodes and more that I’m writing about in these posts.