WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
        <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>

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?

share|improve this question
This question is very general. Can you show what code you got so far, provide some more information on how/where this should be used, etc.? – fischi Feb 27 '13 at 9:16

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



$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.

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.