0

In my WordPress website I have the navigation requirement bit different from the provided menu functionality.In this top navigation the Tab would be the name of Category and all the page URLs under this tab would be the pages having this category associated. For example if I have an category named SPORTS and pages hockey, cricket, badminton & Tennis are associated with this category SPORTS. I need these pages in the navigation like below -

SPORTS
-Hockey
-Cricket
-Badminton
-Tennis

I want to produce HTML markup as below -

<ul> 
<li>
<a href="#">**SPORTS**</a>
 <ul>
 <li><a href=" Hockey.html"> Hockey </a></li>
<li><a href=" Cricket.html"> Cricket</a></li>
<li><a href="cratHertz.html"> Badminton </a></li> 
<li><a href=" Tennis.html"> Tennis </a></li> 
</ul>
---------
</li> 
-------
</ul>

I am using wp_nav_menu( $args ) . Could somebody help me in filtering/grouping the menu items/pages based on category.

EDIT - We do not require any page for SPORTS in CMS so not having any page link also on that.I can say that its just a Category Name of the pages which are coming under this tab as menu items( Hockey,Cricket etc). I am thinking an approach to print the Category names just above the Menu items of this category. I am able to print these menu items with the help of wp_nav_menu( $args ) perfectly but unable to print the category name of all the menu items(pages) just above them.

IN A NUTSHELL - I WANT TO GROUP PAGES IN THE wp_nav_menu( $args ) BASED ON THEIR ASSOCIATED CATEGORY INSIDE A LOOP RUNNING FOR ALL EACH CATEGORY.

0

You would need to use a custom class extending Walker_Nav_Menu, which is the default walker for wp_nav_menu().

Implementation would be as such:

$args = [ 'menu_id' => 'main_menu', 'walker' => new SE287172_Walker_Nav_Menu() );
wp_nav_menu( $args )

You would also want to add a custom class to the menu item. For this example, we'll go with vinayak-custom-class, as you'll see in the walker's code below.

You would need to define your Walker, and override the start_el() method. This would allow you to add additional HTML Markup depending on a number of things. You have the Menu Item object at hand, so you could base the custom submenu on a class, the title, the ID, etc.

I'd recommend a class, as hard-coding to a title may screw you over if the "SPORTS" menu item ever changes to be "Our Sports" or something similar and your sub-menu disappears.

You would place this in your functions.php file or ideally, another file in a /includes/my-nav-menu-walker.php file (or similar) where you keep your code organized.

class SE287172_Walker_Nav_Menu extends Walker_Nav_Menu {

    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

        // Let the main class do it's thing first. Then shove your submenu in.
        parent::start_el( $output, $item, $depth, $args, $id );

        // Now do your class check
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        if ( in_array( 'vinayak-custom-class', $classes ) {
            // Do your Submenu HTML Output
            $output .= 'My Sports Sub-menu goes here';
        }
    }
}

At this point, you can then do a get_posts() call within the class check to grab your pages in your Sports category, and loop through them, creating your <li> structure.

  • Hi Eric , thanks for your reply but it does not meet my requirement. I have updated the question above ( EDIT section) could you please refer it and help me – Vinayak Nov 29 '17 at 13:14
  • So you want to generate a menu by not using anything in a WP Menu area? This isn't directly achievable. What you're really trying to do is create a loop of your Categories, and then a sub-loop of the Pages attached and listing them out, is this correct? – Eric Holmes Nov 29 '17 at 20:55
  • @Vinayak you would want to look at how to create a walker and use it. You could still extend Walker_Nav_Menu, but you would need to recreate the funcitonality inside of the wp_nav_menu function and then use your walker to handle the output. – Eric Holmes Nov 29 '17 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.