2

I used this answer's code to generate a widget that displays all subpages of the parent's page:

if (is_page()) {
  global $wp_query;

  if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
  } else {
    $parent = $wp_query->post->post_parent;
  }

  if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
    wp_list_pages("title_li=&child_of=$parent&echo=1" );
  }
}

I now realise this does not cope if I am in a grandchild page, in that the uncles and aunties are not displayed, only the parents.

I don't understand how I can adapt this code to display more than 2 levels of menu tree.

Help appreciated.

3
+50

Here is a function that will output the top level parent along with all of the children of the current page. Helpful menu classes are added to the output. E.g. page_item_has_children, current_page_item, current_page_ancestor, etc.

This solution is based on one of the examples in the documentation for wp_list_pages() and this answer here on WPSE, which references the same example.

/**
 * Use wp_list_pages() to display parent and all child pages of current page.
 */
function wpse_get_ancestor_tree() {
    // Bail if this is not a page.
    if ( ! is_page() ) {
      return false;
    }

    // Get the current post.
    $post = get_post();

    /**
     * Get array of post ancestor IDs.
     * Note: The direct parent is returned as the first value in the array.
     * The highest level ancestor is returned as the last value in the array.
     * See https://codex.wordpress.org/Function_Reference/get_post_ancestors
     */
    $ancestors = get_post_ancestors( $post->ID );

    // If there are ancestors, get the top level parent.
    // Otherwise use the current post's ID.
    $parent = ( ! empty( $ancestors ) ) ? array_pop( $ancestors ) : $post->ID;

    // Get all pages that are a child of $parent.
    $pages = get_pages( [
                     'child_of' => $parent,
                     ] );

    // Bail if there are no results.
    if ( ! $pages ) {
        return false;
    }

    // Store array of page IDs to include latere on.
    $page_ids = array();
    foreach ( $pages as $page ) {
        $page_ids[] = $page->ID;
    }

    // Add parent page to beginning of $page_ids array.
    array_unshift( $page_ids, $parent );

    // Get the output and return results if they exist.
    $output = wp_list_pages( [
        'include'  => $page_ids,
        'title_li' => false,
        'echo'     => false,
    ] );

    if ( ! $output ) {
        return false;
    } else { 
        return '<ul class="page-menu ancestor-tree">' . PHP_EOL .
                            $output . PHP_EOL .
                        '</ul>' . PHP_EOL;
    }
}

Usage:

echo wpse_get_ancestor_tree();

Example Page Structure:

Parent Page
  Child Page 01
  Child Page 02
  Child Page 03
    Grandchild Page
      Great Grandchild Page
  Child Page 04
  Child Page 05

Example Output (current page: Great Grandchild Page)

<ul class="page-menu ancestor-tree">
    <li class="page_item page-item-1088 page_item_has_children current_page_ancestor">
        <a href="http://example.com/parent-page/">Parent Page</a>
        <ul class="children">
            <li class="page_item page-item-1090">
                <a href="http://example.com/parent-page/child-page-01/">Child Page 01</a>
            </li>
            <li class="page_item page-item-1092">
                <a href="http://example.com/parent-page/child-page-02/">Child Page 02</a>
            </li>
            <li class="page_item page-item-1094 page_item_has_children current_page_ancestor">
                <a href="http://example.com/parent-page/child-page-03/">Child Page 03</a>
                <ul class="children">
                    <li class="page_item page-item-1102 page_item_has_children current_page_ancestor current_page_parent">
                        <a href="http://example.com/parent-page/child-page-03/grandchild-page/">Grandchild Page</a>
                        <ul class="children">
                            <li class="page_item page-item-3066 current_page_item">
                                <a href="http://example.com/parent-page/child-page-03/grandchild-page/great-grandchild-page/">Great Grandchild Page</a>
                            </li>
                        </ul>
                </li>
            </ul>
        </li>
        <li class="page_item page-item-1096">
            <a href="http://example.com/parent-page/child-page-04/">Child Page 04</a>
        </li>
        <li class="page_item page-item-1098">
            <a href="http://example.com/parent-page/child-page-05/">Child Page 05</a>
        </li>
    </ul>
    </li>
</ul>
  • 1
    Thanks Dave. I had to use echo $this->wpse_get_ancestor_tree(); too. – Steve Apr 4 '18 at 5:19
  • Dave, what order do the child pages get displayed in? I had a child page with a larger page ID display above a child page with a smaller page ID. Thanks. – Steve Apr 17 '18 at 7:06
  • @Steve I believe that sorting options are ignored when using the include param and that results are ordered by menu_order. – Dave Romsey Apr 18 '18 at 0:12
  • 1
    Thanks Dave. How will that work if the nav items are not part of a dedicated WP menu? I don't understand menu_order in this context. – Steve Apr 18 '18 at 1:06
  • 1
    @Steve this code applies to pages, not menu items. Under the Page Attributes section, pages have a field labeled Order which is stored under the db field menu_order. – Dave Romsey Apr 18 '18 at 1:36
2

I believe you're currently only grabbing the parent, and not checking for the top level ancestor.

Try replacing:

  if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
  } else {
    $parent = $wp_query->post->post_parent;
  }

with:

if ($post->post_parent) {
    $ancestors=get_post_ancestors($post->ID);
    $root=count($ancestors)-1;
    $parent = $ancestors[$root];
} else {
    $parent = $post->ID;
}

As per: https://css-tricks.com/snippets/wordpress/find-id-of-top-most-parent-page/

  • Thanks Alex. That actually displayed all pages and their subpages in the menu, rather than all subpages of the top most parent, which is what I'd like to display. – Steve Mar 29 '18 at 6:28
0

correct code:

if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
} else {
    $ancestors=get_post_ancestors($wp_query->post->ID);
    $parent = $ancestors[count($ancestors)-1];
}

it access the top-most page of the current page.

  • Please edit your answer, and add an explanation: why could that solve the problem? – fuxia Apr 3 '18 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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