WordPress nav menu — adding conditional span

2 Views

Does anyone have a working example of a WordPress menu outputted manually? The one on the Codex didn’t seem to work, though my menu_name slug of “Footer” can’t be that complicated..? I need to add offscreen spans within external menu links for accessibility purposes. I already have CSS classes; what I need is specific markup added via the functions.php file.

The basic code I’m looking for (see list items w/ ‘external’ class. Hrefs changed to # for code brevity, they link offsite in real life):

<ul id="menu-footer" class="menu">
    <li class="menu-item">
        <a href="#">About Us</a>
    </li>
    <li class="external menu-item">
        <a title="Link opens in a new window." target="_blank" href="#">Terms &amp; Conditions <span class="offscreen">Opens in a new window</span></a>
    </li>
    <li class="menu-item">
        <a href="#">Comments Policy</a>
    </li>
    <li class="external menu-item">
        <a title="Link opens in a new window." target="_blank" href="#">Privacy Statement<span class="offscreen">Opens in a new window</span></a>
    </li>
    <li class="menu-item">
        <a href="#">Contact Us</a>
    </li>
</ul>
Post Views: 2

Related posts

Leave a Reply

4 comments

  2. Option 1:

    Assuming you’ve created your menu by using Appearance -> Menus , you can try the following.

    1. Navigate to Appearance -> Menus
    2. Click the “Screen Options” (top right) of the screen, make sure “CSS Classes” is selected.

    Once you’ve done the above steps, each of the menu items will now have a “CSS Classses” textbox showing where you can on an individual basis assign CSS Classes (have a look at the screen grab).

    Option 2:

    You could also try http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

    <?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title
             $classes[] = "special-class";
     }
     return $classes;
}
?>

    Option 3:

    Provided the above 2 options don’t work you have the 3rd option of using jQuery.

    HTH

    enter image description here

  3. Answer: the nav menu has to be registered & assigned to the theme for the Codex example to work. DUH!

    in functions.php:

    // default register any navigation menus
register_nav_menus(
    array(
      'footer' => 'Footer Menu',
      'links' => 'Links Menu'
    )
);

    Assign menu(s) to your theme:

    assign a menu to your theme

    Back in functions.php:

    function accessibleAnchors($menu_name, $link_after = NULL){
    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_list = '<ul id="menu-' . $menu_name . '" class="menu">';

        foreach ( (array) $menu_items as $key => $menu_item ) {
            // uncomment next line to see all array values
            // print_r($menu_item);
            $linkText = $menu_item->title;
            $url = $menu_item->url;
            $target = $menu_item->target;
            $titleAttr = $menu_item->attr_title;
            // hard-coding the first & only CSS class here, you could loop through others
            $cssClass = $menu_item->classes[0];

            if($target == '_blank'):
               $titleAttr = " title="$titleAttr"";
               $span = "<span class="offscreen"> Opens in a new window</span>";
            else:
               $span = "";
            endif;

            $menu_list .= '<li class="menu-item '.$cssClass.'"><a href="' . $url . '"'.$titleAttr. '>' . $linkText . $span . $link_after .'</a></li>';
        }
        $menu_list .= '</ul>';
    }
    return $menu_list;
}

    Now call the function in your template:

    <?php echo accessibleAnchors('footer'); ?>

    Boom.

  4. You’ll have to start in wp-includes/nav-menu-template.php to Copy and paste the function to your theme’s functions.php and change the name or use a filter in functions.php to change selected markup of the hook. And possibly take a look in wp-includes/nav-menu.php as well.

    Sorry I can’t provide more detail.