Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Display menu/list and show child pages only when on parent/child WordPress

  • SOLVED

I need to display a list of all pages in my sidebar. The pages go 3 levels deep. I need to show the child pages only when on the parent or another child of that parent. This needs to work for all levels.

Is there an easy way of doing this with wp_nav_menu or should I use wp_list_pages and some sort of tree function?

Can anyone point me in the right direction, or provide block of code I can use for this?

Answers (4)

2012-05-17

Jeffri Hong answers:

Hello.

The easiest way I can think of is to use wp_list_pages and then use CSS to display current sub-pages. When you are on the parent page, the class "current_page_item" is added to the link. On the sub-page, "current_page_parent" and "current_page_ancestor" is added to the parent page link.

So basically, you hide every sub-page by default, and only display the sub-pages which the parent have any of those classes. An example of the CSS:

<blockquote>#navigation ul ul { display: none; }
#navigation ul li.current_page_item ul, #navigation ul li.current_page_parent ul, #navigation ul li.current_page_ancestor ul { display: block; }</blockquote>

<em>* Change #navigation to the wrapper id/class</em>

If you have a lot of sub-pages this solution might not be pratical as all links are actually send out to the browser, but hidden. If there is not a lot, it is the easiest.

Hope that help.

Jeffri


Dan | gteh comments:

thanks for this suggestion. this might work also. I'll let you both know soon.


Dan | gteh comments:

Your suggestion pointed me in the right direction. thanks.

This is what I ended up doing because the nav menu is 3 levels deep on some links.


#sidebar-left ul ul {display:none;}
#sidebar-left ul ul ul {display:none;}

#sidebar-left ul .current-menu-item > ul {display:block;}
#sidebar-left ul .current_page_ancestor ul {display:block;}


Dan | gteh comments:

Just a note that your strategy works with wp_nav_menu also which is what I needed to use

2012-05-17

Nilesh shiragave answers:

You want to display all pages? or just child pages of the current page? or if childs are not present then display all the top level pages?


<?php if($post->post_parent): ?>

<?php $links= $sidelinks = wp_list_pages("title_li=&echo=0&depth=1&child_of=".$post->post_parent);

$title=get_the_title($post->post_parent);

?>

<?php else: ?>

<?php $links= $sidelinks = wp_list_pages("title_li=&echo=0&depth=1&child_of=".$post->ID);

$title=get_the_title($post->ID);

?>

<?php endif; ?>

<h2 class="widget_heading"><?php echo $title; ?></h2>

<ul>

<?php echo $links; ?>

</ul>


You can try above code.


Dan | gteh comments:

Yup, that sounds about right.

I'll give this a shot soon and let you know.

2012-05-17

Arnav Joy answers:

try this

<ul id="list">
<?php
$pageID = get_pages('child_of=0&parent=0');
foreach ($pageID as $pagg) {
echo ' <li><strong><span>'.$pagg->post_title.'</span></strong>';
if(get_the_ID() == $pagg->ID){
$pageID1=get_pages('child_of='.$pagg->ID.'&parent='.$pagg->ID);
echo '<ul>';
foreach ($pageID1 as $pagg1) {
echo ' <li><a href="'.get_page_link($pagg1->ID).'">'.$pagg1->post_title.'</a></li>';
}
echo '</ul>';
}
}
?>
</ul>

2012-05-17

Michael Caputo answers:

This is how i've done it in the past (if i'm understanding you correctly):



<?php
$page_id = $post->ID;
$args = array(
'depth' => 2,
'child_of' => $page_id,
'echo' => 0,
'sort_column' => 'menu_order',
'title_li' => ''
);
$list_of_pages = wp_list_pages( $args );

if ($list_of_pages == '') { ?>
<div class="widget" id="subpageNavigationWidget">
<div class="widgetHolder">
<nav>
<ul class="sectionNavigation-list" id="sideAccor">
<li class="page_item" style="border-bottom:1px dotted #006A3C;"><a href="javascript:history.go(-1)">GO BACK</a></li>
</ul>
</nav>
</div>
</div>
<?php } else { ?>
<div class="widget" id="subpageNavigationWidget">
<div class="widgetHolder">
<nav>
<ul class="sectionNavigation-list" id="sideAccor">
<?php
echo $list_of_pages;
?>
</ul>
</nav>
</div>
</div>
<?php } ?>


Dan | gteh comments:

That could work but I'd prefer not to use wp_list_pages. I need the control of wp_nav_menu so that the menu items use different titles than the posts.