Grow your CSS skills. Land your dream job.

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…

    [Test][1]
    

    …but would like to achieve this…

    [Test<span>(icon)</span>][1]
    

    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](http://codex.wordpress.org/Function_Reference/wp_nav_menu). 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 http://example.com/some_link.
    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.

*May or may not contain any actual "CSS" or "Tricks".