How to add a span tag to a certain custom menu link in Drupal 7?

Question

I'm trying to figure out how to add a span tag to a certain menu link in a custom menu. I only need it on one link within the custom menu links. Guessing a preprocess function and tried theme_menu_item_link() with no luck, didn't appear it was getting called at all.

Answer 1

Find the solution below.

Note that if you're using Superfish module, theme_menu_link() won't work in this case, so use theme_superfish_menu_item_link instead.

Drupal 7

/*
 * Implements theme_menu_link().
 */
 function THEME_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  $element['#localized_options']['html'] = TRUE;
  $linktext = '<span class="tab-inner">' . $element['#title'] . '</span>';

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

Drupal 7 (with Superfish)

/*
 * Implements theme_superfish_menu_item_link().
 *  Theme a superfish menu item link,
 *  to override menu item to insert span tags
 */
function THEME_superfish_menu_item_link(array $variables) {
  $menu_item = $variables['menu_item'];
  $link_options = $variables['link_options'] + array('html' => TRUE);
  $linktext = '<span class="tab-inner">' . $menu_item['link']['title'] . '</span>';
  return l($linktext, $menu_item['link']['link_path'], $link_options);
}

After defining above hooks, clear your caches to rebuild theme registry.

If above won't work, as suggested by @weaveoftheride, make sure to enable Use a theme function for hyperlinks and Use a theme function for menu items in the settings. Normally these should be enabled by default.

Drupal 6 (just for reference)

/*
 * Implements theme_menu_item_link().
 */
function THEME_menu_item_link($link) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }
  $link['localized_options'] += array('html'=>true);
  return l('<span>'.$link['title'].'</span>', $link['href'], $link['localized_options']);
}

---

^{Note: Don't forget to replace THEME with your machine name of your theme in all above code.}

Answer 2

Found the answer! Needed to use theme_menu_link():

function theme_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";
}

http://api.drupal.org/api/drupal/includes%21menu.inc/function/theme_menu_link/7

There I can find the item I'm looking for and adjust it accordingly.