how to wrap tag in tag html to wordpress menu conversion

by

I am converting a non-bootstrap menu to wordpress. It has no drop downs so I don’t think I need to use a walker class. When I inspect it in Google Chrome, the ul tag class is correct and the li but, when I view the a tag on the html menu, I can see that has a span tag e.g.:

<a href="https://wordpress.stackexchange.com/questions/300510/home">
  <span>Home</span>
</a>

But my wordpress menu just looks like: 

<a href="https://wordpress.stackexchange.com/questions/300510/home">Home</a>

The style I need appears to be in the span tag but I am not sure how to do this with my current menu code?

<div class="menu_wrapper">
    <nav id="menu">
            <?php wp_nav_menu(array(
                'menu_class' => 'menu menu-main',
                'container' => '',
                'theme_location' => 'main_menu'
            ));
            ?>
    </nav>
</div>

This is the original menu:

<div class="menu_wrapper">
    <nav id="menu">
        <ul id="menu-main-menu" class="menu menu-main">
            <li class="current-menu-item">
                <a href="https://wordpress.stackexchange.com/questions/300510/index.html"><span>Home</span></a>
            </li>
            <li>
                <a href=""><span>item1</span></a>
            </li>
            <li>
                <a href=""><span>item2</span></a>
            </li>
            <li>
                <a href=""><span>item3</span></a>
            </li>
        </ul>
    </nav>
</div>

1 Answer
1

You’ll want to use the link_before and link_after arguments for the wp_nav_menu. Setting them to '<span>' and '</span>' respectively.

wp_nav_menu( [
  'menu_class'     => 'menu menu-main',
  'container'      => '',
  'theme_location' => 'main_menu',
  'link_before'    => '<span>',
  'link_after'     => '</span>'
] );

Leave a Comment