WordPress 3.0 Custom Menus & Sliding Door CSS Technique

Recently, while developing a new website for a client, I was trying to figure out how to get the CSS Sliding Doors effect to work with the new custom menu system that WordPress 3.0 blessed us with!  There are many tutorials out there on how to use the CSS Sliding Doors effect and even a few on how to modify it to work with WordPress, but I couldn’t find anything out there to get it to work with the new wp_nav_menu function.  So here’s how I did it!

Having a look at the WP Codex you’ll find all kinds of great info but the most important thing to note is you can add text BEFORE & AFTER the link’s text.  By adding our <span> tag here, we can get the sliding doors to work.

<?php wp_nav_menu( array( ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’, ) ); ?>