Add Commas Between Menu Items?

Question

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?

Answer 1

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. :)

Answer 2

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

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