How to add active states and icons to wordpress wp_nav_menu ()

Question

function main_nav() { wp_nav_menu( array( 'menu' => 'main_nav', 'theme_location' => 'main_nav', 'container_class' => 'menu clearfix', 'link_before' => '<span>', 'link_after' => '</span>', 'fallback_cb' => 'bones_main_nav_fallback' ) ); } 

I am trying to use link_before and link_after to add a span tag to wp_nav_menu so that I can add an icon for each navigation.

Example:

 <li><span><img src="home.gif" /></span><a href="home.php"> Home</a></li> 

I am super super new to php and wordpress. Any ideas on how to handle this?

Secondary question, adding the css class to the anchor of the "current active state"? Just for styling.

Answer 1

You may need to change this code ... but here is an example. You can see the Link to wp_nav_menu and add a hold pattern ... and later just change it using local replaces settings (see Array before replacement)

 function main_nav() { $menu = wp_nav_menu( array( 'menu' => 'main_nav', 'theme_location' => 'main_nav', 'container_class' => 'menu clearfix', 'link_before' => '<span></span>', 'echo' => $false, 'fallback_cb' => 'bones_main_nav_fallback' ) ); $patterns = array( '<span></span><a href="home.php"', ); $replacements = array( '<span><img src="home.gif" /></span><a href="home"' ); echo str_repalce($patterns, $replacements, $menu); } 

and btw, the list items contain the number of current classes, so you can use tham to track the current item in your menu.