Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using wp_nav_menu in Wordpress to create my navigation

The output is similar to this(I have removed href links)

    <nav id="pageNav">
        <ul id="menu-headernav" class="menu">
          <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Work</a></li>
        <li><a href="">Contact</a></li>
      </ul>         
    </nav>

I need to style each link separately.

How can I add an id to each (li) or (a) in the menu so I can style it.

share|improve this question
    
Pretty sure there should be IDs unless you, a plugin, or your theme has done something to remove them. –  s_ha_dum Aug 16 '13 at 14:43
    
It's a custom theme I'm doing from scratch. There is no id's and I'm sure I'm not doing anything to remove them. The currently selected li has a class but the rest don't –  Simon Cooper Aug 16 '13 at 14:53
    
I just took a look at several sites I am developing and also tested this in my sandbox. The menus created by wp_nav_menu have IDs. I don't know what is happening in your case but something is peculiar to your site. –  s_ha_dum Aug 16 '13 at 14:58
    
@SimonCooper: Can we have a direct link to your site? –  Mayeenul Islam Aug 16 '13 at 15:22
    
The site is local. s_ha_dum was correct, code in the functions.php (that I'd taken from someone) was removing the id's. So the li have id's now put is it possible to change these id's. –  Simon Cooper Aug 16 '13 at 15:26

1 Answer 1

Sounds like you would need to use a Custom Walker Function

I've found some code on the Wordpress Suport Forums which might be of some use:

Walker Class - Pastebin

class custom_nav_walker extends Walker_Nav_Menu {
        function start_el(&$output, $item, $depth, $args) {
                global $wp_query;
                $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

                $class_names = $value = '';

                $classes = empty( $item->classes ) ? array() : (array) $item->classes;
                $classes[] = 'menu-item-' . $item->ID;

                $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
                $class_names = ' class="' . esc_attr( $class_names ) . '"';

                $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
                $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

                $output .= $indent . '<li' . $id . $value . $class_names .'>';

                $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
                $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
                $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
                $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

                $item_output = $args->before;
                $item_output .= '<a'. $attributes .'>';
                $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                $item_output .= '</a>';
                $item_output .= $args->after;

                $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }

        /**
         * @see Walker::end_el()
         * @since 3.0.0
         *
         * @param string $output Passed by reference. Used to append additional content.
         * @param object $item Page data object. Not used.
         * @param int $depth Depth of page. Not Used.
         */
        function end_el(&$output, $item, $depth) {
                $output .= "</li>\n";
        }
}

Thread Source - WP Support

Output:

<ul>
   <li id="nav-item-1">
      <a href="link-1">
      </a>
   </li>
   <li id="nav-item-2">
      <a href="link-2">
      </a>
      <ul class="sub-menu">
         <li id="sub-item-1">
            <a href="sub-link-1">
            </a>
         <li id="sub-item-2">
            <a href="sub-link-2">
            </a>
      </ul>
   </li>
</ul>
share|improve this answer
    
Oh that looks perfect. I can understand most php but that looks a little advanced for me. Any chance of an explanation of this code. –  Simon Cooper Aug 17 '13 at 12:26
    
Sorted it, I can add span tags to the <a> with 'link_after' => '<span></span>', –  Simon Cooper Aug 17 '13 at 18:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.