Drupal 6: Overriding the themable output for anything part of your theme using the Devel module

The Devel module has a great feature called Theme Developer which makes theming a breeze. When enabled, you’ll see a box in the bottom left of your browser window, themer info. This functionality helps answer the question: how do I change the way this piece of my theme looks? If you enable the themer info checkbox and moveover your theme, you’ll noticed that various html structures will be highlighted in red, very much like the essential Firefox plugin, Firebug.

Let’s say you wanted to redesign the appearance of the search form in your theme. If you click on search form using the themer info, you’ll get a window full of useful information, similar to this:

This window tells you which functions and templates are used to create the html, and which functions and templates you can define to override the themable output. Check out the section called “File used”. It should tell you that the search form uses it’s own template file found here: modules/search/search-theme-form.tpl.php. In this case, we’re in luck. You can simply copy that file into your theme directory and modify it as necessary.

In other situations, a function is used instead of a template tpl.php file. If you use the themer info tool and click on the navigation menu you’ll notice a function was used (theme_menu_tree):

To modify the themable output, you’ll have to create a function in your template.php called YOURTHEME_menu_tree. Before you go any further, read the API documentation for the function your are replacing. For this example, browse to: http://api.drupal.org/api/function/theme_menu_tree. Since Drupal will be passing a predefined set of arguments to our new function, it’s best practice to use the same number and name of arguments that Drupal uses. Check out the sections in the API documentation called definition and code. You’ll see that the theme_menu_tree function accepts one argument ($tree):

<?php
theme_menu_tree($tree);
?>

In your template.php file, define your new function. The first thing you should do it get acquainted with the structure of the arguments and what the function returns (array, object, html, etc). In the code below, I’m using the PHP function print_r to show the structure of the argument. Now, you can modify to your heart’s content.

<?php
function MYTHEME_menu_tree($tree) {
  print "<pre>" . print_r($tree, true) . "</pre>";
}
?>

Now you should be on your way to overriding the themable output of any piece of your site.