16th Mar '26
/
0 comments

Masonry Accordion Query Loops in Bricks Builder

This Pro tutorial provides the steps to enable masonry for posts query loops inside an Accordion (Nestable) Bricks element.

Step 1

Edit your Page/Template with Bricks and paste the Section's JSON after copying it from here.

Step 2

Enable masonry controls for nestable accordion elements and inject Isotope JS library (built into Bricks)'s sizer elements into the elements.

Add the following in child theme's functions.php (w/o the opening PHP tag) 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 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Latest Featured Posts First in Bricks Query Loop (No Duplicates)

Latest Featured Posts First in Bricks Query Loop (No Duplicates)

In the Bricks Facebook group a user asks: We can use AI to help unfreeze our brains sometimes or at least have it write the…
Categories:
Pro
Custom Nested Queries in Bricks

Custom Nested Queries in Bricks

In most of the previous tutorials covering nested query loops in Bricks on this site, we accessed the parent query's looping object in the inner…
Categories:
Bricks Query Loop – Posts Authored by Logged in User

Bricks Query Loop – Posts Authored by Logged in User

How to display only the posts authored by the currently logged-in user in a query loop.
Categories:
How to List Your Posts Divided by Categories in Bricks

How to List Your Posts Divided by Categories in Bricks

In this tutorial, we'll learn how to display a list of posts divided by each category. The DOM tree Here is how I structured my…
Categories:
How to Show Future Events in Bricks

How to Show Future Events in Bricks

One of the common requirements in WordPress is being able to filter the events (or could be posts of any post type) to only those…
Categories:
Pro
Current Single Post Reference From Inside a Bricks Query Loop

Current Single Post Reference From Inside a Bricks Query Loop

Use case: Get the single post’s custom field (like ACF Repeater or Meta Box Group) array row corresponding to the loop’s counter/index
Categories:
Pro
6 Random Posts from Tag A + 6 Random Posts from Tag B in a Single Bricks Query Loop

6 Random Posts from Tag A + 6 Random Posts from Tag B in a Single Bricks Query Loop

Displaying two set of random posts, inside one query loop.
Categories:
Pro
Masonry for Query Loop in Bricks

Masonry for Query Loop in Bricks

If you are looking to implement masonry with a 'view more' button i.e., click-type of infinite scroll follow this tutorial instead. Updated on 15 Mar…
Categories: