Child Pages on Parent Page and Sibling Pages on Child Pages

A user asks:

I have a parent page with 10 child pages. I will display a sidebar where I display links to the child pages. This sidebar has to show on the masterpage but also on the childpages.

Is there a way to do this in the query builder?

This Pro tutorial for Bricks users shows how we can define a custom function that returns an array of post IDs of the current post’s (can be a Page or any hierarchical post type) children if it has children or that of the sibling posts + the current post if it has a parent – to be used in a single post template.

Given

after implementing this tutorial,

on a parent Page:

on a child Page:

on other Pages:

Step 1

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php 

function bl_get_child_pages_ids() {
	$child_pages_ids = [];
	
	$args = [
		'post_parent' => get_the_ID(),
		'post_type' => 'page',
		'posts_per_page' => 100, // Set a high number to make sure all child Pages are returned
		'orderby' => 'title',
		'order' => 'ASC'
	];

	$child_pages = get_posts( $args );

	if ( $child_pages ) { // if the current Page has children
		foreach ( $child_pages as $child_page ) {
			$child_pages_ids[] = $child_page->ID;
		}
	} else { // if the current Page has no child Pages
		$args = [
			'post_parent' => wp_get_post_parent_id(),
			'post_type' => 'page',
			'posts_per_page' => 100, // Set a high number to make sure all child Pages are returned
			'orderby' => 'title',
			'order' => 'ASC'
		];

		$parent_child_pages = get_posts( $args );

		if ( $parent_child_pages ) {
			foreach ( $parent_child_pages as $parent_child_page ) {
				$child_pages_ids[] = $parent_child_page->ID;
			}
		}
	}

	return $child_pages_ids;
}

Step 2

Add the code from Adding active class to the current term/post in a Bricks query loop on Term archives/single posts tutorial.

Step 3

Edit the Template that applies to singular Pages (or your CPT) with Bricks.

Enable query loop on a Block in a Container for the output.

Enable PHP query editor and paste:

return [
  'post_type' => 'page', // set your post type here
  'posts_per_page' => 100, // a large number 
  'no_found_rows' => true,
  'post__in' => bl_get_child_pages_ids(),
  'orderby' => 'post__in',
];

For the query-enabled block, add this custom CSS:

%root%.active a {
  color: var(--action-dark);
}

For the above CSS to work, you should add it either to a class or ensure that “Add Element ID & class as needed” is not enabled.

Replace var(--action-dark) with a hex color value if you are not using ACSS.

Also add a class attribute like this:

{echo:bl_maybe_set_active_class}