Wordpress menu links with images & class selection

Question

    <ul>
        <li class="selected">Link 1<img src="images/slash.png" /></li>
        <li>Link 2<img src="images/slash.png" /></li>
        <li>Link 3<img src="images/slash.png" /></li>
        <li>Link 4<img src="images/slash.png" /></li>
        <li>Link 5<img src="images/slash.png" /></li>
        <li>Link 6<img src="images/slash.png" /></li>
        <li>Link 7<img src="images/slash.png" /></li>
        <li>Link 8</li>
    </ul>

Image 'slash.png' need be at the end of every link but not at last link, How can I implement this kind of menu within wordpress ? How class 'selected' will be applied when link of perticular page is selected?

Answer 1

If this is the wp_nav_menu you're talking about, then you should be looking at the link_after property of the function

eg.

<?php

$defaults = array(
'link_after'      => '<img src="images/slash.png" />',
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth'           => 0,
'walker'          => ''
);

wp_nav_menu( $defaults );

?>

However, this does not exclude the last link while attaching the img tag.

Wordpress automatically gives the currently active link the 'current_page_item' class. Maybe you would want to alter your CSS/Javascript accordingly.

Answer 2

If your slash.png is merely cosmetic, I would advise you use the CSS ::after pseudo-element, which matches a virtual last-child of the element in question. Then use the :last-child selector to avoid it displaying in the last item. It should be something like so:

ul.nav li::after {
    background: url('images/slash.png') bottom no-repeat;
    content:    '';
    display:    inline-block;
    width:      20px; // Set this to the width of your slash image 
    height:     20px; // Set this to the height of your slash image
}

ul.nav li:last-child::after {

    background: none;

}

Note, however, that while :after is supported by IE8+, :last-child is supported only by IE9+, so you might want to deal with those compatibility issues.

To do exactly what you asked, you should build a custom walker by extending Walker_Nav_Menu, or you might try hooking into the wp_nav_menu_objects hook. In your case, though, I don't think this is at all necessary.