Designing and Coding a Wordpress Theme From Scratch (Part 1)

In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

Tools for the Task

For clarification, here are all the tools I used in the making of this theme:

• A text editor like jEdit for hardcoding
• Photoshop CS3
• Wordpress 2.5
• MAMP
• Color Schemer Studio
• Firefox + Web Developer Extension (for Local Validation)
• NetRenderer (to see how your theme looks across browsers)

You don’t have to use the same tools, those are just the ones I use in my workflow.

Preparation

It’s important to remember these three things as well:

1. Take your time. If this is your first attempt at a wordpress theme, you’ll make a lot of mistakes. Just learn from them, the first time is never the best.
2. Use W3schools.com religiously! Why do people validate code, to maximize the exposure of their work. Learning to validate as you go will improve the quality of the work you produce and eventually make you faster.
3. Ask a lot of questions. If you get stuck please feel free to come back to this column and post questions as comments. Alternatively you can e-mail me at jongos [at] gmail to seek out additional advice but since I like to make information public, if you email me privately your questions may be posted here to help others.