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>
			</ul>
		    </div>
		</div>
	    </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>
        </ul>
    </div>
</div>
<!-- /Main Nav -->

    Menu form as follows:

    <div id="nav-bottom">
    <div class="container">
        <!-- nav -->
        <ul class="nav-menu">
	    <?php
	    wp_nav_menu(array(
	    'theme_location' => 'primary',
	    'walker'         => new Callie_Walker_Nav_Menu(),
	    ));
	    ?>
	</ul>
    </div>
</div>
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 :- https://developer.www.ads-software.com/reference/functions/wp_nav_menu/

    Moderator bcworkz

    (@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)
  • The topic ‘Displaying child menu items in WordPress’ is closed to new replies.