wp_nav_menu() doesn’t apply correctly classes and IDs to menu and container

by

I wrote this simple code to prove what I’m saying:

wp_nav_menu( [
    'menu' => 'Primary Navigation',
    'menu_class' => 'this-is-the-menu-class',
    'menu_id' => 'this-is-the-menu-id',
    'container' => 'div',
    'container_class' => 'this-is-the-container-class',
    'container_id' => 'this-is-the-container-ID',
] );

This is the output:

<div id="this-is-the-menu-id" class="this-is-the-menu-class">
    <ul>
        <li class="page_item page-item-2">
            <a href="http://localhost/test_site/index.php/pagina-di-esempio/">Example Page.</a>
        </li>
    </ul>
</div>

As you can see the ul element doesn’t receive any class nor ID.

They, instead, are applied to the container and the container classes and ID seem to be simply missed (or getting the default values).

In the documentation is told that

  • ‘menu_class’ (string) CSS class to use for the ul element which forms the menu. Default ‘menu’.
  • ‘menu_id’ (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
  • ‘container’ (string) Whether to wrap the ul, and what to wrap it with. Default ‘div’.
  • ‘container_class’ (string) Class that is applied to the container. Default ‘menu-{menu slug}-container’.
  • ‘container_id’ (string) The ID that is applied to the container.

But as you can see the result is not the one expected.

In this discussion the user set wrong the container param, and so the replies point out this error, but the error still exists and I’m doing all following the rules (at least I think!).

Am I doing something wrong or effectively the function is bugged?

NOTEs:

  • I’m using Genesis Framework (just in case it may be useful to understand the context)
  • WordPress version is 4.9.4

2 Answers
2

I believe this is caused probably by your theme or another plugin, filtering on wp_nav_menu_args and changing the items_wrap value. I tested your provided code and the output was correct, using blank WordPress 4.9.4 installation.

You could try passing items_wrap with default value:

wp_nav_menu( [
    'menu' => 'Primary Navigation',
    'menu_class' => 'this-is-the-menu-class',
    'menu_id' => 'this-is-the-menu-id',
    'container' => 'div',
    'container_class' => 'this-is-the-container-class',
    'container_id' => 'this-is-the-container-ID',
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'
] );

But if something is filtering that out, it wouldn’t make a difference.

I recommend adding this to your child theme’s functions.php file, to remove all filters and see if that fixes it (to prove it is a filter causing your problem):

remove_all_filters( 'wp_nav_menu_args' );

You can also add this to your child theme’s functions.php, to dump out on screen, the $args array, where you can check the value of items_wrap:

add_filter( 'pre_wp_nav_menu', 'smyles_dump_nav_menu_args', 9999, 2 );

function smyles_dump_nav_menu_args( $null, $args ){
    ob_start();

    echo '<pre>';
    var_dump($args);
    echo '</pre>';

    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}

Returning a true value (in our case, it’s HTML) to this filter will cause it to echo on page, when echo is passed true in the wp_nav_menu

Make sure to add echo and set true in wp_nav_menu call:

wp_nav_menu( [
    'menu' => 'Primary Navigation',
    'menu_class' => 'this-is-the-menu-class',
    'menu_id' => 'this-is-the-menu-id',
    'container' => 'div',
    'container_class' => 'this-is-the-container-class',
    'container_id' => 'this-is-the-container-ID',
    'echo' => true
] );

Leave a Comment