[resolved] How to list all root pages and child pages of current page? (14 posts)

  1. agressli
    Posted 3 years ago #

    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!

  2. wpismypuppet
    Posted 3 years ago #

    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.


  3. Drew Jaynes
    Docs Czar
    Posted 3 years ago #

    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.

  4. agressli
    Posted 3 years ago #

    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.. ;\

  5. wpismypuppet
    Posted 3 years ago #

    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?

  6. agressli
    Posted 3 years ago #

    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..

  7. wpismypuppet
    Posted 3 years ago #

    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?

  8. agressli
    Posted 3 years ago #

    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: http://wordpress.org/extend/plugins/hierarchical-pages/
    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!

  9. wpismypuppet
    Posted 3 years ago #

    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.

  10. agressli
    Posted 3 years ago #

    Thanks! :) I'll look into it!

  11. keesiemeijer
    Posted 3 years ago #

    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); ?>
  12. agressli
    Posted 3 years ago #

    Found this: http://wordpress.mfields.org/2010/selective-page-hierarchy-for-wp_list_pages/

    Does exactly what I want :)

  13. wpismypuppet
    Posted 3 years ago #

    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.

  14. agressli
    Posted 3 years ago #

    Ah, I forgot. Sorry!

Topic Closed

This topic has been closed to new replies.

About this Topic