Display Sibling Pages

Posted on 16th September, 2017 Leave a Comment

To display the sibling pages of the current page, create a template part with the following content:

<?php 
global $post;
$direct_parent = $post->post_parent;
$args = array(
    'post_type'      => 'page',
    'posts_per_page' => -1,
    'post_parent'    => $direct_parent, // Get this pages id and find the children
    'order'          => 'ASC',
    'orderby'        => 'menu_order',
    'post__not_in' => array( $post->ID ),
 );


$parent = new WP_Query( $args );

if ( $parent->have_posts() ) : ?>

<section class="child-grid padding">

   <?php while ( $parent->have_posts() ) : $parent->the_post(); 
	 	// Featured image
		 $feat_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "full", true);
   ?>
		<div class="child">
			<a href="<?php the_permalink()?>" class="background-cover anim" style="background-image: url(<?php echo $feat_image[0]; ?>);">
				<span class="block">
					<h3 class="title oversized"><?php the_title(); ?></h3>
					<span class="button">Explore</span>
				</span>
			</a>
		</div><!-- /.child -->
  <?php endwhile; ?>

</section><!-- /.child-grid -->

<?php endif; wp_reset_query(); ?>

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]