Generate a Menu that displays all child pages of top level parent

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.

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>