Steps to Building a Drupal Theme

Continuing on from yesterday's post on Base Themes for Drupal, let's jump into the process of how I build a theme.

1. Communicate with your whole team.

If you're a team of one this is easier, but chances are you have at least a graphic designer, site builder/developer and a client on your team. It's really important to know what's most important to each of these stakeholders. Make sure you know their priorities for the finished theme.

2. Plan your data structure.

Get your data model right and theming is easy. But if you don't get it right you'll tear your hair trying to break content into smaller components so it can be shuffled into the right place.

3. Use wire frames to prove what you're saying about how the site ought to be built.

I used to think that wire frames were just an extra step that you could bill the client for. That's because I was able to see the site in my head. Now I use wire frames as proof that my ideas are right. If I can wire frame the output, and know how Drupal will create the output, I know it's time to move on to the next. As a bonus: I can use the wire frames as mini checklists when I do work on the site to ensure I haven't missed anything.

4. Build the site (ignore the theme).

This is where you find out if your data model really is right. You can start putting in real content wherever possible. And you can encourage the client to input the content for you so they start to familiarize themselves with the administrative interface. You may find unexpected problems--now is the right time to find these problems. It's still early enough that you can make changes without feeling you've wasted too much time.

5. Convert your wire frame to its grid layout.

Add notes to your wire frames saying how many grid columns each of those shapes represents. I find it easier to scribble on the wire frames than the finished PSD files as they're already more "loose" and "sketchy" than the polished design files.

6. Create a minimum viable theme.

Using the PSD and the wire frames as a reference, build out the HTML fragments in the relevant tpl.php files. Substitute CSS effects for PSD effects where possible. (More about this next time.)

7. Apply your theme to the site.

Yup, upload your unfinished theme to a development or staging server and see how it looks.

8. Refine as necessary based on the UX.

Using your wire frames as a reference, fix the theme. Then walk through the site as if you were a visitor and fix the "unexpected" pages (and navigation if necessary).

And there you have it: the steps I use to create a theme. As you can see I do a lot of planning and then get the theme onto the site as fast as I can.

If you'd like to see me walk through each of these steps for a real theme, check out my Acquia webinar PSD to Drupal Theme. You can watch it here. You can also read an article that I wrote about converting your PSD to Drupal theme for Drupal Watchdog. And if you want step-by-step instructions on how to convert a PSD file into a theme, check out my SBE Guides.