Adding unique styles to primary and secondary links

Nick Lewis covered how to assign unique CSS Ids for menus in the navigation block in a recent article.

In this article, I describe how to do the same for the primary and secondary links.

With some modifications, this technique can also be used to manipulate the  primary and secondary links in other ways.

First, in the template.php of your theme, add this function. If there is no template.php file, then create one.

function phptemplate_menu_links($links) {
  return _phptemplate_callback('menu_links', array(
    'links' => $links,
  ));
}

Then, create a file called menu_links.tpl.php in your theme directory.

<?php
  if (!count($links)) {
    return '';
  }
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];

  $output = "<ul class=\"links-$level\">\n";

  foreach ($links as $index => $link) {
    $css_id = str_replace(' ', '_', strip_tags($link));

    $output .= '<li';

    if (stristr($index, 'active')) {
      $output .= ' class="active"';
    }

    $output .= ' id="' . $css_id . '">'. $link ."</li>\n";
  }

  $output .= '</ul>';

  print $output;

Finally, in the page.tpl.php file, you add this where you want the primary or secondary links to appear:

    <?php if (isset($primary_links)) : ?>
     <div id="nav-primary">
      <?php print theme('menu_links', $primary_links) ?>
     </div>
    <?php endif; ?> 

And

    <?php if (isset($secondary_links)) : ?>
     <div id="nav-secondary">
      <?php print theme('menu_links', $secondary_links) ?>
     </div>
    <?php endif; ?> 

Now each of the items will have a unique id and you add the ids in the style.css file.