Updated:
You have multiple options here.
- You could just insert the images and child-page-titles as normal content in your parent page (this is the easiest solution)
- You can edit the existing
page.php(or similar, depends on theme) file inside your theme folder - You can create a new page-template file to use as a parent-page template
- You can use a shortcode
I personally think that using a shortcode is the best option, as it is theme independent. So if you change the theme in the future this function will continue to work.
There are already multiple existing plugins out there to display child-pages, they will do exactly what you want.
However I want to provide a simple code to do just that.
You should create a new plugin or insert the below code inside your functions.php
After this you can insert the shortcode [show_childpages] inside a parent-page, and if this page has children, they will be listed.
Keep in mind, this is just a bare minimum setup:
function show_childpages_shortcode() {
// a shortcode should just return the content not echo html
// so we start to create an object, and on the end we return it
// if we dont do this the shortcode will be displayed in the top of the content
ob_start();
// only start if we are on a single page
if ( is_page() ) {
// get the ID of the current (parent) page
$current_page_id = get_the_ID();
// get all the children of the current page
$child_pages = get_pages( array(
'child_of' => $current_page_id,
) );
// start only if we have some childpages
if ($child_pages) {
// if we have some children, display a list wrapper
echo '<ul class="childpages">';
// loop trough each childpage
foreach ($child_pages as $child_page) {
$page_id = $child_page->ID; // get the ID of the childpage
$page_link = get_permalink( $page_id ); // returns the link to childpage
$page_img = get_the_post_thumbnail( $page_id, 'medium' ); // returns the featured image <img> element
$page_title = $child_page->post_title; // returns the title of the child page
?>
<li class="childpage-<?php echo $page_id; ?>">
<a href="https://wordpress.stackexchange.com/questions/268596/<?php echo $page_link; ?>">
<h4><?php echo $page_title; ?></h4>
<?php echo $page_img; //display featured image ?>
</a>
</li>
<?php
}//END foreach ($child_pages as $child_page)
echo '</ul>';
}//END if ($child_pages)
}//END if (is_page())
// return the object
return ob_get_clean();
}
add_shortcode( 'show_childpages', 'show_childpages_shortcode' );
This will create an unordered list, each child-page is a single listitem, with a link, title and image.
You can than style the list using normal CSS.