10 design tips for your custom wordpress theme built with thematic

Photo by *nomi* & malcolm

I’m quite happy with the way my custom weblog theme design turned out. There is still room for improvement but for now things will stay like this. I didn’t make huge changes from the base Thematic Theme, but it dose look different and somewhat close to my personality, and this was basically my goal for this project.

It was quite a nice and easy road from installing the Thematic Theme to customizing my own. So I’ve put together a list with the things I’ve learned during development and share them with you:

1. It’s easier then you might think. I’ve delayed launching my own blog for quite some time now. The main reason was the fact that I really wanted a custom theme and was just terrified about the prospect, considering that the previous theme I’ve implemented really stressed me out big time. Trying to get pull my self from this endless circle (need custom theme -> really hard -> don’t do it) I’ve decided to go ahead and just install any old theme and go from there regardless on how the blog would look. And I did just that. Luckily for me as I was searching the net for worpress themes and Thematic popped out of no ware ( what I mean to say is that I forgot where I found it firs :D… I think it was on SmashingMagazine but just can’t find the link). Now that I found Thematic so easy to use I’m actually considering to implement another custom blog design using it in the next month or so.

2. Use child themes. This is how things really take off! Child themes in my opinion are the future. A Child Theme inherits all the template files of the Parent Theme — except for style.css and functions.php, which take precedence over the original. From what I’ve head from Wordpress version 2.7 it will be possible to overwrite all the template files with your own, making the update of your blog and customization so much easier. (For more informations about child themes visit here and here)

3. You don’t need to write any XHTML. Because I used a child theme, I didn’t have to create my own XHTML based on the layout design of my blog. Thematic was built with this in mind. Don’t need to write XHTML, CSS will suffice. This shortens the development of a blog theme by a couple of hours… Not bad at all.

However, if you need custom HTML in your theme, Thematic makes it easy for you with clear declarations.

4. Overwrite only the CSS you want to modify. A lot of the CSS styling of the Thematic theme is quite good. It was initially built using the 960 grid system, Blueprint and Tripoli . To get your design where you want it to be, open the source code of your blog (”CTRL+u” in Firefox for Windows) and see what id’s and classes need styling to fit your needs.

5. Inheritance. Please be careful. Because you will be overwriting a lot of css from the original theme, chances are you will mis something. Watch out for inherited css from the original theme. Also certain widths for div’s are at 100%, and you might have to overwrite that with a fixed pixels width.

6. If you are stuck there is help online. The forums over at themeshaper.com can save you a lot of frustration.

7. Ready for Subscribe to Comments, WP-PageNavi and Comment License. This means you get out of the box CSS for those plugins. Another interesting thing about this is that if you go over to the forums you can post a bug report if a particular plugin doesn’t work with thematic. Chances are in the next version of thematic (or in the truck version) that particular plugin will have it’s functionality fixed. This is the great thing about communities, everyone shares shares a little bit but gains all the little bits of the rest of the people involved in the project. I know I’ve gained a lot.

8. More power for the user: Custom WordPress Hooks and Filters. “Almost anything you can think of can now be loaded into the theme, just below the header and just above the footer, by taking advantage of your Child Theme functions.php.” I didn’t use this in my theme but it is a great addition for the power user. For more information check this post over to themeshaper.com.

9. Add a home button on your menu. You just have to add a home button or a link on your logo. Otherwise your readers will be utterly frustrated because the only way to get back to your homepage is the back button (useless if you go from post to post) or editing the url (really not accessibility heaven if you ask me) . To do this I needed to write my only html and php code. By this I mean 10 lines of code + html inside the “functions.php” file. I found how to do this in this post.

10. There is a lot of info online. For a wordpress theme there is really a lot of information about it online. Ian Stewart’s is the creator of the Thematic and blog’s about it a lot. There is an entire community around it, and you can always ask around.

This is a next step towards easier to use and better implemented blogs. Having fun with thematic is not over for me. I’ve already planed to create another custom blog design on thematic, and even try and implement a static web-site and use wordpress and thematic as a CMS.

The only thing I didn’t find about thematic is it’s license. On it’s website says: “Only now, it’s a completely free and open source project, ready to help you take control of your WordPress blog.” This means it’s free as in beer. What Ian Stewart meant by “Only now” I don’t know, but I know for now it’s free and cooler then beer.