Support » Fixing WordPress » How to list all root pages and child pages of current page?

  • Resolved agressli


    Hi. I was wondering if someone could help me with this..

    I’d like the end result to look like this:

    1. Top-level 1
    2. Top-level 2
      1. Child 1
      2. Child 2 (current page)
        1. Grand Child 1
        2. Grand Child 2
        3. Grand Child 3
        4. Grand Child 4
      3. Child 3
      4. Child 4
    3. Top-level 3
    4. Top-level 4

    So basically it means that the list always shows the top-level pages.
    When on one of the top-level pages it’s children is listed as well, and when on one of the children the grand children is listed as well and so on..

    Anyone know how to do this? 🙂
    Thanks in advance!

Viewing 13 replies - 1 through 13 (of 13 total)
  • wpismypuppet


    If I’m not mistaken, I believe you are looking to use wp_list_pages(). Read up on this and let me know if it helps you out.

    Drew Jaynes


    WordPress Core Developer

    Hi agressli,

    You can do this programmatically with wp_list_pages, but there are also several plugins in the repository that can do it for you.

    Also, more results.

    Thanks for getting back to me, guys! 🙂

    I’ve tried using wp_list_pages..

    However I can’t figure out how to list the pages like described above. I’m either stuck with multiple lists or one listing the whole hierarchical tree.. ;\



    I guess I’m confused… I use this:

    echo '<ol>';
    wp_list_pages( array( 'title_li' => null ) );
    echo '</ol>';

    And I get a list of all my pages that looks like what you have above. What are you trying to accomplish?

    I guess I could describe it better.. 🙂

    In my example above the current page is Child 2. If I use the code you’re suggesting, and any of the other top-level pages or the other childrens have sub-pages as well, all of them will be listed. And I don’t want all pages to be shown. Only the ones relevant to the current page.

    I only want the current page and it’s children, siblings, ancestors and the top-level pages.

    If that made any sense..



    AHHHH… that makes much more sense. And in re-reading your OP, I see that you did say that. I apologize… it was a long weekend. In this case, I would use:

    and combine CSS to hide/show what you want. What’s nice about wp_nav_menu() is that you can fully customize it if you know how to create a custom Walker. Not needed in your case. The wp_nav_menu adds a class “current-menu-item” to, well… the current menu item 🙂 Using that class, you can “show” it’s children. If that class doesn’t exist, “hide” the sub menus. Make sense?

    No worries, it’s okey 🙂

    Hide/Show with CSS isn’t really that clean though.. ;\ And wp_nav_menu isn’t that great for this scenario as I have to manually add pages to the menu. The website currently consists of a 4 level menu with 220 different pages, and counting XD

    So adding pages manually each time I add another one is quite annoying. But thanks anyway 🙂 I guess that would be best on a smaller website!
    However I found this plugin:
    So I guess I’ll just prepare the section for a widget-area instead.

    Would be nice to know how to do it with wp_list_pages though!



    wp_list_pages allows for a custom Walker… you can do it that way, but it’s programming and knowing how the Walker class works. I have done similar Walkers with the menu system.

    Here’s an article that uses a simple function hook to accomplish some things. It also has an example of a simple Walker for the wp_list_pages function:

    Good luck.

    Thanks! 🙂 I’ll look into it!

    Moderator keesiemeijer


    I think this will do what you want:

    	// default args for wp_list_pages (show only top level pages)
    	$args = array('depth' => 1);
    	if(is_page()) {
    		// get top level page ID from current page
    		$parents = get_post_ancestors( $post->ID );
    		$parent = ($parents) ? $parents[count($parents)-1]: $post->ID;
    		// get all top level pages
    		$pages = get_pages('parent=0');
    		if ($pages) {
    			$pageids = array();
    			foreach ($pages as $page) {
    				$pageids[]= $page->ID;
    				// check page is the same as the top level page of the current page
    				if($page->ID == $parent) {
    					$children = get_pages('child_of='.$parent);
    					if($children) {
    						foreach ($children as $child) {
    							if($child->post_parent == $parent) {
    								$pageids[]= $child->ID;
    							if( in_array($child->post_parent,$parents)) {
    								$pageids[]= $child->ID;
    							if($child->post_parent == $post->ID) {
    								$pageids[]= $child->ID;
    			$pageids = array_unique($pageids);
    			// new args for wp_list_pages
    			$args = array('include' =>	$parent . ',' . implode(",", $pageids));
    	// add other default wp_list_pages args than "include" here
    	$args['title_li'] = '';
    <?php 	wp_list_pages($args); ?>

    Found this:

    Does exactly what I want 🙂



    Good find… and clean code. I like it! Glad it all worked out. You should mark this as resolved so people know you’re all set.

    Ah, I forgot. Sorry!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to list all root pages and child pages of current page?’ is closed to new replies.