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:

    $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=2');                   
    if ($children) { ?>                   
        <ul id="three-menu">                   
        <?php echo $children; ?>                   
        <?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; ?>                   
    <?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; ?>                   
    <?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..


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='); ?>


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 {
    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 {
.wplp_menu .current_page_ancestor a,.wplp_menu .children .current_page_item a,.wplp_menu .current_page_item li a  {

.current_page_item a {    /* CSS for active item*/  
.current_page_item li a {
font-weight:normal;  /* Resets the above for its children */
  • 1
    Why don't you use wp_nav_menu() for this?
    – Mamaduka
    Mar 18, 2012 at 10:15
  • As in a WordPress 3.0 widget menu? Well, as the setup was initially simple, as I use pages only and I thought it would be nice to have it auto-generated I went for this. And thanks to some help I got pretty far. Another large issue is that I have different menu displays per level (parent, child, sibling). I show children now and siblings when there are and if there are no children or siblings I show the standard wp_list_pages How would I do that using wp_nav_menu() ?
    – rhand
    Mar 18, 2012 at 10:32
  • 1
    You can add menus with the function mentioned by @Mamaduka ↑ without any widget. Just place the template tag and fill it with the needed args.
    – kaiser
    Mar 18, 2012 at 15:01
  • @ kaiser. As I have been at it with this menu on and off for two weeks now and need it to function like the site mentioned I doubt I can simply create this. I would appreciate some guidance. Will look into wp_nav_menu again of course and see how I can convert all the added code plus make changes to make it look like the sidebar on the mentioned site.
    – rhand
    Mar 19, 2012 at 10:37

1 Answer 1


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 using wp_list_pages('title_li=');

  • Yeah, I was playing with various plugins for a while (Advanced Menu Widget is OK) until I realised it's probably far easier in CSS.
    – Simon East
    Aug 22, 2014 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.