How to add Active states and icons in wordpress wp_nav_menu()

Tags: php,html,css,wordpress

Problem :

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

I'm trying to use link_before and link_after to append a span tag to the wp_nav_menu so so that I may add an icon to each navigation.


<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 tackle this?

Secondary question, Adding a css-class to the "current active state" anchor? Just for styling.

Solution :

Perhaps you will need to change this code... but here is example. You can see the Reference to wp_nav_menu and add holder pattern... and later just change it by your local replaments settings (see array before replacements)

function main_nav() { 
    $menu = wp_nav_menu( 
            '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, list items contain number of current classes so you able to use tham to track current item of your menu too.

    CSS Howto..

    How can I stack two arrow images (upvote/downvote) on top of eachother using CSS?

    How do I change the Default Design? [closed]

    How to adjust 100% browser height and width with CSS?

    How to set style for a column in an extjs 4 grid [closed]

    How to apply a drop shadow on a triangle in CSS?

    jQuery: How to animate height change without known heights?

    How to attach an element on the dynamically created div

    How can I trigger jQuery fadeIn() fadeOut() from a

    How to override\edit Zurb Foundation base CSS styles?

    how can I create overlay div to fit the rest of the screen

    CSS: how to make the font icon and text under it closer?

    How to build a special polygon (a kite shape) with HTML & CSS only?

    how to create a table layout with float in css

    Bootstrap CSS - How to get control label with inline radios below it

    How to add a Google icon font to pseudo :before

    How to float menu list elements

    How to align content of a div to the bottom?

    How to change decoration of a local HTML file to show it on the WebView in Android

    How to Stop Down Arrow on Scroll Bar from going off screen on page resize with CSS

    How can you configure Rails to use blueprint-css instead of the default scaffolding css?

    How to hide specific text from content wihtout calling any CSS?

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How to center data table header and data using in bootstrap w/o using CSS?

    Using jquery/JS/CSS how do I append words to a sentence so the sentence is pushed up word by word

    How to show color only to the first li?

    how is the search mail button implemented?

    How to make this CSS layout

    How to have a video take up the viewport height and width?

    How to target entire Bootstrap navbar

    how to make a double hover effect with css