This work is licensed under a Creative Commons Attribution-ShareAlike 2.0

I’ve been showing off this module privately for a while, but it is now time to broadcast the news. Drupal themeing has taken a major leap forward. Let me be the first to welcome a thousand terrific new designs and designers to our project.

The new module is called Theme developer and it can be downloaded as part of the devel project. We have built Firebug for Drupal Theming. You may now click on any part of the page and a sexy popup display shows which theme function/template outputted the HTML, and what other files could have done so. Armed with this info, a themer may quickly and accurately override the presentation. Further, all the variables passed into the template/function are presented for review.

Feast your eyes on the screencast below of Theme Developer module.

• The basic idea of the module is that it uses hookschemaalter() to make itself receive all theme calls. Thus, it logs all the variables that are received and the templates that could have been called, and were eventually called, and so forth. It finally delegates to the original theme function for generating the HTML. Finally, it takes the generated HTML and wraps it in span tags in order to identify what HTML belongs to what theme call. Those span tags get classes attached for the red border that follows the cursor.
• The popup window gets all its data from a huge javascript array in Drupal.settings. This array stores data about each call.
• In order to receive the same drill down behavior as in the screencast for the variables listing, you should install krumo. See the README file.

I have not attempted a backport, since it would certainly require significant a patch to the core theme API. Others are welcome to try.

If you’d like to help with this module, or ask questions, please use the issue queue for devel project - http://drupal.org/project/devel

• Moshe Weitzman - development
• Jeff Robbins - sexy user interface
• dvessel - additional development