Build A Theme With Thematic

Katemag AvatarThis is a guest post by community member Katemag Check out her work on as well as her personal blog Nineteenlabs

Thematic is a free, open-source, highly extensible, search-engine optimize WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples and styling for popular plugins.

Thematic is an easy to modify theme or a good way to create a new look for a theme, because there is no need to develop a theme from the ground up and it’s very easy to upgrade. Why?
You only need to add a child theme with your own CSS, when it is upgraded you only need to tweak it.

Install Thematic
It’s very easy, just download it from Theme Shaper (Ian Stewart’s site-the creator of Thematic), unzip it and then upload the thematic folder to the WordPress themes folder, wp-content/themes.

You don’t need to activate Thematic, because we are going to create a child theme. But if you’re curious about Thematic itself, you can activate it with an old-school way. Go to Appearance screen, activate the thematic theme.

A Child Theme
This is the fun stuff. Thematic includes a folder named thematic-sample-child-theme. Move the folder outside of the thematic folder, put it on the same level with the thematic folder in wp-content/themes. WordPress child themes are located in /wp-content/themes/ like any other WordPress Theme, then name thematic-sample-child-theme to whatever you want it to be.


Let see how the child theme is structured. There are two essential files for Thematic, just open thematic-sample-child-theme, functions.php where you place functions code to modify how thematic interprets data from WordPress. For example, remove thematic built-in title.


Another is style.css where you put css code to change how thematic looks. You can add images folder for any images on your site like header or logo.

Working with Thematic
I would suggest a few tools for creating a Thematic child theme. Those are Mozilla Firefox with Firebug installed and Text Editor like TextMate (for Mac Users) or Notepad++ (for Windows Users). What I really like from thematic is that there are so many built in features on Thematic, you only need to add features you want to add, that’s why we use Firefox and Text Editor. Theming WordPress has never been this easy, right?

Now, edit style.css – use your text editor, add the theme details


If you see style.css, there’s 1 particular line:
Template: thematic

It means that we use thematic as a theme base
Now, we look at our child theme. Activate your child theme, see that your child theme is exactly like Thematic.


It’s time to change the look of child theme to whatever we want. Open Firefox, then firebug.


We use firebug to track css so we can override thematic default css from the child theme’s style.css to fit your requirements.

Advanced Thematic
Now that know a little bit about thematic, here’s some further reading to improve your child theme.

A Guide To Thematic
Thematic Structures

There are 10 comments

Comments are closed.