Forums

How to add a class to wp_nav_menu output current_item + $id (2 posts)

  1. MaxB.
    Member
    Posted 11 months ago #

    Hello WordPress Community,
    I'm currently coding a theme and trying to change the output of wp_nav_menu. At the end of the class I need something like "current_menu_item + $id (of menu item)".
    Here is an example:
    My code before

    <div id="mainmenu" class="navigation">
    <ul id=\"menu-main\" class=\"menu\">
    <li id="menu-item-170" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-170"><a title="2" href="http://127.0.0.1/wp/?cat=17">Comedy</a></li>
    </ul>
    </div>

    and this is what i want to get:

    <div id="mainmenu" class="navigation">
    <ul id=\"menu-main\" class=\"menu\">
    <li id="menu-item-170" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-170 current-menu-item-170"><a title="2" href="http://127.0.0.1/wp/?cat=17">Comedy</a></li>
    </ul>
    </div>

    So i need a simple current-menu-item-170 at the end.
    So my question is how to do that.
    I tried a bit around with function start_el.
    Thanks in advance.

  2. Digital Raindrops
    Member
    Posted 11 months ago #

    Not sure what you mean just use wp_nav_menu() as this already returns the menu items like:

    current-menu-item is the selected (active) item so you cannot use that as it will change as the visitor navigates.

    Each item will have the page ID 'menu-item-3367' or category 'cat-item-3', so you could add a class if you know these.

    .cat-item-3 {
       color: #ff0000;
    }

    If the visitor selected a sub menu then you have
    Top Level:
    menu-item-3367 current-menu-ancestor current-menu-parent

    Then the sub menus
    menu-item-2993 current-menu-item

    There is a class for .firstchild but not first or last, so you can only style the last item by id

    If your theme supports custom menus then just create a custom menu and use a theme location or <?php wp_nav_menu( array('menu' => 'My Menu' )); ?> to call your menu and return the menu items already formatted.

    There is also arguments where you enter your own classes and add styles 'before' and 'after'

    HTH

    David

Reply

You must log in to post.

About this Topic