Dynamic menu wp_list_pages displaying only current branch including: current page, his siblings and its childs

Question

I'm trying to build a sidebar menu displaying child pages of a grandparent page, his siblings and their childs, and keep those siblings and childs available while navigating through them.

I've been looking at different and similar posts at the forum, but so far I haven't had any luck with an exact solution or something I can tweak to achieve this.

This is my pages estructure:

• Services
  • Service One
    • Service One About
    • Service One Sub-Services
      • Sub-service One A
      • Sub-service One B
      • Sub-service One C
  • Service Two
    • Service Two About
    • Service Two Sub-Services
      • Sub-service Two A
      • Sub-service Two B
      • Sub-service Two C

What I'm trying to do is:

If I'm in "Service One About", I should only show "Service One About", his siblings and its childs.

• Service One
  • Service One About [current]
  • Service One Sub-Services
    • Sub-service One A
    • Sub-service One B
    • Sub-service One C

If I'm in "Service One Sub-Services", I should only show "Service One Sub-Services", his siblings and its childs.

• Service One
  • Service One About
  • Service One Sub-Services [Current]
    • Sub-service One A
    • Sub-service One B
    • Sub-service One C

If I'm in "Sub-service One A", I should show his parent and uncle, and his siblings.

• Service One
  • Service One About
  • Service One Sub-Services
    • Sub-service One A [current]
    • Sub-service One B
    • Sub-service One C

And so on.

That said, in case it's not clear: I wan't to exclude the "Service" grandparent, as well as the whole "Service Two" branch while I'm navigating through "Service One" and viceversa.

It is very important for me to control the output of each level because I have created a custom field on the pages to use it as a CSS class. For this I'm using Toolset Types & Views and I'm planning to print this as an <?php echo do_shortcode('[some-custom-field-shortcode]') ?> as shown on the example below.

Also, it would be great if I could add a class to the current menu item, so I could mark it as the current item.

Based on my "Sub-service One A" example above, this is how my output markup should look like:

<ul class="menu">
    <li><a href="#">Service One About</a></li>
    <li><a href="#">Service One Sub-Services</a>
        <ul class="sub-menu">
            <li class="current-menu-item"><a href="#"><span class="icon [some-custom-field-shortcode]"></span> <span class="text">Sub-service One A</span></a></li>
            <li><a href="#"><span class="icon [some-custom-field-shortcode]"></span> <span class="text">Sub-service One B</span></a></li>
            <li><a href="#"><span class="icon [some-custom-field-shortcode]"></span> <span class="text">Sub-service One C</span></a></li>
        </ul>
    </li>
</ul>

Could you please give me a hand with this? I've been really fighting to achieve this with Types & Views, but their forum doesn't seem to help (other users had asked similar questions and most of them just got frustrated and ended up using a plugin like this.

Thank you so much in advance! :)

Answer 1

Basically you want to display a menu of child pages of "Sevice One" if you are in any child page of "Service One", a menu of child pages of "Service Two" if you are in any chiild page of "Service Two", and so on.

This can be done with the child_of argument of wp_list_pages. We can fill this parameter dynamically using get_post_ancestors for current page and set the before last parent as the child_of parameter (the last parent would be "Services" and the before last would be "Service One" if you are in a page child of "Service One", "Service Two" if you are in a page child of "Service Two", and so on).

To include the <span> and execute the shortocodes in that place we can use link_before and link_after arguments.

For example:

function pages_menu() {

    if( !is_page() ) {
        return false;
    }

    $page_id = get_queried_object_id();
    $ancestors = get_post_ancestors($page_id);
    $ancestors_count = count($ancestors);
    if( $ancestors_count > 1 ) {

        //the last item in $ancestors will be the top parent page, that is "Services"
        //but we want the before top parent ("Service One", "Service Two", etc)
        $top_menu_page = $ancestors[$ancestors_count - 2];

    } else {
        //We are actually on one of our top menu pages ("Service One", "Service Two", etc)
        $top_menu_page = $page_id;
    }

    $args = array(
        'child_of'    => $top_menu_page,
        'link_before' => '<span class="icon '.do_shortcode('[some-custom-field-shortcode]').'"></span> <span class="text">',
        'link_after'  => '</span>',
    );
     wp_list_pages( $args );

}

Now you can use pages_menu() to print this dynamic menu on any page.

About the classes. Current page already has the current_page_item class as you need. Also, each page class attribute is filled with a complete set of classes representing the item, including page ID, classes for pages with children, with ancestors, parent/child of current page, etc. Inspect the output to make an idea.

(I don't kmow the exact context where this code will be used. It may needs adjustment to full fit to your needs.)