Display child pages within parent in WordPress

page-customfield-3.php

<!-- this file is included both on the child pages template and the page-parent.php template. This works 100% on the child page but not via page-parent -->

<link rel="stylesheet" type="text/css" href="/assets/css/slick.css"/>

<script type="text/javascript" src="/assets/js/slick.js"></script>






<?php if( get_field('use_slider') ) { ?>

	<?php include ('slider-with-logos.php') ?>

<?php } elseif ( get_field('large_base_image') ){ ?>

   
 <div class="entry-image-content-container"><p>
    	<?php echo get_post_meta($page->ID, 'large_base_image', true); ?>
    </p></div>


<?php } elseif ( get_field('use_screenshot_slider') ){ ?>

<?php include ('screenshot-slider.php') ?>

<?php } else { ?>


<?php } ?>

page-parent.php

<!-- This is part of the page-parent.php page template. The below code currently gets the content of the child pages -->


<div id="child-pages">
<?php
	$pages = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=asc');
	$count = 0;
	foreach($pages as $page)
	{
		$content = $page->post_content;
		if(!$content)
			continue;
		if($count >= 5)
			break;
		$count++;
		$content = apply_filters('the_content', $content);
	?>
		<div class="entry-title-wrap"><h1 class="child-title"><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h1></div>
		<div class="entry-content"><p><?php echo apply_filters('the_content', $page->post_content); ?> </p></div>
       <div class="entry-image-content"><p><?php include ('page-customfield-3.php') ?></p></div> <!-- this includes a file containing a slider and php if. Currently I cannot get this include to work -->
	<?php
	}
?>		</div>

screenshot-slider.php

<?php 

$imageslide1 = get_field('screenshot_slide_1');

if( !empty($imageslide1) ): 

	// vars
	$urlslide1 = $imageslide1['url'];
	$altslide1 = $imageslide1['alt'];

	// full
	$sizeslide1 = 'large';
	$fullslide1 = $imageslide1['sizes'][ $sizeslide1 ];
	$widthslide1 = $imageslide1['sizes'][ $sizeslide1 . '-width' ];
	$heightslide1 = $imageslide1['sizes'][ $sizeslide1 . '-height' ];

	?>
    <?php 

$imageslide2 = get_field('screenshot_slide_2');

if( !empty($imageslide2) ): 

	// vars
	$urlslide2 = $imageslide2['url'];
	$altslide2 = $imageslide2['alt'];

	// full
	$sizeslide2 = 'large';
	$fullslide2 = $imageslide2['sizes'][ $sizeslide2 ];
	$widthslide2 = $imageslide2['sizes'][ $sizeslide2 . '-width' ];
	$heightslide2 = $imageslide2['sizes'][ $sizeslide2 . '-height' ];

	?>
    <?php 

$imageslide3 = get_field('screenshot_slide_3');

if( !empty($imageslide3) ): 

	// vars
	$urlslide3 = $imageslide3['url'];
	$altslide3 = $imageslide3['alt'];

	// full
	$sizeslide3 = 'large';
	$fullslide3 = $imageslide3['sizes'][ $sizeslide3 ];
	$widthslide3 = $imageslide3['sizes'][ $sizeslide3 . '-width' ];
	$heightslide3 = $imageslide3['sizes'][ $sizeslide3 . '-height' ];

	?>

    <?php 

$imageslide4 = get_field('screenshot_slide_4');

if( !empty($imageslide4) ): 

	// vars
	$urlslide4 = $imageslide4['url'];
	$altslide4 = $imageslide4['alt'];

	// full
	$sizeslide4 = 'large';
	$fullslide4 = $imageslide4['sizes'][ $sizeslide4 ];
	$widthslide4 = $imageslide4['sizes'][ $sizeslide4 . '-width' ];
	$heightslide4 = $imageslide4['sizes'][ $sizeslide4 . '-height' ];

	?>



<div class="entry-image-content-container"><p>

<div class="screenshot-slider-logo"><img src="<?php echo the_field('software_logo') ?>" /></div>
<div class="slider screenshot-center">
					<div id="screeshot-slide" style="float:left;" ><img class="img-nav" src="<?php echo $fullslide1; ?>" alt="<?php echo $altslide1; ?>" width="<?php echo $widthslide1; ?>" height="<?php echo $heightslide1; ?>" /></div>
					<div id="screeshot-slide" style="float:left;"><img class="img-nav" src="<?php echo $fullslide2; ?>" alt="<?php echo $altslide2; ?>" width="<?php echo $widthslide2; ?>" height="<?php echo $heightslide2; ?>" /></div>
					<div id="screeshot-slide" style="float:left;"><img class="img-nav" src="<?php echo $fullslide3; ?>" alt="<?php echo $altslide3; ?>" width="<?php echo $widthslide3; ?>" height="<?php echo $heightslide3; ?>" /></div>
                    <div id="screeshot-slide" style="float:left;"><img class="img-nav" src="<?php echo $fullslide4; ?>" alt="<?php echo $altslide4; ?>" width="<?php echo $widthslide4; ?>" height="<?php echo $heightslide3; ?>" /></div>
                  
		

</div>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>


</p></div>

slider-with-logos.php

<?php 

$imagehover1 = get_field('slide_1_icon_hover');

if( !empty($imagehover1) ): 

	// vars
	$urlhover1 = $imagehover1['url'];
	$althover1 = $imagehover1['alt'];

	// full
	$sizehover1 = 'large';
	$fullhover1 = $imagehover1['sizes'][ $sizehover1 ];
	$widthhover1 = $imagehover1['sizes'][ $sizehover1 . '-width' ];
	$heighthover1 = $imagehover1['sizes'][ $sizehover1 . '-height' ];

	?>
    <?php 

$imagehover2 = get_field('slide_2_icon_hover');

if( !empty($imagehover2) ): 

	// vars
	$urlhover2 = $imagehover2['url'];
	$althover2 = $imagehover2['alt'];

	// full
	$sizehover2 = 'large';
	$fullhover2 = $imagehover2['sizes'][ $sizehover2 ];
	$widthhover2 = $imagehover2['sizes'][ $sizehover2 . '-width' ];
	$heighthover2 = $imagehover2['sizes'][ $sizehover2 . '-height' ];

	?>
    <?php 

$imagehover3 = get_field('slide_3_icon_hover');

if( !empty($imagehover3) ): 

	// vars
	$urlhover3 = $imagehover3['url'];
	$althover3 = $imagehover3['alt'];

	// full
	$sizehover3 = 'large';
	$fullhover3 = $imagehover3['sizes'][ $sizehover3 ];
	$widthhover3 = $imagehover3['sizes'][ $sizehover3 . '-width' ];
	$heighthover3 = $imagehover3['sizes'][ $sizehover3 . '-height' ];

	?>




<div class="entry-image-content-container"><p>

<div id="control_navigation">
<div class="slider slider-with-logo-logos">
										<div style="float:left;" class="slick-active"><img class="img-nav" src="<?php echo $fullhover1; ?>" alt="<?php echo $althover1; ?>" width="<?php echo $widthhover1; ?>" height="<?php echo $heighthover1; ?>" /></div>
					<div style="float:left;"><img class="img-nav" src="<?php echo $fullhover2; ?>" alt="<?php echo $althover2; ?>" width="<?php echo $widthhover2; ?>" height="<?php echo $heighthover2; ?>" /></div>
					<div style="float:left;"><img class="img-nav" src="<?php echo $fullhover3; ?>" alt="<?php echo $althover3; ?>" width="<?php echo $widthhover3; ?>" height="<?php echo $heighthover3; ?>" /></div>
		
        
			</div>

<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
<button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>


<div class="slider slider-with-logo-content">
<div><img src="<?php the_field('slide_1'); ?>" /></div>
<div><img src="<?php the_field('slide_2'); ?>" /></div>
<div><img src="<?php the_field('slide_3'); ?>" /></div>
</div>

</p></div>