treehouse : what would you like to learn today?
Web Design Web Development iOS Development

how can I add a span to wp_nav_menu in wordpress

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

    <li><a href="#">Test</a></li>
    

    ...but would like to achieve this...

    <li><a href="#">Test<span>(icon)</span></a></li>
    

    Is there anyway to do this dynamically?

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

    Thanks in advance

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

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

  • Or you can use :after with css

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

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

  • 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

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

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

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