Question

I recently wrote a theme function to add a class to my primary links that works great. I then wrote some css classes to style these links with custom background images. Worked out great. Now comes the problem, the link text for the primary links still is displayed. Normally this isn’t a problem as I would just wrap the in a with a custom “hide” class. For example:

<span class="hide"><a href="#">Link Text</a></span>

So my question is how can I loop through the primary links and wrap the text w/ a <span> like my example? Here’s my theme function that I used to add my classes.

function zkc_preprocess_page(&$vars, $hook) {

// Make a shortcut for the primary links variables
  $primary_links = $vars['primary_links'];
// Loop thru the menu, adding a new class for CSS selectors
    $i = 1;

    foreach ($primary_links as $link => $attributes){
        // Append the new class to existing classes for each menu item
        $class = $attributes['attributes']['class'] . " item-$i";
        // Add revised classes back to the primary links temp variable
        $primary_links[$link]['$attributes']['class'] = $class;
        $i++;
        } // end the foreach loop

// reset the variable to contain the new markup
$vars['primary_links'] = $primary_links;

}

Answer 1

Is jQuery an option?

Try something like this:

$(document).ready(function(){
  $('#primary li a')
  .wrapInner('<span class="hide">' + '</span>');
});

EDIT:

Or if you want to go Drupal, put this guy in your foreach loop:

$link['title'] = '<span class="hide">' . check_plain($link['title']) . '</span>';