Change WordPress menu markup/classes

[grimski]

I’m building my first website on WordPress, as expected I’m getting stuck on some things I thought would be quite straight forward.

Basically I want the markup of my WordPress navigation to match what I’ve done in my static templates. I’m looking at wp_nav_menu and I need to add a class onto the menu list-items and anchors, so it looks like this:

<nav class="site-nav">
    <a href="#" class="page-head__logo">
        <img src="img/interface/logo.png" srcset="img/interface/[email protected] 2x" alt="Wireforce logo" />
    </a>
    <a href="#" id="site-nav__toggle">Menu</a>
    <ul class="site-nav__list">
        <li class="site-nav__item"><a href="#" class="site-nav__link">Services</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Security</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Blog</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Contact</a></li>
    </ul>
</nav>

I thought this would be easy but obviously not! WordPress currently formats my navigation like this:

<nav class="site-nav">
    <div class="menu">
        <ul>
            <li class="page_item page-item-12"><a href="/">About</a></li>
            <li class="page_item page-item-10"><a href="">Blog</a></li>
            <li class="page_item page-item-16"><a href="">Contact</a></li>
            <li class="page_item page-item-4"><a href="">Security</a></li>
            <li class="page_item page-item-2"><a href="">Services</a></li>
        </ul>
    </div>
</nav>

In functions.php I’ve also tried setting menu to false but I can’t get rid of it – any ideas?

For references the menu code in functions.php currently reads like this:

function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul class="site-nav__list">%3$s</ul>',
        'depth'           => 0,
        'walker'          => ''
        )
    );
}

[grimski]

Ok I’ve managed to stop the <div class="menu"> from being added around the <ul>.

Basically 'container' => false will work but you need to create a new menu add give it the same theme_location that is referenced in functions.php

Just the additional classes on the list-items and anchors to sort now :o

[Author]

Posts