Menu ids in wp_page_menu()

In changeset 34330, we added a menu_id argument to wp_page_menu(), allowing theme authors to use a unique id with the containing menu div.

It also means that, by default, the fallback menus have the same attributes as wp_nav_menu(). So wp_page_menu() and wp_nav_menu() now have the same menu_id. We made this change to help accommodate accessibility and certain ARIA attributes that require an id to be associated with a control. Before this change, theme authors lacked an easy way to add an id to that container.

This shouldn’t cause most themes to break, except in a few edge cases. If you rely on the absence of that id in your theme for wp_page_menu() or do any kind of detection around wp_page_menu() vs. wp_nav_menu(), read on. I’ll go over a few recommended ways you can avoid your theme breaking with the release of WordPress 4.4.

If you need to add class names or id names to the HTML output of either function, you can use a filter for that. Like this, using Twenty Fourteen as an example:


function twentyfourteen_page_menu_args( $args ) {
    $args['menu_id'] = 'page-menu';
    return $args;
}
add_filter( 'wp_page_menu_args', 'twentyfourteen_page_menu_args' );

If you need to do something similar with wp_nav_menu(), you can either change the id with an argument in the template tag itself, or use a filer, similar to the page menu. Again, using Twenty Fourteen as an example:


function twentyfourteen_nav_menu_args( $args ) {
    $args['menu_id'] = 'nav-menu';
    return $args;
}
add_filter( 'wp_nav_menu_args', 'twentyfourteen_nav_menu_args' );

Note that wp_nav_menu() adds the id to the ul element and wp_page_menu() adds it to the container element around the ul. So your CSS may need adjusting depending on what you have in place. You may need to make it less specific in some cases.

#themes