I am trying to create a sidebar navigation menu, that detects what pages are related to the page you are currently viewing, and then outputs the whole hierarchy of this family-tree inside a tiered unordered list.

Afterwards I need to implement this sidebar with a shortcode.

Here is what i have so far

$isParent = wp_get_post_parent_id(get_the_ID());

function generate_side_menu() {

$pageArray = get_pages(array(
  'child_of' => get_the_ID()

if ($isParent or $pageArray) {
  echo '<ul class="Sidemenu-child">';

    if ($isParent) {
      $isChildOf = $theParent;
    } else {
      $isChildOf = get_the_ID();


      'title_li' => 'NULL',
      'child_of' => $isChildOf,
      'sort_column' => 'menu_order'

  echo '</ul>';

add_shortcode ('side_menu', 'generate_side_menu');

This works for parent pages in my menu, it's children will be be output in an unordered list under the respective parent list-item.


I need to also display the currently viewed page inside this menu.. And when viewing pages that are at the bottom of the parent hierarchy (In my case grandchildren - since I have three tiers in my menu), I also need my menu to display. Essentially, I need the entire hierarchy of the family-tree displayed at all times, no matter what page-level you are on.

Is there any less complicated way to simply output an entire family tree of pages as a menu (based on relations of the page you are viewing - including the page itself)?


I managed to solve this. The following code will generate a navigation menu, that only displays pages in the relation to the current page (so children or parents) - including the original ancestor:

    //Generate ancestor ID
function get_the_ancestor_id($post) {
    if ( $post->post_parent ) {
        $ancestors = get_post_ancestors($post->ID);
        $root = count($ancestors)-1;
        $parent = get_post($ancestors[$root]);
    } else {
        $parent = $post;
    return $parent->ID;

// Get the family tree
    function related_pages() {
        global $post;
        $parent_id = get_the_ancestor_id($post);
        $title = get_the_title($parent_id);
        $link =  get_permalink($parent_id); 
        $title = "<a href='$link' title='$title'>$title</a>";
if (  !empty($parent_id)  ) {
    $args = array(
        'title_li' => '',
        'child_of' => $parent_id,
        'echo' => 0,
        'sort_column' => 'menu_order'
    $nav = wp_list_pages($args);

 // Show menu, unless the page doesen't have relations, and make the original ancestor the active menu item, if it is the current page.

if ( !empty($nav AND is_page() && !$post->post_parent > 0)) {
        echo "<ul id=\"sidebar-subnav\">" . "<li class='current_page_item'>",$title,"</li>", $nav  . "</ul>";
    else {  
        echo "<ul id=\"sidebar-subnav\">" . "<li class='page_item'>",$title,"</li>", $nav  . "</ul>";   

//Add the shortcode
add_shortcode ('nav_menu', 'related_pages');

Your Answer

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

Browse other questions tagged or ask your own question.