14th Aug '23
/
2 comments

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 624 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to Exclude Elements from Bricks Editor

How to Exclude Elements from Bricks Editor

Bricks has a handy bricks/builder/elements filter using which the available elements that show up after clicking + (or ⌃/⌘ + ⇧ + E) in the…
Categories:
Tags:
Filtering Breadcrumbs in Bricks

Filtering Breadcrumbs in Bricks

Using the bricks/breadcrumbs/items filter to modify Bricks' breadcrumbs’ element programmatically.
Categories:
Pro
Random Row from ACF Repeater in Bricks

Random Row from ACF Repeater in Bricks

In the past, we shared how the first row of a ACF Repeater can be output in a Bricks query loop here. This Pro tutorial…
Pro
Restrict Content Pro in Bricks

Restrict Content Pro in Bricks

This Pro tutorial provides the steps to restrict Pages and individual elements like Sections in Bricks depending on whether the current user has any active…
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…