Drupal Theming 101: Theme Developer Module

If you haven't already heard of it, the Theme Developer is a great tool. It works like firebug, but for Drupal. You can click any element on the page to inspect it, and the Theme Developer window will show you what template files and functions were used to render it, and give you suggestions on which files you can edit to affect it. For a newbie Drupal themer, this can be a god-send.

Theme Developer Module

However, you should know that the Theme Developer module works by injecting code into your page. I've run into instances where the module broke some jQuery I wrote because the selector I had written was broken.

Also, you may see some effects in the admin area -- I saw that the "manage fields" page when you edit a content type was missing the neat little drag-and-drop feature.

The Theme Developer module is still valuable during production, but make sure that you disable it before you go live.

Also, if you need to quickly disable or re-enable it, there's a shortcut so you don't have to go to the modules page every time. Just click in the Drupal "start" menu in the admin bar, and choose "Disable (or Enable) developer modules."

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?