Drupal 6.x Themeing Tips

I’ve done some theme customization for Drupal, and I’ve used drupal as “just a user” for years. Recently, I took on a project to take a designer’s theme and make it work with Drupal. I’m pleased to say that, minus a couple of little quirks, it’s been relatively simple. Here are a couple of tips for those starting out:

  • Use CSS for the main layout. If you must use tables for some small part to get it just right, fine — but the high-level layout should be CSS. There are a million reasons for doing this that have nothing to do with drupal, but in addition, the way drupal manages the pieces that it manages (like menus and blocks created in the admin interface) encourages CSS use.
  • Don’t hard code anything that you don’t have to. Use the ‘base_path()’ and ‘path_to_theme()’ functions in page.tpl.php so that if you decide to base another theme off of this one by making a copy of the theme directory, it’ll ‘just work’, instead of having to go through and change every reference to every ‘img src’ in all of your files.
  • Get to know Drupal. You might be thinking you have a div that’s being hidden or isn’t showing up at all. In reality, it might be that you have a drupal block that your current login has no permissions to use, or a menu item that doesn’t apply to the current login, in which case it won’t show up in the menu listing. Also, you might have drupal’s caching enabled, which it shouldn’t be if you’re building a theme or doing development in general. To turn off caching, go to Admin->Site Configuration->Performance, disable caching, and then click on the ‘clear cache’ button.
  • Also under ‘get to know drupal’: depending on where your images are referenced, you need to use different paths. So, if your images are all in a directory under your theme dir called ‘images’, then images referenced in page.tpl.php need to be relative to the drupal top-level directory (so, ‘/sites/all/themes/<theme>/images/<imgfile>’). But in styles.css, you can use a directory relative to the styles.css file (so, ‘/images/<imgfile>’). I’m not 100% sure what the difference is, but presumably page.tpl.php gets ‘include’d into the main PHPTemplate theme engine code, which is somewhere else under the drupal top-level dir, which is why you need the full path. Correct me or clarify this in the comments if you know for sure.
  • Try to make time to learn about the Advanced Theme Creation Kit and/or Zen, which might make theme creation much simpler and faster. I did mine from scratch, and it’s ok, but if I had the time I’d rather learn to make use of these tools.
  • Pick up Drupal 6 Themes from Packt Publishing. It’s a great resource for learning this stuff, in spite of the absolutely awful code formatting in places, and some minor-but-annoying errors. Get it anyway. The conceptual parts of the text are fantastic, and the errors aren’t insurmountable. You can download a PDF eBook (with copy/paste enabled!) at the Packt website.
  • Use the CSS reference at w3schools.

Some general development practices can’t hurt either. Use some kind of version control for your theme, like SVN, CVS, Mercurial, Bazaar, git, or whatever. This will make it easy to revert to earlier copies of your work if you blow things up, and if you can host the SVN service somewhere that’s not on your development machine, it can also serve as a backup (though you should be backing up your machines anyway).

If you have other tips, leave a comment!

  • http://www.hollyit.net Jamie

    Great tips! One I would add is to use the Devel module, with the Theme Developer module that ships with it activated. This really speeds up finding what is being done and where. On top of that, if you decide to override any theme output then the Devel plugin is great for quickly clearing the cache and rebuilding the theme registry.

  • http://www.mytestbox.com Mircea @ MyTestBox.com

    Do you also hack the core of Drupal? Do you build custom modules for it?

  • m0j0

    Yes, I have built custom modules for drupal 6. Nothing overly complex though. I haven’t had to, really, because I can usually get by with a pre-existing module, generally without modifying it, though I’ve customized existing modules as well. This is really what I *like* to do. I hate doing design work. Really, I don’t mind CSS and HTML – what I really hate is browser testing. I’m much happier when I can just deal with grabbing and munging data, and passing results to some presentation layer function or method. Unfortunately, you’d be shocked at the lack of people looking for a strictly back-end developer. I think most of the hiring folks think that PHP is the presentation layer, so you automatically need to have AJAX, CSS, and HTML capabilities as well, and I don’t want jobs that require me to make things pretty – I just want to make them functional.

  • http://www.mytestbox.com Mircea @ MyTestBox.com

    I was asking because I have a friend who works now with Drupal (he is not technical) and he might want to get some back-end customization to fullfil what he wants.
    I might put you both in contact next year…