Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End how can I add a span to wp_nav_menu in wordpress

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #41115
    croydon86
    Participant

    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

    #116167
    chrisburton
    Participant

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

    #116169
    DesjardinsM
    Member

    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.

    #116170
    chrisburton
    Participant

    Or you can use :after with css

    #116171
    DesjardinsM
    Member

    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.

    #116172
    chrisburton
    Participant

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

    #116173
    DesjardinsM
    Member

    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

    #116185
    chrisburton
    Participant

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

    #116186
    croydon86
    Participant

    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.

    #116188
    dclardy
    Member

    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)
  • The forum ‘Back End’ is closed to new topics and replies.