Build A Theme With Thematic

Katemag AvatarThis is a guest post by community member Katemag Check out her work on Pixert.com 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.

themeroot

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.

functionsphp

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

stylecss

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.

themeroot1

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

thematicfirebug

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

10

10 responses to “Build A Theme With Thematic”

  1. I am new to theme customization and I just started editing the CSS files and not creating a child theme. I renamed the theme in the style.css file and uploaded everything and it did not work. Basically it looked the same as the normal thematic with only a slight change to the nav bar. Any help? thanks!

  2. ok dumb question… but i always feel like with wordpress and themes and templates the tutorials just assume you know what they are talking about, when in reality im clueless…

    ok the question: I downloaded thematic, activated it on wordpress… i dont see a folder named “thematic-sample-child-theme”. Where do I find this?? Is it in the .zip? or do I download this separate?

    then a follow up: once I do find it I dont understand what this means “Move the folder outside of the thematic folder, put it on the same level with the thematic folder in wp-content/themes.” I have no clue what folder you are referring to and what you mean by “level”.

  3. @sarah

    When you unzip the thematic theme you will see a folder called “thematic” this folder is them placed into the themes folder within the wordpress folder structure: [your wordpress folder]/wp-content/themes/.

    Within the ‘thematic’ folder is a folder called ‘thematicsamplechildtheme’, move/copy this folder up one level within the folder structure (ie into [your wordpress folder]/wp-content/themes/), so both ‘thematic’ and ‘thematicsamplechildtheme’ are in the same folder sat alongside all the other themes.

    Now when you login to WP as an Admin and click on the Themes section you will see two new themes added. You can them change the css by editing the style.css within the ‘thematicsamplechildtheme’.

    You will always edit your child themes and leave ‘thematic’ untouched. This way when ever ‘thematic’ is updated your child themes will automatically be updated without overwriting any changes you have made.

  4. @tony

    thanks for the help. i realize there is a step that i am missing….

    i bought bluehost and transfered my domain over from godaddy…

    then i installed wordpress through bluehost and I added thematic through the WP admin panel…

    i think i needed to somehow put another step in there so I have access to the folders because as it stands now, i dont know how to get into the folders to create copy of the childtheme folder and start editing it.

    can you help advise on this?? :)

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading