Theme developer module for Drupal 6 - Screencast

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

The module is called Theme developer. Theme Developer relies on the Devel module as a dependency. Once enabled, you may 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.

Watch the screencast

If the above video format does not work for you, it is also available in OGG/Theora format (thanks to Liam McDermott) or a smaller version in Flash.

Implementation notes

  • The basic idea of the module is that it uses hook_theme_registry_alter() 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.

Backport to Drupal 5

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

Help

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

Credits

Original Article: