1

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="home">
  <span>Home</span>
</a>

But my wordpress menu just looks like:

<a href="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="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>
5

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>'
] );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.