Can I add a separator <li> after the anchor tag In WordPress wp_nav_menu()?

2 comments

1. This is and old question but I stumble upon the same problem and solved it using a custom Walker.

   First the walker adds a separator after each <li> on the top level:

   class Main_Menu_Walker extends Walker_Nav_Menu{
   
       function end_el( &$output, $item, $depth = 0, $args = array() ) {
           $output .= "</li>n";
   
           if ($depth == 0)
               $output .="<li class='separator'>|</li>n";        
       }
   }
   

   Then you can use li:last-child and hide the last separator or use a filter and remove it if you need ie7 support. Here’s my filter:

   function menu_remove_last_separator($items){
   
       $separator = "<li class='separator'>|</li>";
       $pos = strrpos($items, $separator);
   
       if ($pos) 
           $items = substr_replace($items, '', $pos, strlen($separator));
   
       return $items;
   }
   
   add_filter( 'wp_nav_menu_items','menu_remove_last_separator');
   

   Now you must use your walker as and argument for wp_nav_menu:

   wp_nav_menu(array(
           'theme_location' => 'navigation',
           'container'      => false,
           'menu_class'     => 'inline',
           'walker'         => new main_menu_walker()
           )
   );
   

   Log in to Reply

2. Yes, a couple of different ways. Check the codex, but the following $arg’s will help.

   $before
   (string) (optional) Output text before the of the link

       Default: None 
   

   $after
   (string) (optional) Output text after the of the link

       Default: None 
   

   $link_before
   (string) (optional) Output text before the link text

       Default: None 
   

   $link_after
   (string) (optional) Output text after the link text

       Default: None
   

   Try

   $args = array('after'=>'<li>//</li>');
   wp_nav_menu($args);
   

   Log in to Reply