How to override a theme function in Drupal 7

When I first started playing around with drupal I was amazed by all the ways that modules could change the behavior, and extend the functionality of my sites. It seemed like no matter what I wanted to do there was always a module (or three) that would allow me to do it. After using Drupal for a while though, I realized that for some things, I didn't always need all the extra functionality that would come with the modules I was using. I realized that for some things, all I needed to do was to change the output of something that was being controlled by the theme layer, and that in order to change that output, all I needed to do was to override the theme function.

In this simple example I will walk you through the steps of how to override a theme function using your theme's template.php file. If you're new to theming in drupal this might sound confusing, but as long as you understand a little php and html, it's really not too hard to do.

First, lets take a look at what a theme function is. On drupal.org, there is a list of all the default theme functions that can be overridden by your theme. It's a good starting point to see if what you want to change can be done through a theme function. Int this example we're going to be overriding the theme_menu_link() function. Our goal is to change to create a menu that links to my social networking sites from text links to icons for each of the social networking sites.

Step 1, Identify the theme funtion that you want to override

Sometimes this can be the hardest part of overriding a theme function. In this case we'll be overriding theme_menu_link().

Step 2, Copy the theme function into your template.php file and rename it

For this example, the name of the function is theme_menu_link() so to override it, all we have to do is replace the word theme with the name of your theme. 

function auat_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Step 3 modify the output

Topics: