List items (and their ACFields) from Child pages on Parent page

• DGA

• August 29, 2018 at 2:08 pm

Hi,

Firstly – I’m relatively new to WP, ACF & PHP.

I have Parent Pages which will each have a varying number of Child Pages.

The Child Pages are populated with ACFields.

On the Parent Page I want to display a <li> list of items – One list item per Child Page.

Each of these list items will need to output several ACFields from its respective Child Page.

I want this to work like a module – ie Where ever I place this code for this module it will output my list.

I want to be able to specify the parent from which the children items are drawn in the code.
Here’s my hybridized PHP / Plain English attempt to explain how this might work programmatically:

<?php $parent_page = 1321; ?>
<?php FOR EACH CHILD OF $parent_Page OUTPUT THE FOLLOWING { ?>
<li>
	<h2><?php the_field( 'page_title' ); ?></h2>
	<P><?php the_field( 'intro_paragraph' ); ?><p>
</li>
<?php } ?>

I have tried with the below code which achieves what I want (if on the parent page) however it seems to override the primary loop – (it doesn’t work modularly or independently of other things.)

<ul>
	<?php $this_page_id=$wp_query->post->ID; ?>
	<?php query_posts(array('showposts' => 20, 'post_parent' => $this_page_id, 'post_type' => 'page')); while (have_posts()) { the_post(); ?>
	<li>
		<a href="<?php echo get_permalink(); ?>">
			<h2><?php the_field('page_title'); ?></h2>
			<p><?php the_field('intro_paragraph'); ?></p>
		</a>
	</li>
	<?php } ?>
</ul>

It looks like to achieve what I’m after I should not use query_posts but some other method of defining the children.

The below code allows me to set the parent page id (1318 in the example).
It outputs the Child’s ‘post title’ but not the Child’s ACFields or the child’s permalink.

<?php
$childArgs = array('sort_order' => 'ASC', 'sort_column' => 'menu_order', 'child_of' => 1318);
$childList = get_pages($childArgs);
foreach ($childList as $child) { ?>
    <div>
        <h2><?php echo $child->post_title; ?></h2>
		<h3><?php the_field( 'page_title' ); ?></h3>
		<p><?php the_field('intro_paragraph'); ?></p>
        <a href="<?php echo get_permalink(); ?>">...more</a>
    </div>
<?php } ?>

Q) Does anyone know how to achieve what Im after?

• John Huebner

• August 29, 2018 at 10:16 pm

You need to use WP_Query, see the usage information at the top [wp_reset_postdata()]

You should avoid query_posts() because it overwrites the main query. This function is rarely safe to use https://wordpress.stackexchange.com/questions/1753/when-should-you-use-wp-query-vs-query-posts-vs-get-posts

• treesandbicycles

• September 20, 2018 at 9:59 am

I have a solution for you! I used the code from the bottom of Function Reference/get pages

and figured out by trial and error that <?php echo the_field('your_field_id', $page->ID); ?> does the trick to display field data from the child pages.

Final code (including post thumbnail if you want):

<?php
	$mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'post_date', 'sort_order' => 'desc' ) );

	foreach( $mypages as $page ) {		
		$content = $page->post_content;
		if ( ! $content ) // Check for empty page
			continue;

		$content = apply_filters( 'the_content', $content );
	?>
		<?php echo get_the_post_thumbnail($page->ID); ?>
		<h2><a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a></h2>
		<p>Custom field info: <?php echo the_field('your_field_id', $page->ID); ?> </p>
		<div class="entry"><?php echo $content; ?></div>
	<?php
	}	
?>