I have a main navigation and all parents have children. Eg:
Page A: About Us
child1
child2
Page B : Our services
Child 3
Child 4
I need to include a horizontal sub-menu on a page. But my problem is, if currently we are on page A, all the child items of page A only to be displayed on page. If we are on Page A, it should looks like:
Page A Child 1 Child 2
Like this, when we go to Page B, the child of page B only to 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 writing above code, which resulted in all the parent items with their children.
Can someone help me on this?
In short, I want to get all the children(sub-menu) of About us menu entry.(i.e. I want child1 & child2 as a list with <a>
tags)
A sub-menu or drop-down menu appears when you have some pages under the main menu item layout and your hover this main page item on the navigation menu as is shown on the image above while hovering the 'PORTFOLIO' navigation menu item and drop-down appear.
With this code: //For clickable parent nodes if ( $args->has_children && $depth === 0 ) { $atts['class'] = 'dropdown-toggle'; $atts['aria-haspopup'] = 'true'; $atts['aria-expanded'] = 'false'; } $atts['href'] = !
You can hide the sub menus on mobile, but not on desktop. You would need to enable the 'Hide on mobile' option for all of your menu items, so none of them appear on desktop. Then re-add the top level items (the ones you want to display on desktop without a sub menu) to the menu.
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
) );
?>
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.
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 !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With