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 :)

I’m a Digital Consultant, Web Designer & Developer, specialized in WordPress.
I’ve been making websites for 17 years and have specialized in WordPress since 2009.
I like to work with PHP/MySQL, HTML5/CSS3/Javascript, Twitter Bootstrap and, of course, WordPress.
I help companies, professionals and startups grow with technology, I hand-pick the perfect team for them, plan projects from the ground-up, develop & deploy websites, online stores and apps.