Screenshot of theme developer module

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.

Screenshot of theme developer module

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

Comments

jaimealsilva’s picture

OGG/Theora format link for the screencast is broken!

shadcn’s picture

Still not working....

vicktech’s picture

I’ve been showing off this module privately

Why is that so?

webindustries’s picture

They're allowed to show something off privately. At least they've built it and are now letting us all use it - be grateful.

tofuComputer’s picture

Thank you for this very informative screencast. Although at the time of my post we are now using the alpha of Drupal 7, much of this info is still really useful. :)

tanzethierry’s picture

The link is broken, can someone reupload the screen in this format please?
I'm under linux and no flash plug in actually -_-

SurfMan’s picture

For Flash under Linux go here: http://labs.adobe.com/downloads/flashplayer10.html

OT: This is an awesome plugin!! It clarifies lots of things very quickly. Thanks for the effort!

shiv.godi’s picture

How to have the thermer info feature enabled on Drupal 7?

drupalshrek’s picture

I have just watched the screencast, and it was really well done; very clear, direct, helpful, good level. Perfect! Now I can't wait to install this module and give it a go. It looks just like what I need. Thanks.

drupalshrek

NineAllexis’s picture

On Drupal 7, when this module is activated, no maps are showing.
Even to the most basic, simplest Google Map.
Has anyone got any solution for them to co-exists, perhaps?