Here you see the parent menu selected in the horizontal navbar. I already have that working. I need a sidebar like they have with the same parent indicated plus children when they exist
.
At the moment I have some great code thanks to Michael’s feedback at WordPress Stack Exchange on an earlier question here. But that code does not show the parent above the children pages nor children pages above the siblings.
Any ideas how can I adjust this code made by Michael:
<?php
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=2');
if ($children) { ?>
<ul id="three-menu">
<?php echo $children; ?>
</ul>
<?php } //ends (if($children)//
elseif($post->post_parent) { //if no children, try to get parent page and show siblings pages including the page itself
$siblings = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0&depth=1');
if ($siblings) { ?>
<ul id="three-menu">
<?php echo $siblings; ?>
</ul>
<?php } //ends if($siblings)// ?>
<?php } else { //optional: if no children and if no parent, then show all top level pages
$pagelist = wp_list_pages('title_li=&echo=0&depth=1');
if ($pagelist) { ?>
<ul id="three-menu">
<?php echo $pagelist; ?>
</ul>
<?php } //ends if($pagelist)// ?>
<?php } ?>
The WordPress Codex page http://codex.wordpress.org/Function_Reference/wp_list_pages#List_current_Page_with_its_ancestors_and_children seems interesting, but I have not figured it all out just yet..
Update:
I added children to a depth of two with the first if
statement. That helps loading the children and siblings at a permalink level like: http://domain.com/top-level-page/. I just need to do some styling and rework the next to levels.
Update 2 CSS Solution
With some help I do have a menu that works quite well using wep_list_pages
and some CSS. This is basically a CSS solution.
<div id="home-menu">
<div class="wplp_menu">
<ul id="top-level-sidebar">
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
and CSS:
li.current-page-ancestor a, li.current-menu-item a
{
color:#146BBB; //#0D55A8;
}
ul.children .current_page_item a:link,
ul.children .current_page_item a:visited {
background-color:#CCCCCC;
width: 250px;
}
.wplp_menu li{
list-style:none; /*blends out list dots,can be removed if done somewhere else*/
}
ul#top-level-sidebar {
background: #5097EA;
width: 300px;
margin: 0 10px 0 50px;
float: left;
}
.wplp_menu .page_item a {
display:none;
}
.wplp_menu .current_page_ancestor a,.wplp_menu .children .current_page_item a,.wplp_menu .current_page_item li a {
display:block;
}
.current_page_item a { /* CSS for active item*/
font-weight:bold;
}
.current_page_item li a {
font-weight:normal; /* Resets the above for its children */
}
With the help of a partner developer I went for a CSS solution. The solution has been added to question above. It just hides all page items at first with
display:none
and then shows the items I need. The pages list is loaded with needed indentations usingwp_list_pages('title_li=');