Using WordPress wp_nav_menu function you can display navigation menus on your site nicely.  You can even add the separators between each navigation menu.  It can be done by passing these arguments either “link_before, link_after” or “before, after” to your wp_nav_menu funtion.  However, you might face the problem with adding separators between each navigation menu.

Let’s say you would like to add “|” between navigation menu links but do not want to show it after the last menu.

Home | About Us | FAQs | Blog | <– you do not want this

So far wp_nav_menu function does not add any additional classes to the first and last of the navigation menus.  But don’t  worry to much about that because there is a trick to fix it.  Just copy and paste below code to your functions.php

Put this into your functions.php


function nav_menu_first_last( $items ) {
$position = strrpos($items, 'class="menu-item', -1);
$items=substr_replace($items, 'menu-item-last ', $position+7, 0);
$position = strpos($items, 'class="menu-item');
$items=substr_replace($items, 'menu-item-first ', $position+7, 0);
return $items;
add_filter( 'wp_nav_menu_items', 'nav_menu_first_last' );


Put this into your style.css

.menu-item-last {
display: none;

That’s it!

26 thoughts on “[WordPress] WordPress wp_nav_menu Seperator And First Last Classes

  1. Pingback: Wordpress nav menu separator |

  2. why not simply:
    ‘main-menu’, ‘before’=>’|')); ?>
    in css:
    .main-menu li:first-child .sep{
    display: none;

    it works perfectly for me.

  3. Pingback: Wordpress Tricks: Giving first and last classes to wp_nav_menu items | Blah, blah, blahg

Leave a reply


<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>