The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

how can I add a span to wp_nav_menu in wordpress

  • # December 2, 2012 at 7:10 pm

    I have a dynamic menu in wordpress using wp_nav_menu, however I would like to add a span to just one of the list items.

    I will demonstrate this in static HTML to show you what I would like to achieve.

    I currently have this…


    …but would like to achieve this…


    Is there anyway to do this dynamically?

    I would like to avoid using javascript if possible and stick to PHP.

    Thanks in advance

    # December 3, 2012 at 2:53 pm

    Not sure if you can do that without hard coding the menu or using jQuery.

    # December 3, 2012 at 3:00 pm

    I’m not much of an expert on this, but maybe it would be possible using the [link_after parameter]( If I’m reading that right, it would work like an :after, meaning it is still inside the link. I’m not sure how well it would apply for you, but it might be worth testing.

    # December 3, 2012 at 3:06 pm

    Or you can use :after with css

    # December 3, 2012 at 3:11 pm

    I was thinking that but it is likely that each link would need a different icon, wouldn’t it? But now I realize that would make my suggestion of the php parameter useless anyways.

    # December 3, 2012 at 3:13 pm

    He stated only one list item would need an icon which would still work if the list items have unique class names.

    # December 3, 2012 at 3:15 pm

    Ah ok, it would probably be easier for css :after then. Easier selection. I should probably pay more attention to the question itself x.x

    # December 3, 2012 at 4:10 pm

    I agree but it certainly depends on the browser support that is needed. Hopefully nothing too low for IE.

    # December 3, 2012 at 4:29 pm

    Hey guys, thanks for the responses.

    Yes :after would work, but I opted to go for jquery in the end due to browser support. (Even though I was planning on avoiding this). Simply appending a span tag after the specific class name seems to do the trick.

    # December 3, 2012 at 4:39 pm

    Just add it in the menu tool for the theme. Go to Appearance -> Menus.

    Add a custom menu item. Label it what you want and your span after the Label you give it.

    So the URL would be
    Label would be Awesome WordPress Thing Icon

    Then do your stuff in CSS to get the icon there.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed