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.

By browsing this website, you explicitly and fully agree to the site's Cookies & Privacy Policy More Info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.