Bricks Builder - Moritz Reitz - WordPress Development & SEO

When building dynamic WordPress sites with Bricks Builder, there are times when you want to display posts related through a Meta Box relationship field, but also ensure there’s a fallback to show other posts of the same type if no relationships exist. This can be especially helpful for things like testimonials, related articles, or services.

In this post, I’ll walk you through a custom PHP query snippet that does exactly that: it fetches related posts via Meta Box’s relationship field and then fills in the rest of the results with other posts from the same post type — creating a seamless experience for the user and ensuring you never end up with an empty section.

The Goal

We want to:

Query posts related to the current post via a Meta Box relationship field.
Get all other posts of the same post type.
Merge the two, showing related posts first, then fallback posts.

The Code

Here's the full query snippet:

phpCopyEdit$related = new WP_Query([
    'relationship' => [
        'id' => 'review-service',
        'to' => get_the_ID(),
    ],
    'nopaging' => true,
]);

$related_ids = wp_list_pluck($related->posts, 'ID');

$all = new WP_Query([
    'post_type' => 'testimonial',
    'posts_per_page' => -1,
    'fields' => 'ids',
]);

$other_ids = array_diff($all->posts, $related_ids);

return [
    'post_type' => 'testimonial',
    'post__in' => array_merge($related_ids, $other_ids),
    'orderby' => 'post__in',
    'posts_per_page' => -1,
];

Step-by-Step Explanation

1. Query Related Posts via Meta Box Relationship

phpCopyEdit$related = new WP_Query([
    'relationship' => [
        'id' => 'review-service',
        'to' => get_the_ID(),
    ],
    'nopaging' => true,
]);

This uses Meta Box’s custom relationship query support.
'id' => 'review-service' targets your Meta Box relationship field.
'to' => get_the_ID() fetches posts connected to the current post.

2. Extract the IDs of Related Posts

phpCopyEdit$related_ids = wp_list_pluck($related->posts, 'ID');

wp_list_pluck() helps us extract just the post IDs from the $related query.
We'll use these to prioritize related posts in the final output.

3. Fetch All Testimonials

phpCopyEdit$all = new WP_Query([
    'post_type' => 'testimonial',
    'posts_per_page' => -1,
    'fields' => 'ids',
]);

This retrieves the IDs of all posts from the testimonial post type.
'fields' => 'ids' makes the query more efficient by returning only the IDs.

4. Exclude Already Related Posts

phpCopyEdit$other_ids = array_diff($all->posts, $related_ids);

We don’t want to show the same post twice.
array_diff() removes any post already found in the related set.

5. Merge & Return the Final Query

phpCopyEditreturn [
    'post_type' => 'testimonial',
    'post__in' => array_merge($related_ids, $other_ids),
    'orderby' => 'post__in',
    'posts_per_page' => -1,
];

We merge both arrays — showing related posts first, followed by the rest.
'post__in' ensures only these posts are queried and displayed in the order we set.
'orderby' => 'post__in' respects the merged array order.

Where to Use This in Bricks Builder

This code goes into a custom query in Bricks Builder:

Select your Query Loop element (like a Repeater or Post element).
Under the Query panel, choose "Custom PHP".
Paste this snippet into the code area.

Make sure your Meta Box relationship field ID (review-service) and post type (testimonial) match your actual site setup.

Resources

How I Implemented an Image Comparison Slider in Bricks Builder

Working with Bricks Builder regularly, I recently cam across the challenge of adding a before & after slider in Bricks.

I found a sleek solution using a web component from sneas.io. You can add the code with static images or dynamic images using custom fields.

Why Bricks Doesn’t Have This Natively

While Bricks Builder is incredibly flexible and powerful (I am a huge fan), it doesn’t come with a native image comparison slider. Which is honestly fine since Dimah's web component is not to hard to implement if you know you way around HTML.

The Static Implementation

The quickest way to get an image comparison slider working is with a static embed. Here’s how I did it:

Enable Code Execution in Bricks
Ensure that the Bricks editor allows custom HTML/JS.
Insert a Code Block
In the Bricks editor, add a Code element and paste the following snippet:
-  <img-comparison-slider> <img slot="first" src="https://link-to-your-file" width="600" height="600"/> <img slot="second" src="link-to-your-file" width="600" height="600"/> </img-comparison-slider> <script defer src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script> This gives you a fully functional, static image comparison component right on the page.

The Dynamic Implementation (With Custom Fields)

For projects requiring dynamic content — such as client-managed before/after images — I took it a step further:

Enable Code Execution
As before, make sure custom code can be added safely in Bricks.
Allow Custom HTML Tags
By default, Bricks strips out unknown HTML tags. To use <img-comparison-slider>, we need to whitelist it. Add this to your functions.php:
- add_filter( 'bricks/allowed_html_tags', function( $allowed_html_tags ) { $additional_tags = ['img-comparison-slider']; return array_merge( $allowed_html_tags, $additional_tags ); } ); Official Bricks Docs
Create the Structure in Bricks
- Add a Custom HTML element and use the tag
  - <img-comparison-slider>.
- Inside this tag, add two image elements with dynamic data bindings: html
  - <img slot="first" src="{YOUR_DYNAMIC_IMAGE_1}" />
  - <img slot="second" src="{YOUR_DYNAMIC_IMAGE_2}" />
- Close the component with
  - </img-comparison-slider>.
Add the Script Block
Below the comparison container, insert another code block with:
- <script defer src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script>
  This ensures the slider component is properly loaded and functional on the front end.

This method lets me seamlessly integrate a performant and responsive image comparison slider into any Bricks layout — with support for both static and dynamic content. It's elegant, dependency-light, and makes full use of modern web standards.