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:
- 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.
- 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.
- 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.
6 Responses to “Designing and Coding a WordPress Theme From Scratch (Part 1)”
June 27, 2008
Movie GoersNow I can make my own theme, thanks =)
September 22, 2008
photoshop free tutorialsExcelent tutorial thanks for sharing
April 4, 2009
Wordpress ThemesGreat write up. Even if most peeps do not fully design there theme that having some general knowledge to go a long way for the webmaster.
July 27, 2009
SabariHi,
Im just a starter…So it helped me a lot really……..Thanks….
regards,
Sabari
August 13, 2009
OrnellaHello, thank you for your helpful tutorials :)
I’ve a question though: at the moment I have wordpress BLOG, so I’have no personal host.
I wanted to buy the CSS upgrade to make a personal theme, but looking around for tutorials, I read that you need FTP and hosting whitch I don’t have….can I have my personal theme anyway? Where can I upluad the images I need for the template??
I’m a little bit new to web design so sorry if the questions sounds stupid ^^
Thankyou, Hope you can help me
Ornella
August 27, 2009
vb6-id.co.cchai…
this is seem to be great tutorial.
Thanks for sharing, i can’t wait to try…