How to style menu local tasks

Question

Problem

I'm trying to theme the menu local tasks that Drupal places without any unique css classes. How would I do this?

(Specifically I'm looking to hide certain links on certain pages by giving each one a unique css class).

Links Sample HTML

Which is generated by this line in page.tpl.php.

<?php if ($primary_local_tasks): ?><ul class='links'><?php print render($primary_local_tasks) ?></ul><?php endif; ?>

So Far

To do that I'm trying to use theme_menu_local_tasks however I can't get it to work. I've put this snippet in my template file but it doesn't print anything or show me any variables.

function tefltheme_menu_local_tasks (&$variables) {
  dpm($variables);
  print("hello");
  return theme_menu_local_tasks($variables);
}

I'm using Tao sub-theme which means it splits menu local tasks into primary and secondary.

function tao_preprocess_page(&$vars) {
  // Split primary and secondary local tasks
  $vars['primary_local_tasks'] = menu_primary_local_tasks();
  $vars['secondary_local_tasks'] = menu_secondary_local_tasks();

Could this be affecting anything?

Answer 1

theme_menu_local_tasks() will never be invoked using those two methods, so it makes sense that your dpm() fails.

Both functions do eventually invoke hook_menu_local_tasks_alter(), though, and that's where you can make your changes:

function MYTHEME_menu_local_tasks_alter(&$data, $router_item, $root_path) {
  if ($some_condition) {
    // Grab the first tab.
    $first_tab = &$data['tabs'][0]['output'][0];

    // Add a class to the link element.
    $first_tab['#link']['localized_options']['attributes']['class'][] = 'some-class';
  }
}

If you want to add a class to the <li> element you'll need to go a step further, and override theme_menu_local_task().

The class attribute is hard-coded at the moment so that'll will need to be changed, based on a contextual variable you can pass into the theme function from the local tasks hook above.

That would look something like this in the alter hook

$first_tab['#extra_class'] = 'some-class';

And along these lines for the theme function

function MYTHEME_menu_local_task($vars) {
  // Copy the code from theme_menu_local_task() but change the HTML output
  // to include an extra class if $vars['extra_class'] is set
}

You might also need to implement hook_theme_registry_alter() to let it know about the new variable (can't remember if it matters but it can't hurt)

function MYTHEME_theme_registry_alter(&$theme_registry) {
  $theme_registry['menu_local_task']['variables']['extra_class'] = NULL;
}

Answer 2

Here's the final code that went into my template file:

function MYTHEME_menu_local_tasks_alter(&$data, $router_item, $root_path) {

  //check the path of the page
  if ($root_path == 'user/register') {
        //add classes to the tabs. I left out tab 0 which is the active tab
        //and styled differently. It comes with active as a class.
        $tab1 = &$data['tabs'][0]['output'][1];
        $tab1['#link']['localized_options']['attributes']['class'][] = 'tab1';
        $tab2 = &$data['tabs'][0]['output'][2];
        $tab2['#link']['localized_options']['attributes']['class'][] = 'tab2';
  }
}