Creating a WordPress Theme from a .PSD File – Part 1 (Background)
A lot of people ask me what process I use to design themes for WordPress, and my answer to that question is the same answer I give to people who ask my design process “in general”: I start with a Photoshop mockup and take it into HTML via Dreamweaver. The only difference is that I (quite literally) drop WordPress code in at the last minute, and separate a SINGLE .html file into .php files (header.php, sidebar.php, footer.php, and index.php).
So, to shed some insight into my process (and the process of creating a WordPress theme in general), I’m going to let you in on the creation of a theme for one of my current clients, Pray With Africa:
Pray With Africa is sending out a missions team to different cities in Africa in the next few weeks. They wanted a site that could be easily updated, have a blog element, and could be a place for pictures to be funneled in.
Of course, I chose WordPress (and not just because of my affinity for it). It’s super easy to blog with, has the ability to bring in Flickr galleries, and can be combined with Windows Live Writer to do posts offline while they are in the remote areas. Live Writer can then push the posts out all at once when they have access again.
So I set to work on a design. Here’s what I came up with:
Pretty straightforward, nothing too fancy, and just the right amount of grunge and clean to make it interesting.
So, that’s where I am right now. I’ll be documenting my progress as I turn this wireframe mockup into a WordPress theme. The next part will be the different parts to a theme and where those parts lie in the comp pictured above.
[Note: this project is due tomorrow for the client, so don’t expect it to be documented right away. Client first, then education 🙂 ]