Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I created a menu in wordpress in the Menus section of the backend is there any way to display the menu links with commas so it displays as Link1, Link2, Link3, Link4?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

Use a very simple custom walker …

class WPSE_82726_Comma_Walker extends Walker
{
    public function walk( $elements, $max_depth )
    {
        $list = array ();

        foreach ( $elements as $item )
            $list[] = "<a href='$item->url'>$item->title</a>";

        return join( ', ', $list );
    }
}

… and call your menu like this:

wp_nav_menu(
    array (
        'theme_location' => 'your_registered_theme_location',
        'walker'         => new WPSE_82726_Comma_Walker,
        'items_wrap'     => '<p class="menu">%3$s</p>'
    )
);

Fast and efficient. :)

share|improve this answer
    
where would I add this? –  Joe Bobby Jan 23 '13 at 16:26
    
@JoeBobby The first part, the class, to your functions.php. –  toscho Jan 23 '13 at 16:33

Yes you can, when declaring your wp_nav_menu function you do it like so;

$defaults = array(

    //for a full list of parameters see codex link below
    'before'          => '',
    'after'           => '<span class="comma">,</span>',

);

wp_nav_menu( $defaults );

Then in your WordPress menu under Appearance -> Menus, you will add a class name such as nocomma to the last menu item, in your case, Link 4...

enter image description here

...and in your CSS file you add,

.nocomma .comma {display:none;}

That's why we wrap the comma in a <span> tag. Of course there are other ways you could go about achieving your outcome but this is one of the more simple approaches to an equally simple problem.

Codex references:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

share|improve this answer
    
this has worked well up to the nocomma part, in wordpress I dont have the option to add the CSS Classes to the link, would it be because I'm adding Custom Links? I notice yours says page in the upper right: d.pr/i/Ow5J –  Joe Bobby Jan 23 '13 at 16:24
    
Although you've selected an answer, for reference, on the same screen in Appearance -> Menus you can enable CSS classes on menu items by clicking the Screen Options link at the top right of screen and marking the CSS Classes checkbox accordingly. WordPress hides it by default. –  userabuser Jan 24 '13 at 2:51

Your Answer

 
discard

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.