Taking a Photoshop website mockup and converting it into a WordPress theme can be a daunting task, but in the following series I demonstrate how, with the help of some essential tools, it’s easier than you think.

This guide assumes you have basic knowledge of Photoshop, know how to work with MAMP and phpMyAdmin and have an active website hosting account.

In the guide, I work with Sublime Text 2 in conjunction with CodeKit on Mac OS X. I use Sass to code my CSS and give a brief overview of its usage. Along with each video, I provide the working files needed to follow along, you can find links below the video.

Working Files:

Part 1: Photoshop PSD of the Homepage

Part 2: Photoshop PSD of the sample page (listing)

Part 3: Static HTML/CSS Files

Part 4: Basic Theme, Only Includes Index.php Template

Part 5: Database Search and Replace PHP Tool

Part 6: Disqus Plugin & WordPress SEO by Yoast Plugin