Cooking up a Homemade Drupal Theme

November 30, 2009

Drupal themers are like cooks. We use common components (contributed modules) as a starting point for successful websites. Cooks also use common components—tried and true ingredients (salt, pepper, garlic, onions, etc.)—as the base for delicious recipes. The fruits of our labors are robust and flavorful. But somewhere in this busy world, saving time has taken priority. We have decided pre-made is better.

Last week I watched an Aquia webinar on Drupal theming. After a year of using contributed themes like Zen, Clean, and Foundation as cornerstones for each new site launch, I was exposed to the beauty and simplicity of "Homemade Theming"—building a Drupal theme from scratch.

For the Drupal-ers out there, this might sound like a horrible idea. I think the cause for the skepticism comes from the equation of the words homemade and scratch with long, tiresome, and tedious. I felt those same suspicions. Homemade might translate to long, tiresome, and tedious for cooks, but not for themers! In fact, it's just the opposite. When it comes to themes, "homemade" doesn't mean harder.

Advantages of Building a Drupal Theme from Scratch

When building a Drupal theme from scratch, you control every aspect of the HTML and CSS. You control the site's regions, its available variables, and how the entire site is assembled. Content defines design. The most important advantage of a homemade Drupal theme is this: The themer is in control of the theme. When using a contributed theme, you work around the pre-packaged code and the theme controls you.

How to Build a Drupal 6 Theme from Scratch

In the spirit of "cooking up a homemade Drupal theme," here's Digett's 5-ingredient, 5-step recipe for a perfectly delicious, homemade Drupal theme:

Ingredients

  • 1 or more finalized Photoshop comp(s)
  • 1 index.html file full of static code, void of php
  • (At least) 1 .css file corresponding to the index.html file
  • 1 .info file with a specified name, core, and engine
  • 1 Drupal installation

Preparation

  1. Create your theme directory
    For the sake of this tutorial, let's assume the name of your theme is "recipe." In your Drupal installation, create a directory named "recipe" (using all lower-case letters) in the sites/all/themes folder. This is where the files for your theme will reside.


  2. Photoshop comps to HTML/CSS
    The first thing a themer needs to begin making a homemade Drupal theme is a set of finalized design comps. Don't even worry about syncing it with Drupal yet. Build your index file in plain old HTML, just the way you would have circa 1998, but with regards to current standards compliancy and XHTML. :) You'll want to include an external CSS stylesheet in this step as well.

    Once your HTML/CSS is in place, you're golden. This becomes the basis for your theme, not Zen, Genesis, Blueprint, or any of the other popular contributed themes.

  3. Structure the .INFO file
    Inside the same "recipe" directory, create a file called recipe.info. Three keys are required: name, core, and engine. I'm including a very basic example of how this file should be structured:
    name = Recipe Theme Example
    core = 6.x
    engine = phptemplate
    Be sure to call your stylesheet using
    stylesheets[all] = style.css
    Refer to this additional information regarding the structure of the .info file if you have questions.
  1. Migrate and modify the index.html file and your stylesheet(s)
    Move your existing index.html and stylesheet(s) into the "recipe" theme directory. Rename index.html to page.tpl.php.

    Inside every Drupal installation, there's a default page.tpl.php template. It's located in the modules/system directory. I recommend plugging in snippets of code from this file to your theme's new page.tpl.php file. Where there's static content, replace it with php tags from the system's default page.tpl.php template.
  2. Enable your theme
    Now, when you navigate to your Drupal installation theme page (admin/build/themes) you'll see your new, custom theme available for enabling. Enable it and set it as the default theme. Continue on working with regions, blocks, panels, and views as though using a contributed theme.

Why the Homemade Approach Works

If this is your first time building a homemade theme, this may not seem like a time-saver, but believe me, it is. The real time-saver kicks in when you're just swapping out php variables with old, static HTML instead of trying to re-work existing an existing HTML structure to fit your content.

You can also choose to browser test before modifying the index.html file, reducing extraneous time spent testing after site-build.

Helpful Theming Modules

I encourage you to make your own homemade theme from scratch. Why be the frozen dinners of the world when you can be foie gras?!

If you have questions regarding "Homemade Theming" please contact me directly. I'll be happy to discuss this topic further. Good luck! -Kathryn

Comments

I disagree

I disagree. There's so much that you get for free with a good base theme. Did you remember to add $closure, $help and $messages to your custom theme? Do your messages look presentable? Easy to implement preprocessing? etc. etc. etc.

I appreciate the feedback.

I appreciate the feedback. This post wasn't intended to imply that building a Drupal theme from scratch is the better approach to theming. I agree that in many cases a solid base theme provides many immediate advantages over starting fresh. And I would also recommend that those without a great deal of theming experience stick to starting with a contributed theme like Zen or Clean.

What I wanted to convey in this post was that starting from scratch shouldn't be ruled out. So often I've heard discussions around this topic — and it seems developers are continually toying with both options. Until attending the Acquia/Lullabot webinar I wouldn't have recommended the homemade approach, but the session really opened my eyes to the flexibility and efficiency of beginning with pure HTML/CSS. In less than an hour, the presenter had created a theme from scratch. It was incredible to see such rapid work.

It's definitely important to include $closure, $help, $messages, etc. in your homemade theme. I've suggested using the system's default page.tpl.php to pull these variables. You might also be interested in watching the archived Acquia video too. They explain this process in more detail.

And as always, if using a contributed theme works well for you and the thought of starting fresh is unappealing, by all means, stick to what works.

I totally agree. I actually

I totally agree. I actually always start from scratch - sort of. I usually start with Garland, but then I strip out all html, toss the css completely, and even kill a lot of the unnecessary php. I then go into the .info file and add js, css, regions, etc. (I usually like an intro region, which is great for the home page).

Starting from scratch allows my sites to look completely fresh and new. I've gotten comments that my websites don't look "Drupally", and I think starting from nothing is why they look so different.

I hate mucking about in other people's code, especially if it was written by developers. Front end production is usually a very different skill than what most developers are used to. Also, using another theme as a base often throws confusion and wasted time into the mix when I try to get the CSS right. There is often so much cascading styling competing with each other that I'll always have to go in and tweak and retweak until it's right.

More efficient to just start over.

Tevi

a big leap

I appreciate the tutorial, and you've presented it wonderfully, you really have. I'd like to give feedback on how you've really left a lot to be assumed by the person using it. This is rampant across the drupal community (and why more people aren't converting to it). It would be better to assume the audience know nothing, not that they are developers. Patronising some people is better than confusing most people.

I'm referring to the second step 1.
"I recommend plugging in snippets of code from this file to your theme's new page.tpl.php file. Where there's static content, replace it with php tags from the system's default page.tpl.php template."

That's the part most people are struggling with when making their own theme. They have no idea about this... and no one is explaining it to them.

Theming vs. Development

Wow, interesting input. So interesting in fact, I've written a new post as a kind of follow-up to your comment. Take a look.