WordPress – Displaying Subpages On Pages with Featured Images

I have recently been designing a blog that features a “Blog/Landing” page, an “About” page which features a picture and bio of each author, and a “Contact page”. The blog is a collaborative effort of many friends, some of whom are not tech savvy. I want the authors to easily create blog entries and edit their bio information on the “About” page. However, inputting all the bios in one page felt like it would lead to disaster, while featuring them as posts felt wrong (I personally like reserving posts for blog entries). Therefore, I decided to turn to subpages.

Displaying Subpages On Pages

Subpages are usually meant to work as the classic dropdown menu system we are all used to. However, WordPress offers documentation on how to feature subpage content on its parent page. codex.wordpress.org/Function_Reference/get_pages

Place the code below in your content-page.php file in order to display your subpage content on its parent page.

<?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 ); 	?> 		<h2><a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a></h2> 		<div class="entry"><?php echo $content; ?></div> 	<?php 	}	 ?>

Getting Featured Images to Show on Pages and Subpages

Now this is great and all, but if your blog is based off the default WordPress theme, the Featured Image system will not work for pages or subpages.

Display featured images on pages

In order to display featured images on pages, place the tag below into the loop within the page.php file.

<?php the_post_thumbnail(); ?>

Display featured images on subpages

In order to display featured images on subpages, place the tag below into the content-page.php file.

<?php echo get_the_post_thumbnail( $page->ID ); ?>

This should be placed within the code you previously inserted from the “Displaying Subpages On Pages” section, as displayed below.

<?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> 		<div class="entry"><?php echo $content; ?></div> 	<?php 	}	 ?>

Now depending on whether you want the bios to also have their own pages, you can choose to delete the subpages from the menu system and delete links from their titles.

… and Fin!

Conclusion

I now have bios featured as subpages which are displayed on their parent “About” page. With this setup my less tech savvy friends can go into their subpage and easily edit their bio and image without messing everything else up. Posts are now solely used for blog entries so there is less confusion there as well.