Question

I’m trying to create a sidebar navigation menu that changes based on the current location in the site.

Here’s what the navigation looks like as a whole:

• Home
• About us
  • Level 1a
  • Level 1b
  • Level 1c
• Programs
  • Level 1d
    • Level 2a
    • Level 2b
  • Level 1e
    • Level 2c
    • Level 2d
  • Level 1f
• Contact Us

Currently I’m using custom nav menus to create menus for the Home page so they can edit the custom menu via the menus link in the admin panel. They don’t want a sidebar nav menu on the contact page.

When on the about us page, they want the sidebar nav to look like this:

• Level 1a
• Level 1b
• Level 1c

When on the Programs page, they want it to look like this:

• Level 1d
• Level 1e
• Level 1f

When on Level 1d page, they want it to look like this:

• Level 1d
  • Level 2a
  • Level 2b
• Level 1e
• Level 1f

making sure the the child pages only show for the current parent.

When on the Level 2a page, they want it to look the same as if on Level 1d page:

• Level 1d
  • Level 2a
  • Level 2b
• Level 1e
• Level 1f

Also important to note is that I need to be able to style the current-page list-item differently than the rest of the items, so there’ll need to be some sort of current-page-item class added to that list item each time.

so far I have not been able to print only the children of the current parent when on Level 1d. wp_list_pages allows you to set the depth, but not limit it to only the current parent. It prints the children for all siblings as well (i.e. if on level 1d it prints all the level 2 children under their respective parents instead of only the level 2 children under the currently active parent).

How would I do this?

    <?php $current_section = "";
        if(is_front_page()):
             $current_section = "home";
             $nav_args = array(
                 'theme_location' => $current_section,
                  'container' => 'nav',
                  'container_class' => 'side-nav'
             );
             wp_nav_menu( $nav_args );
        else:

        endif;?>

This is what I have at this point. I’ve removed all the code in the else block because it wasn’t working anyway.

Answer 1

Here’s the code I came up with:

    <?php
            $children = wp_list_pages('depth=1&title_li=&child_of='.$post->ID.'&echo=0');
            $current_page = wp_list_pages('title_li=&include='.$post->ID.'&echo=0');
            $grandparent=0;
            if($post->post_parent):
                $parent = wp_list_pages('title_li=&include='.$post->post_parent.'&echo=0');
                $siblings = wp_list_pages('depth=1&title_li=&child_of='.$post->post_parent.'&exclude='.$post->ID.'&echo=0');
                $parent_children = wp_list_pages('depth=1&title_li=&child_of='.$post->post_parent.'&echo=0');
                $parent_post = get_post($post->post_parent);
                $grandparent = $parent_post->post_parent;
                $parent_siblings = wp_list_pages('depth=1&title_li=&child_of='.$grandparent.'&echo=0&exclude='.$post->post_parent);
            endif;
            if(!$post->post_parent && $children):?>
                <ul class="menu">
                    <?php echo $children;?>
                </ul>
            <?php elseif($post->post_parent && $children):?>
                <ul class="menu">
                    <?php echo $current_page;?>
                    <ul class="menu">
                        <?php echo $children;?>
                    </ul>
                    <?php echo $siblings;?>
                </ul>
            <?php elseif($grandparent && $post->post_parent && !$children):?>
                <ul class="menu">
                    <?php echo $parent;?>
                    <ul class="menu">
                    <?php echo $parent_children;?>
                    </ul>
                    <?php echo $parent_siblings;?>
                </ul>
            <?php elseif(!$grandparent && $post->post_parent && !$children):?>
                <ul class="menu">
                    <?php echo $parent_children;?>
                </ul>
            <?php endif;?>

It’s not the most elegant solution ever, but at least it does what I asked. The only thing that would improve on the actual functionality of this is to keep the order of the menu items while still allowing for sub menus. This code removes the menu item with a sub-menu and moves it to the top. I couldn’t figure out any other way to do this.