How to List Child Pages or Subpages in WordPress?

Posted by on Jan 26, 2014 in WordPress ·

WordPress pages can be arranged in hierarchical form. The main page is called as the parent page and its sub-pages are called as child pages. We many times need to list the child pages of a parent page. This tutorial will tell you how to do that.

Listing Child Pages in WordPress

Listing child pages in WordPress

WordPress function – wp_list_pages()

The WordPress function wp_list_pages() lists the pages, according to the arguments passed. Here is a basic example of the function usage to list child pages of current page.

<?php
$list_p = array(
  'sort_column' => 'menu_order, post_title',
  'title_li' => 'Pages :',
  'child_of' => $post->ID,
);
wp_list_pages( $list_p );
?>

Here, we created an array of arguments and then passed it to the function. To know all the possible arguments of this function, refer WordPress Codex.

Paste the above code in your theme’s page.php file or any custom page template file, wherever you want to display the output. It will list out all the child pages in hierarchical manner.

Siblings of a child page

Let’s assume a hierarchy of pages :

Parent Page 1
— Child 1
— Child 2
— Child 3

When, the code is pasted on Child 2, nothing will be shown. Because, it doesn’t have any child. However, it itself is a child.

If you want to list its siblings, it is also possible. You can first check if its has a parent page and if it does, then list them.

To do this, replace the above code entirely with the following code.

<?php
if(!$post->post_parent) $my_page_id = $post->ID;
elseif($post->ancestors) $my_page_id = end($post->ancestors);

$list_p = array(
 'sort_column' => 'menu_order, post_title',
 'title_li' => 'Pages :',
 'child_of' => $my_page_id,
);
wp_list_pages( $list_p );
?>

In the above code, we added two extra lines. We first checked if the page has no parent. If so, the page itself became the parent. But, if a page has parent then its ancestor became the parent.

In this way, the whole hierarchy is shown on the parent page as well as the child pages.

For Genesis and Thesis frameworks

We can modify Genesis and Thesis themes directly. However, it is not a proper way to do so. Both these themes provide their own hooks, so that you can add your piece of code in between.

Paste the following code in the child theme’s functions.php file.

For Genesis :

<?php
function list_my_child_pages( $post ) {
if(!$post->post_parent) $my_page_id = $post->ID;
elseif($post->ancestors) $my_page_id = end($post->ancestors);

$list_p = array(
'sort_column' => 'menu_order, post_title',
'title_li' => 'Pages :',
'child_of' => $my_page_id,
);
wp_list_pages( $list_p );
}
add_action('genesis_before_post_content','list_my_child_pages');
?>

For Thesis :

<?php
function list_my_child_pages( $post ) {
if(!$post->post_parent) $my_page_id = $post->ID;
elseif($post->ancestors) $my_page_id = end($post->ancestors);

$list_p = array(
'sort_column' => 'menu_order, post_title',
'title_li' => 'Pages :',
'child_of' => $my_page_id,
);
wp_list_pages( $list_p );
}
add_action('thesis_hook_before_post','list_my_child_pages');
?>

CSS effects to the page list

The list of children is returned by WordPress in systematic manner. The three important CSS classes are :

.current_page_item .children { /* Your CSS Here */ }
.current_page_ancestor .children { /* Your CSS Here */ }
.current_page_parent .children { /* Your CSS Here */ }

The names of the classes are self-explanatory. The first line is for the children of a page, shown on that page itself. The second line is for the page’s ancestor page and the third one is for the page’s parents.

This was all about how to list child pages of a page in WordPress. In case of any problem, do not hesitate to comment below. I would be glad to help you out.

2 Comments on “How to List Child Pages or Subpages in WordPress?”

  1. I have tried to use this code for Genesis child theme but it’s not showing up anything. Pl. let me know.

    thanks,

    1. Hi!

      Genesis has its own functions/hooks. Normal WordPress code snippets may not work on it. Please ask their support team about the same.

Leave a Reply