WordPress Tricks #2

The problem

This is more of a workaround, than an actual trick: when using the new custom menus in WordPress 3 < ?php wp_nav_menu(&args); ?>, how to add a separator after each menu item, without it being shown also after the last item.

In other words: Link 1 | Link 2 | Link 3 | no one wants that last separator at the end of the menu, but WordPress hasn’t sorted that out yet.

The fix

First of all add this to your functions.php:

What this function will do, is to simply add 2 new classes, one for the first menu item menu-item-first and one for the last item menu-item-last.

Then just go ahead and add the wp menu function, adding the argument after and the type of separatore you want (in this case | ), surrounded by a simple span:

Finally, to get rid of the last separator, add this rule to your style.css:

Problem fixed :)

Jany Martelli

I’m a Digital Consultant, Front-End Developer, specialized in WordPress.
I help companies, professionals and startups grow with technology and a winning digital strategy, I hand-pick and coordinate the perfect team for them, plan projects from the ground-up, develop & deploy websites, online stores and apps.