Question

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>

Answer 1

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:

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.