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

Home Forums Back End Change WordPress menu markup/classes

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #248047

    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 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>

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

    <nav class="site-nav">
        <div class="menu">
                <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>

    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()
            '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'          => ''

    Ok I’ve managed to stop the &lt;div class="menu"&gt; from being added around the &lt;ul&gt;.

    Basically 'container' =&gt; 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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Back End’ is closed to new topics and replies.