Support » Developing with WordPress » Displaying child menu items in WordPress

  • I make a WordPress theme. There are submenus in the main menu. Found what can be done by extending the class Walker_Nav_Menu. Please, tell me how to implement correctly.

    <div id="nav-bottom">
        <div class="container">
            <!-- nav -->
            <ul class="nav-menu">
                <li class="has-dropdown">
    	        <a href="index.html">Home</a>
    		<div class="dropdown">
    		    <div class="dropdown-body">
    		        <ul class="dropdown-list">
    			    <li><a href="category.html">Category page</a></li>
    			    <li><a href="blog-post.html">Post page</a></li>
    			    <li><a href="author.html">Author page</a></li>
    			    <li><a href="about.html">About Us</a></li>
    		            <li><a href="contact.html">Contacts</a></li>
    			    <li><a href="blank.html">Regular</a></li>
    	    <li><a href="#">Fashion</a></li>
    	    <li><a href="#">Lifestyle</a></li>
    	    <li><a href="#">Technology</a></li>
    	    <li><a href="#">Health</a></li>
    	    <li><a href="#">Travel</a></li>
    <!-- /Main Nav -->

    Menu form as follows:

    <div id="nav-bottom">
        <div class="container">
            <!-- nav -->
            <ul class="nav-menu">
    	    'theme_location' => 'primary',
    	    'walker'         => new Callie_Walker_Nav_Menu(),
Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi,
    You need to add 'depth' parameter in wp_nav_menu to achieve sub-menu and then you can style sub-menu.

    wp_nav_menu( array $args = array(
        'menu'              => "", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
        '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.
        'fallback_cb'       => "", // (callable|bool) If the menu doesn't exists, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
        'before'            => "", // (string) Text before the link markup.
        'after'             => "", // (string) Text after the link markup.
        'link_before'       => "", // (string) Text before the link text.
        'link_after'        => "", // (string) Text after the link text.
        'echo'              => "", // (bool) Whether to echo the menu or return it. Default true.
        'depth'             => "", // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
        'walker'            => "", // (object) Instance of a custom walker class.
        'theme_location'    => "", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
        'items_wrap'        => "", // (string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
        'item_spacing'      => "", // (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
    ) );

    Source :-

    Moderator bcworkz


    The default depth is for all levels, so there is rarely a need to specify a depth in practice unless you wish to constrain users to a limited depth.

    The default Walker_Nav_Menu has several filters you can use to alter various elements in the hierarchy, so there is rarely a need to actually use a custom walker. Review the source code for Walker_Nav_Menu to see what’s available.

    If those filters do not address your needs, you can extend the Walker_Nav_Menu class and override the methods that you need to function differently. Not only those of Walker_Nav_Menu, but of the parent Walker class as well. Instantiate your extended class and pass it as the ‘walker’ argument in your calls to wp_nav_menu() on your theme templates.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.