Add Parent to List of Subpages

This code works well to display child pages of the parent page while viewing both the parent page and child page. It doesn’t apply the current_page_item CSS class to the parent while viewing it (and only it, not interested in it being applied while on the children) – any suggestions?

<ul class="subpages">
<?php
  if($post->post_parent)
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
  else
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  if ($children) {
$parent_title = get_the_title($post->post_parent);?>
<li><a href="<?php echo get_permalink($post->post_parent) ?>" rel="nofollow noreferrer noopener"><?php echo $parent_title;?></a></li>
  <?php echo $children; ?>
  <?php } ?>
</ul>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If I understand what you want, it is trickier than it should be to get it working.

$ancestors = array();
$ancestors = get_ancestors($post->ID,'page');
$parent = (!empty($ancestors)) ? array_pop($ancestors) : $post->ID;
if (!empty($parent)) {
  $pages = get_pages(array('child_of'=>$parent));
  if (!empty($pages)) {
    $page_ids = array();
    foreach ($pages as $page) {
      $page_ids[] = $page->ID;
    }
    $children = wp_list_pages("include=".$parent.','.implode(',',$page_ids)."&echo=1");
    echo '<ul>'.$children.'</ul>'; 
  }
}

You have to get a list of all of your pages and pass them in the include parameter. The basic technique is listed in the Codex. The above is nearly a copy, in fact.

That will give you current_page_ancestor on all ancestor pages and current_page_parent on the immediate parent only. That should be sufficient.

If you notice I have included the top-level parent in the page list. Your code only does that sometimes. I don’t know if that is by design or not, but I included it. You should be able to add or remove that page to match whatever logic you need.

Method 2

Solution for your problem
Try it

1.get_page()

2.get_pages()

    <style>
    .current-menu-item a {
        color: red;
    }
    </style>
    <ul class="subpages">
    <?php
        if($post->post_parent){
            $children = get_pages("child_of=".$post->post_parent);
            $parent_title = get_the_title($post->post_parent);
            $link = get_permalink($post->post_parent);
        }
        else{
            $children = get_pages("child_of=".$post->ID);
            $parent_title = get_the_title($post->ID);
            $link = get_permalink($post->ID);
            $parent_page = $post->ID;
        }
        if ($children) {
        ?>
            <li <?php if( !empty($parent_page) && $parent_page==$post->ID){echo 'class="current-menu-item"';} ?>><a href="<?php echo $link; ?>" rel="nofollow noreferrer noopener"><?php echo $parent_title;?></a></li>
            <?php 
                foreach( $children as $post ) : setup_postdata($post); 
            ?>
                    <li <?php if(is_page($post->ID)){echo 'class="current-menu-item"';} ?>>
                        <a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener"><?php the_title(); ?></a>
                    </li>
            <?php 
                endforeach;
            ?>
        <?php 
        }
        ?>
    </ul>

3.Note:Remove css style at top of my code when your test complete and apply your own css code.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0