Understanding the Drupal Way - Themeable Output

Submitted by Marc on Thu, 12/10/2015 - 11:02am

The whole point of creating a custom theme is to get a website to look the way you want it to. So, it's important for the output that modules generate to be themeable.

I will give a simple example of modifying the markup that is used to display some links. The Flag module provides a mechanism to do things such as "liking" a post or reporting a post as spam. A post may have a link for each flag that is associated with it.

The default Bartik theme displays all the flags on the same row. I have created a custom subtheme that displays the flags on separate rows with a colored background. I accomplished this by overriding the flag.tpl.php file inside of my custom theme. I copied the file from the Flag module's directory to my custom theme's directory. Then, I simply added a wrapping div element with a particular class to the original markup. Since a div is a block element, each flag appears on a separate line. Since I have attached a special class to the div element I can use CSS to target that element and place a background on it.

If you don't understand HTML, block elements and CSS the only thing for you to recognize is that I'm displaying flags differently in my custom theme than I am in the default theme and I'm doing it by overriding how the markup is specified.

As a side note, and further illustration of hooks, the Flag module uses hook_theme to tell Drupal to use the flag.tpl.php file to generate the markup for a flag. But, Drupal knows to look at the theme to see if it has overridden the file. Themers typically prefer that output is themed via the use of these types of files. However, it's also possible to use a function to theme the output. It's not important to look at a specific example, though, because the concept of overriding the function is analagous to overriding the template file.

If you would like to learn more about Drupal you can take my "Drupal for Beginners" class for just $5.