Show current parent and its submenu - wordpress

Question

I have basic navigation and all parents have children. For instance:

Page A: About Us child1 child2 Page B : Our services Child 3 Child 4 

I need to enable the horizontal submenu on the page. But my problem is that if we are currently on page A, all the children of page A will only be displayed on page. If we are on page A, it should look like this:

  Page A
 Child 1
 Child 2 

Similarly, when we go to page B, the child of page B should only be displayed.

  <?php $args = array( 'theme_location' => '', 'menu' => '13', //nav menu id, which has about-us as a menu. 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); $menu_items = wp_nav_menu($args);//wp_get_nav_menu_items(13); 

I tried to write the above code, resulting in all the parent elements with their children.

Can someone help me with this?

In short, I want to get all the children (submenus) in the About Us menu (for example, I want child1 and child2 to be in a list with <a> tags)

Answer 1

It does 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!

Answer 2

Please write this code in the functions.php topic

 <?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; } } 

You can then display it in your topic using wp_nav_menu (as usual), but also passing the sub_menu flag to activate the custom sub_menu function:

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

Answer 3

When you first get all pages on a page, you can get the current page id, get the children in the array and skip this array as follows:

 <?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 that you make in the backend, this is because the page child of another page is directly in the page editing section.

Answer 4

I wrote a function that will help with this, since most of the examples I found include child pages, 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 the page, just name 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() ?> 

Answer 5

The first thing you need to do is make your "child1" "child2" pages a child of the About Us page.

Click here to learn more about creating additional pages .

When you have structured pages, you can use this function, ( link to documents )

 <?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 echoed by this function 'echo' => 1, 'authors' => '', 'sort_column' => 'menu_order, post_title', 'link_before' => '', 'link_after' => '', 'walker' => '', 'post_type' => 'page', 'post_status' => 'publish' ); ?> 

The same goes for the Our Services page. I hope this solves your problem. Let us know if you encounter any problem and welcome stackoverflow!

Answer 6

A quick and dirty solution.

I 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.

Answer 7

User menu and its submenu

 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/ .