Display current parent and its sub-menu only – wordpress

7 comments

1. Please write this code in theme’s functions.php

   <?php
   
   // add hook
   add_filter( 'wp_nav_menu_objects', 'my_wp_nav_menu_objects_sub_menu', 10, 2 );
   
   // filter_hook function to react on sub_menu flag
   function my_wp_nav_menu_objects_sub_menu( $sorted_menu_items, $args ) {
     if ( isset( $args->sub_menu ) ) {
       $root_id = 0;
       // find the current menu item
       foreach ( $sorted_menu_items as $menu_item ) {
         if ( $menu_item->current ) {
           // set the root id based on whether the current menu item has a parent or not
         $root_id = ( $menu_item->menu_item_parent ) ? $menu_item->menu_item_parent : $menu_item->ID;
         break;
       }
     }
     // find the top level parent
     if ( ! isset( $args->direct_parent ) ) {
       $prev_root_id = $root_id;
       while ( $prev_root_id != 0 ) {
         foreach ( $sorted_menu_items as $menu_item ) {
           if ( $menu_item->ID == $prev_root_id ) {
             $prev_root_id = $menu_item->menu_item_parent;
             // don't set the root_id to 0 if we've reached the top of the menu
             if ( $prev_root_id != 0 ) $root_id = $menu_item->menu_item_parent;
               break;
             }
           }
         }
       }
   
       $menu_item_parents = array();
       foreach ( $sorted_menu_items as $key => $item ) {
         // init menu_item_parents
         if ( $item->ID == $root_id ) $menu_item_parents[] = $item->ID;
   
         if ( in_array( $item->menu_item_parent, $menu_item_parents ) ) {
         // part of sub-tree: keep!
           $menu_item_parents[] = $item->ID;
         } else if ( ! ( isset( $args->show_parent ) && in_array( $item->ID, $menu_item_parents ) ) ) {
         // not part of sub-tree: away with it!
         unset( $sorted_menu_items[$key] );
       }
     }
   return $sorted_menu_items;
   } else {
     return $sorted_menu_items;
   }
   }
   

   Then you can display it in your theme using wp_nav_menu (just like you normally would), but also passing in a sub_menu flag to activate the custom sub_menu function:

   <?php
   wp_nav_menu( array(
     'theme_location' => 'primary',
     'sub_menu' => true
   ) );
   ?>
   

   Log in to Reply

2. When on a page you first get all the pages, then you can get the current page ID, get the children in an array and loop through this array like this:

   <?php
       // First get all the pages in your site
       $wp_query = new WP_Query();
       $all_pages = $wp_query->query(array('post_type' => 'page'));
   
       // Then get your current page ID and children (out of all the pages)
       $current_page_id = get_the_id();
       $current_page_children = get_page_children($current_page_id, $all_pages);
   
       // Loop through the array of children pages
       foreach ($current_page_children as $child_page) {
           // Echo whatever you want from the pages
       }
   ?>
   

   EDIT: This has nothing to do with the structured menus you make in the backend, it has to do with making a page child of another page directly in the page edit section.

   Log in to Reply

3. This is doing it all

   <?php
   global $wp_query;
   if( empty($wp_query->post->post_parent) ) {
   $parent = $wp_query->post->ID;
   } else {
   $parent = $wp_query->post->post_parent;
   } ?>
   <?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
   <div>
   <ul>
   <?php wp_list_pages("title_li=&child_of=$parent" ); ?>
   </ul>
   </div>
   <?php endif; ?>
   

   Thanks for all the solutions !

   Log in to Reply

4. I wrote a function to help with this, since most examples I found include the page children, but not the parent itself. Just add this function to your functions.php file:

   <?php
   
   // Display sub menu
   function the_sub_menu()
   {
       global $post;
   
       // Open list
       echo '<ul class="sub_menu">';
   
       // Sub page
       if($post->post_parent) {
   
           // Load parent
           $parent = get_post($post->post_parent);
   
           // Add parent to list
           echo '<li><a href="' . get_permalink($parent->ID) . '">' . $parent->post_title . '</a></li>';
   
           // Add children to list
           wp_list_pages('title_li=&child_of=' . $post->post_parent);
   
       // Parent page
       } else {
   
           // Add parent to list
           echo '<li class="current_page_item"><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></li>';
   
           // Add children to list
           wp_list_pages('title_li=&child_of=' . $post->ID);
       }
   
       // Close list
       echo '</ul>';
   }
   

   Then, to use it on a page, simply call it like this:

   <?php get_header() ?>
   
       <?php while (have_posts()): the_post() ?>
   
           <!-- Include the sub menu! -->
           <?php the_sub_menu() ?>
   
           <article>
               <?php the_content() ?>
           </article>
   
       <?php endwhile ?>
   
   <?php get_footer() ?>
   

   Log in to Reply

5. First thing you need to do is to make your ‘child1’ ‘child2’ pages as child pages of ‘About Us’ page.

   Click here to find out more on creating sub pages.

   Once you have the pages structured, you can use this function, (link to docs)

   <?php wp_list_pages( $args );  
   
    $args = array(
       'depth'        => 0,
       'show_date'    => '',
       'date_format'  => get_option('date_format'),
       'child_of'     => N,   //N here should be replaced by your About-us page ID. 
       'exclude'      => '',
       'include'      => '',
       'title_li'     => __('About Us'),   //here you can mention any title you like for the list that's echoed by this function
       'echo'         => 1,
       'authors'      => '',
       'sort_column'  => 'menu_order, post_title',
       'link_before'  => '',
       'link_after'   => '',
       'walker'       => '',
       'post_type'    => 'page',
       'post_status'  => 'publish' 
   ); ?>
   

   Same goes for your ‘Our services’ page, Hope this resolves your problem. Do let us know if you face any problem & welcome to stackoverflow!

   Log in to Reply

6. A fast and “dirty” solution.

   I have created the following file …/wp-content/plugins/gabriel-submenu.php

   With this content:

   <?php
   /**
    * @package Gabriel_SubMenu
    * @version 0.1
    */
   /*
   Plugin Name: Gabriel SubMenu
   Plugin URI: http://www.nuage.ch
   Description: My plugin to display a submenu
   Author: Gabriel Klein
   Version: 0.1
   Author URI: http://www.nuage.ch
   */
   
   function gab_submenu_content($a) {
   
           $d = array(
                   'theme_location' => 'main_menu',
                   'child_of'       => $a['id'],
                   'echo'           => false,
                   'sort_column'    => 'menu_order'
           );
   
           return wp_nav_menu( $d );
   
   }
   
   add_shortcode('gabsubmenu','gab_submenu_content' );
   
   
   ?>
   

   Then in my posts I have:

   [gabsubmenu id=93]

   Where id is the id of the parent page.

   Log in to Reply

7. Custom Menu and its Submenus

   function thewebpixel_header_menu(){ ?>
   <a href="#" id="mobile-menu-trigger"> <i class="fa fa-bars"></i> </a>
   <ul class="sf-menu fixed" id="menu">
       <?php
           $args = array(
           'order'                  => 'ASC',
           'orderby'                => 'menu_order',
           'post_type'              => 'nav_menu_item',
           'post_status'            => 'publish',
           'output'                 => ARRAY_A,
           'output_key'             => 'menu_order',
           'nopaging'               => true,
           'update_post_term_cache' => false );
   
           $items = wp_get_nav_menu_items( 'main', $args );
           $parents = array();
           foreach($items as $item )
             $parents[] = $item->menu_item_parent;
   
           function check_has_child($parents, $menu_id){
   
               if(in_array($menu_id, $parents))                     
                 return "YES";
           else
             return "NO";  
            }       
   
           $flag = 0;
           $count = 0;
           foreach($items as $item ) { ?>
       <?php if( !$item->menu_item_parent ){ 
           if($count != 0 && $count != 5 && $flag == 2){ 
                 echo '</ul></div></div></li>';
                 $count=0; 
                 $flag=0;
                 }  
   
             if(check_has_child($parents, $item->ID ) == "YES")
             {
               $liclass = '';
               $aclass = 'class="sf-with-ul"';                 
             }else{
   
               $liclass = 'dropdown';
               $aclass = '';            
               }          
             ?> 
       <li class="<?php echo $liclass; ?>"><a <?php echo $aclass; ?> href="<?php echo $item->url;?>"><span><?php echo
           $item->title;?></span></a>
           <?php } ?>   
           <?php  if( $item->menu_item_parent){ if($flag != 2)$flag = 1;  ?>
           <?php if($flag == 1) {                                 
               $flag = 2;
               echo '<div class="sf-mega">';
                } 
   
               if($count == 0 ){
               echo '<div class="sf-mega-section"><ul>';
               }
               $count++;
               ?>                                                
       <li><a href="<?php echo $item->url; ?>">
           <i class="fa fa-angle-right"></i>
           <?php echo $item->title; ?>
           </a>
       </li>
       <?php
           if($count == 5){
             echo '</ul></div>';
             $count=0;
           }
   
           } ?>    
       <?php if( !$item->menu_item_parent && check_has_child($parents, $item->ID ) == "NO" ){ ?></li> <?php } ?>
       <?php }  ?>
   </ul>
   <?php } ?>
   

   Find more information and examples at https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/ .

   Log in to Reply