Put Child Page Content on Parent Page in WordPress

The other day I was working on a documentation site in WordPress and came across an interesting problem. The documentation was lengthy in certain sections, so I wanted to find a way to keep those sections on one page for the reader but allow for a little more organization in the backend so it would be easier for the client to update the docs in the future.

The content was already set up fairly intuitively as pages on the backend:

1. Parent Page
   1.1 Child Page
   1.2 Child Page
   1.3 Child Page
2. Parent Page
   2.1 Child Page
   2.2 Child Page

• Grandchild Page
• etc.

This meant that the pages were already alphabetically named because of the numbers in their titles and had the appropriate heirarchy. So the goal now was to have the parent pages include not only their own content, but the content of their child pages with their titles as well. Here's what I came up with:

<div class="entry-content">
    <?php the_content(); ?>

    <?php
        $childArgs = array(
            'sort_order' => 'ASC',
            'sort_column' => 'menu_order',
            'child_of' => get_the_ID()
        );
        $childList = get_pages($childArgs);
        foreach ($childList as $child) { ?>
            <div class="child-page">
                <h2 class="child-title"><?php echo $child->post_title; ?></h2>
                <?php echo apply_filters( 'the_content', $child->post_content); ?>
            </div>
        <?php } ?>

    <?php
        $pagelist = get_pages('sort_column=menu_order&sort_order=asc&parent=0');
        $pages = array();
        foreach ($pagelist as $page) {
            $pages[] += $page->ID;
        }

        $current = array_search(get_the_ID(), $pages);
        $prevID = $pages[$current-1];
        $nextID = $pages[$current+1];
    ?>

    <ul class="page-nav">
        <?php if (!empty($prevID)) { ?>
            <li class="previous">
                <a href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>"><span aria-hidden="true">&larr;</span> <?php echo get_the_title($prevID); ?></a>
            </li>
        <?php }
        if (!empty($nextID)) { ?>
            <li class="next">
                <a href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>"><?php echo get_the_title($nextID); ?> <span aria-hidden="true">&rarr;</span></a>
            </li>
        <?php } ?>
    </ul><!-- .navigation -->
</div>

Step 1: Get the current page's children

$childArgs = array(
	'sort_order' => 'ASC',
    'sort_column' => 'menu_order',
    'child_of' => get_the_ID()
);
$childList = get_pages($childArgs);

Step 2: Loop through the pages

foreach ($childList as $child) {
	<div class="child-page">
    	<h2 class="child-title"><?php echo $child->post_title; ?></h2>
        <?php echo apply_filters( 'the_content', $child->post_content); ?>
    </div>
}

Step 3: Change Prev and Next Buttons to only Parent Pages

Since I was grabbing the content from these children pages to display on the parent page, I don't want to reader to see them all twice when using the prev and next buttons on each page, so I made sure those were only navigating through the parent pages.

<?php
	$pagelist = get_pages('sort_column=menu_order&sort_order=asc&parent=0');
    $pages = array();
    foreach ($pagelist as $page) {
        $pages[]  = $page->ID;
    }

    $current = array_search(get_the_ID(), $pages);
    $prevID = $pages[$current-1];
    $nextID = $pages[$current 1];
?>
 
<ul class="page-nav">
    <?php if (!empty($prevID)) { ?>
        <li class="previous">
            <a href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>"><span aria-hidden="true">←</span> <?php echo get_the_title($prevID); ?></a>
        </li>
    <?php }
    if (!empty($nextID)) { ?>
        <li class="next">
            <a href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>"><?php echo get_the_title($nextID); ?> <span aria-hidden="true">→</span></a>
        </li>
    <?php } ?>
</ul>

That's my solution to a very particular problem, but hopefully it is somewhat helpful to you as you think about how to display unusual content in your projects. See anything I could improve or have any other ideas? I'd love to hear them!