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>