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?

2 Answers 2


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:

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

Fast and efficient. :)

  • where would I add this?
    – Joe Bobby
    Jan 23, 2013 at 16:26
  • @JoeBobby The first part, the class, to your functions.php.
    – fuxia
    Jan 23, 2013 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:


  • 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, 2013 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.
    – Adam
    Jan 24, 2013 at 2:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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