Adjacent Posts Bricks Query Loop

This Pro tutorial provides the steps to customize a posts query loop in Bricks to show previous and next posts on single post pages.

The benefit of previous and next posts via a query loop over the built-in Post Navigation element is that we have complete control over what elements appear for these adjacent posts and their layout and styling.

For a different approach involving the creation of a custom query type, refer to David’s tutorial.

And if you want more flexibility than the Post Navigation element without writing code, there is the Adjacent Posts element in our BricksExtras plugin.

Step 1

First, we shall define a custom function to return true if the current post is the next post (of the post in the query loop), otherwise false.

Add the following in child theme‘s functions.php or a code snippets plugin:

// Function to return true if the current post is the next post, otherwise false.
function bl_is_next_post(): bool {
    $prev_post = get_previous_post();
    $prev_id = empty( $prev_post ) ? null : $prev_post->ID;
  
    return $prev_id === get_queried_object_id();
}

Step 2

Edit your single post template with Bricks.

Copy this Section’s JSON and paste it at your desired location in the structure.

Code in the query should be this:

$prev_post = get_previous_post();
$next_post = get_next_post();
	
$prev_post_id = $prev_post ? $prev_post->ID : '';
$next_post_id = $next_post ? $next_post->ID : '';

return [
  'post_type' => 'post',
  'posts_per_page' => '2',
  'post__in' => [
    $prev_post_id,
    $next_post_id
  ],
  'orderby' => 'post__in',
];

For the “Previous Post” text element, ensure that this condition is set:

and for the “Next Post” text element, this condition:

It will not look correctly in the editor but on the front end, should be fine.