Loop and Print Page Children Content in WordPress

This is ideal for when you need to loop through pages to create a list or grid of page content.  Wordpress makes this pretty simple for posts, but it’s not so easy for pages.

In this case I am trying to generate a list of all children of the “Ambassadors” page and create clickable links.

Set up the WP Query

<?php
    // Set up the objects needed
    $my_wp_query = new WP_Query();
    $all_wp_pages = $my_wp_query->query(array('post_type' => 'page', 'orderby' => 'menu_order title'));

    // Get the page as an Object
    $ambassadorPage =  get_page_by_title('Ambassadors');

    // Filter through all pages and find Portfolio's children
    $ambassadorPageChildren = get_page_children( $ambassadorPage->ID, $all_wp_pages );
    $childIds = array();
    // Get the IDs so you can loop through a page as normal
    foreach ($ambassadorPageChildren as $childData) {
        $childIds[] = $childData->ID;

    }
    ?>

Loop through the content

<?php // By using a foreach you can use normal printout fields like the_title() etc.
        foreach ($childIds as $childId) { ?>
            <?php $pageloop = new WP_Query("page_id=" . (int) $childId); ?>
                <?php while ( $pageloop->have_posts() ) : $pageloop->the_post(); ?>
                    <div class="small-12 medium-6 large-3 columns">
                        <article id="post-<?php the_ID(); ?>">
                            <a href="<?= get_the_permalink(); ?>"><img src="<?php echo the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>"></a>
                            <header>
                                <p>Ambassador</p>
                                <h2 class="entry-title"><?php the_title(); ?></h2>
                                <h3><?php echo the_field('ambassador_specialism'); ?></h3>
                            </header>
                            <div>
                                <footer>
                                    <p><a href="<?= get_the_permalink(); ?>">Read More</a></p>
                                </footer>
                        </article>
                    </div>
                <?php endwhile;?>
            <?php wp_reset_postdata(); ?>
        <?php } ?>