10 design tips for your custom wordpress theme built with thematic

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.

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

20 thoughts on “10 design tips for your custom wordpress theme built with thematic

  1. Pingback: Thematic Tips | Pat Dryburgh

  2. Good job Cristi. Looking forward to see your next wordpress design. Can I sugest a subject for your future blog? The first thing that pops on my mind is fishing :)…wonder why.

  3. Pingback: Before I go on vacation, more Thematic madness!

  4. I decided that I should bite the bullet and create a theme from scratch. Luckily, I went with thematic too. I followed a tutorial to set up as a child theme and have integrated a couple plugins that have made the site exceed my hopes. Thematic is very customizable and easy to set up.

    I recommend doing this for any level of experience.

  5. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  6. Pingback: Thematic tips!

  7. Pingback: 10 design tips for your custom wordpress theme built with thematic | WordPress News

  8. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework ‹ Wordpress Expert – Just another WordPress Expert

  9. Thanks for the post – I’ve been thinking/researching thematic and child themes and from the posts on your site it looks that with a bit of trial and error I might just be able to do it… the post gives me good encouragement. Robin

  10. By using those functions, you make your work translatable in any language, which is a very great thing for people that blog in another language than English. Don’t forget to read my guide about making multilingual WordPress themes if you want to know more about the topic.

    Prefix your php functions
    It may looks like a detail at first, but prefixing your php functions is always a good practice. Why? Because most people would name their functions using common names such as display_stuff(). And if a theme developer named one of his functions with the same name that a function from a plugin the end user is using… Boom, the site is broken, and the user is not happy.

  11. 10 tips for creating high quality WordPress themes
    Published on May 16th, 2011 by Jean-Baptiste Jung. 18 Comments –

    Every week, hundreds new WordPress themes are released. Unfortunely, some of them lacks quality: Bad or bloated code, non respect of programming standards, and so on. I’ve compiled a list of 10 tips every WordPress theme developer should know and apply in order to create top-notch quality themes.

    Respect HTML and CSS standards
    This statement may sound pretty obvious, but actually many publicly available themes don’t pass W3C HTML or CSS validation. When building a theme, it is important to respect HTML and CSS standards so your code will be clean and (mostly) cross-browser compatible. A valid HTML/CSS theme is also a proof of quality development.

    HTML, XHTML and HTML5 code can be checked on theW3C website. The W3C also have a free tool to check your CSS coding, althought with the rise of CSS3 and its vendor prefixes, it is pretty hard to obtain a 100% valid stylesheet.

    Respect WordPress coding standards
    Like most other open-source projects, WordPress have its own list of coding standards. This meticulous coding style convention is here to keep harmony among the thousands of themes and plugins availables and maintain a consistent style so the code can become clean and easy to read at a glance.

    For example, the coding convention forbids to use PHP shorthand tag:

    Instead, use full PHP tags:

    The complete coding standard guide can be read on WordPress codex. On a personnal note, I really think that WordPress should recommend coding CSS in “blocks” instead of “lines”.

    Don’t forget wp_head()
    Within the and tags of most WordPress themes, you’ll find a function named wp_head(). This function may look useless to newcommers, but it is extremely important: Many plugins use this function to “hook” code in WordPress header. Without this function within your and tags, lots of plugins will not be able to work.

    A similar function named wp_footer(); can be found in the footer.php file of most themes. Don’t forget it as well, it is used by plugins to hook code in your theme footer. For example, analytics.

    Be careful when including hacks
    Do you know my blog WPRecipes? In case you don’t, it is a place where I share WordPress hacks and code snippets. The site is quite popular among the community and I’m happy that many people seems to enjoy my hacks.

    But last year, Gravity Forms developer Carl Hancock let me know that one of my hacks (Named Disable WordPress automatic formatting on posts using a shortcode) was intensively used on themes sold at Themeforest, and caused conflicts with Gravity Forms.

    Of course, I felt sorry for the countless hours Carl and his team wasted in support due to the conflict between their plugin, and my hack. This is why hacks may be used on your own theme, or on a client theme, but you should not include hacks in a theme you’re going to distribute, excepted if you know exactly what you’re doing.

  12. Hey. I am trying to figure out the cost of developing a turnkey premium wordpress theme that i can use for our own purposes and to sell on one of the sites you had mentioned. Obviously this depends on the complexity and specs but could you provide me with a range (design to programming)? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *


− 7 = two

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>