How to Inject a Different Type of Post in Bricks Query Loop

Updated on 26 Aug 2024

A user asks:

Hello, I'd like to inject a CPT post card inside of a Bricks query loop of a different CPT and display every 10 posts. The specific use is to display a Classified Ads CPT card within News CPT search results that is filtered by Grid WP.

bricks/query/result filter introduced in Bricks 1.8 enables us to modify the query results before Bricks renders the output.

This Pro tutorial shows how we can use this filter to inject a specific post (can be of any post type) in between posts as every nth item in Bricks query loop output.

Single Tutorial Purchase Option

Lifetime access to this single tutorial can be purchased for $39 here.

Step 1

Edit a Page with Bricks and set up a query loop on a Block element.

The initial structure would look like this:

In this example we shall insert a specific product (by its ID) in between regular posts after every 2nd post.

Therefore there is no need to specify the post type since post is the default in Query settings.

Add a Heading element inside the Block and set its text to:

{post_title:link}

Change its label to say, "Post Heading".

Apply a Dynamic data condition to make this element be rendered only if the current post type is post.

Duplicate the "Post Heading" as "Product Heading".

Change the value in the condition from post to product, assuming WooCommerce is active in your install or there is a CPT with that name - if not, change it to post type of your choice.

Practically speaking, you probably want to have cards instead of just linked titles.

Therefore, after implementing the next step and ensuring that everything is working as it should, you might want to come back and replace the above two headings with two Blocks or Divs that are parent containers of your card elements and apply the same conditions on the parent elements.

Step 2

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

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 524 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Outputting Only the First ACF Repeater Row in Bricks

Outputting Only the First ACF Repeater Row in Bricks

Updated on 12 Dec 2023 In the Bricks Facebook group a user asks: How can I display only the first entry from an ACF repeater?…
Pro
Conditionally Excluding Elements from Bricks Editor

Conditionally Excluding Elements from Bricks Editor

In the past, we shared How to Exclude Elements from Bricks Editor. This Pro tutorial shows how specific elements can be excluded selectively based on…
Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Categories:
Pro
How to programmatically add a class to an element in Bricks

How to programmatically add a class to an element in Bricks

This Pro tutorial shows how a dynamic class can be added to a query loop element in Bricks programmatically. Let's take an example where posts…