Question

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?

Thanks in advance

Answer 1

Am I understanding the example correctly that you want an image icon inside the span? If so you could just use the wordpress generated class/ID for that specific li or anchor tag and give it a right aligned background image with CSS. You may have to also set it to have a wider width to accommodate the image. You wouldn’t even need to add a span tag.

Here’s the modified answer to give you want you want since my previous answer wasn’t quite what you’re looking for:

<script type="text/javascript">
    jQuery('#menu-item-175 a').append('<span></span>')
</script>

Just change the #menu-item-175 to the correct ID of the li that surrounds the anchor you want to append to.