How to give custom classes to the WordPress Menu widget

(Updated based on comments below.)

<div class="menu-menu-1-container"> is coming from WP’s default menu container. You can customize what tag is used (div, ul, etc.) or tell WP not to use a container at all, as well as set the ID and/or class (menu-menu-1-container, etc.) by using the container, container_class and container_id arguments when you call wp_nav_menu.

<ul id="menu-menu-4" class="menu"> – you can easily change this class and ID by including menu_class and menu_id when you call the menu, toward the end of your “Front End display” block:

$nav_menu_args = array(
    'fallback_cb' => '',
    'container' => 'ul',
    'container_class' => 'my_custom_container_class',
    'container_id' => 'my_custom_container_id',
    'menu' => $nav_menu,
    'menu_class' => 'my_custom_css_class',
    'menu_id' => 'my_custom_css_id'
);

Change class and ID to whatever you like, variables or whatever. Make sure if you’ll be displaying multiple menus on a single URL you set the ID to a dynamic variable so you don’t have multiple menus with the same ID.

If you need to customize anything further, WP’s code reference on wp_nav_menu lists everything you can tweak. If even that is not enough, consider looking into a custom walker.

Related Posts: