15 Easy Steps to Build Your New WordPress Theme from a Photoshop PSD

Building a WordPress theme is easy. In fact, you are only 15 simple steps away from building your very own custom theme.

There are a few tools that will help in this process, they are linked in this post… Of course, in the wonderful world of web development, it seems like every week there is a new tool, a new stack, a new software package that can unify your development process and speed up your timelines.

I think that the best tool for the job is the one that fits in the little vesica piscis between the two circles of 1) what you are best at using most effectively, and 2) what is most suited for the job.

Please note that my development is all happening on a 13″ MacBook Air, with an external monitor for that sweet sweet screen real-estate.

  1. Set up three development servers: Local, Staging and Live. (Bluehost for staging and live servers).
  2. Initialize local development server with MAMP (or WAMP for Windows).
  3. Add a blank Roots installation (WordPress Theme) to the themes directory. (More details on Roots 101)
  4. Initialize Git in this folder with Tower ($65, if you love git GUIs), push to BitBucket.
  5. Initialize Grunt (More details on Roots.io). If Grunt is too weird, you can use Codekit ($29).
  6. Use Beanstalk (repository and deployment) or dploy (deployment only) for automated deployment.
  7. Configure fonts needed from PSD on Typekit and on local machine.
  8. Add theme screen shot and meta information to the theme.
  9. Add all needed pages, posts, and custom post types (Types), and add all custom fields (Advanced Custom Fields).
  10. Create the Appearance -> Menus.
  11. Use Adobe Photoshop CC and Slicy to extract images from PSD.
  12. CODE and DEPLOY to STAGING (LESS, PHP, JS, Bootstrap) …  Ben’s guide will help.
  13. TEST. (Theme Unit Test, WP Test)
  14. Keep things backed up. (BackupBuddy, WP Migrate DB Pro)
  15. If done, launch to live and imbibe, else see step 12.

Note: When working with an awesome design team (like Paper Leaf), I would recommend asking for a development document that outlines a few things:

  1. Site map and content.
  2. Fonts used in the design.
  3. Colors used in the design.
  4. Page template list and which pages use the templates.
  5. Custom fields that must be editable on the backend.
  6. Responsiveness expectations (what happens at XXX screen size).
  7. Any expected animations / transitions / movement / hover, focus, active states… with proposed solution (CSS, JS) if possible.
  8. Site title, subtitle, users, backup requirements (and other WP specific set up information).

What am I forgetting?