How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead.

This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth post (Ex.: after 5th post) in the list of posts output via a query loop in Bricks.

This can be used to insert an ad/banner or any other functionality like Top Posts in between posts.

Step 1

Define a custom function that returns the current index in the query loop.

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

function bl_get_loop_index() {
	if ( method_exists( 'BricksQuery', 'get_query_object' ) ) {
		$query_object = BricksQuery::get_query_object();

		if ( $query_object ) {
			$value = intval( $query_object::get_loop_index() ) + 1;
		}
	} else {
		$value = 0;
	}

    $value = isset( $value ) ? $value : 0;

	return $value;
}

Step 2

Edit your Page/template with Bricks.

Inside a Section’s Container, add a Container (this will be the parent of the looping posts) and inside that a Block.

Enable query loop on the Block and select your desired post type (by default, it shows the latest posts) and configure any other query parameters as needed.

Add a Block inside the query loop Block and change its label to say, “Post Loop Content”.

Place Post Title and any other elements that you wish to be shown for each post.

Add another Block adjacent to “Post Loop Content” and set its label to say, “Between Posts”.

Place your ad/banner’s HTML in a Code element or add any Bricks elements inside this.

Apply a Dynamic data condition on “Between Posts”.

{echo:bl_get_loop_index}

Change 5 as needed. This is the post number after which you want your Between Posts to be inserted on the front end.

In this example, it will get inserted inside the 5th post. In the next step, we are going to use JavaScript to move it out of its parent so it is after the 5th post.

Step 3

Select the “Between Posts” element → STYLE → CSS and add between-posts as the CSS ID.

Click on the gear icon (Settings) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts:

<script>
document.addEventListener("DOMContentLoaded", () => {
  // move root out of its parent element and as a sibling after it
  const betweenPosts = document.getElementById("between-posts")
  if (betweenPosts) {
    betweenPosts.parentNode.after(betweenPosts)
  } 
})
</script>

Update

In the above set up any styling set for “Between Posts” element won’t remain or appear on the front end.

We need to use a workaround to use class-assigned styling.

Add a class of between-posts to the “Between Posts” Block. With this class as the active selector, set any desired styling like the background color and padding.

Remove between-posts ID for this element.

In Step 3 code,

change

const betweenPosts = document.getElementById("between-posts")

to

const betweenPosts = document.querySelector(".between-posts")

References

/wp-content/plugins/bricksextras/includes/Providers/Provider_Extras.php

https://www.javascripttutorial.net/javascript-dom/javascript-after/