Bricks Query Loop Tutorial: Dynamic Content Without Code

What Is Query Loop?

Query Loop is Bricks’ core dynamic capability: render a set of content (posts, products, custom post types) from a single template — no PHP required.

Analogy: it’s the “pivot table” of Bricks. You define what to query and how to display it; Query Loop handles the rest.

Scenario 1: Post List (The Most Common Use)

Goal: show all posts on the blog page, each as a card (thumbnail + title + excerpt + date).

Steps

1. Insert a container → Structure → add a Query Loop
2. Query settings:
   • Source: Post
   • Quantity: 9 per page
   • Order: newest first
   • Pagination: on (or load-more)
3. Build the card template inside the Query Loop:
   • Image element → dynamic data → featured image
   • Title → dynamic data → post title (linked to the post)
   • Excerpt → dynamic data → excerpt (with character limit)
   • Date → dynamic data → publish date
4. Save and check the result — all posts render automatically in a loop

Scenario 2: Product Grid (WooCommerce)

Goal: display products by category on the shop homepage.

• Query source: “Product (WooCommerce)”
• Condition: category = current page’s category (dynamic)
• Order: by sales / price
• Card: product image + title + price + add-to-cart button

Key: use the “current archive” condition so one template serves every category page.

Scenario 3: Related Posts (Bottom of Single Posts)

Goal: show “related posts” (3 posts from the same category) at the bottom of every article.

• Query source: Post
• Exclude the current post: condition → post ID ≠ current post
• Category = current post’s category (dynamic)
• Quantity: 3, ordered randomly or newest first

Scenario 4: Filtering (Faceted Navigation)

Goal: filter products by attribute (color / size / price range) on the product page.

• Use Query Loop + filter controls
• Pair with WP Grid Builder (Bricks’ recommended combo): build the filter panel by drag-and-drop, and the Query Loop updates automatically
• Or add “filter” elements manually + conditional logic

Query Loop Core Settings Cheat Sheet

Pairing with Dynamic Data

Every element inside a Query Loop can bind to dynamic data:

• Text: {post_title} {post_excerpt} {post_date} {acf_field}
• Images: featured image / ACF image fields
• Links: post link / custom link
• Conditions: show only when data exists (e.g., skip the image when there’s no thumbnail)

Pitfalls to Avoid

1. Performance: large Query Loops (hundreds of items) slow down the editor — use pagination or load-more instead of pulling everything at once
2. Nested queries: nesting a Query Loop inside a Query Loop (e.g., “category → 3 latest posts per category”) works, but don’t go beyond 2 levels — it gets hard to maintain
3. Caching: enable page caching after launch (Perfmatters/Breeze) — dynamic content needs a caching strategy; don’t hit the database on every request
4. ACF fields: reference custom fields correctly in query conditions and dynamic data with {acf:field_name}

Real-World Example: A B2B Product Catalog Page

Let’s build a “product showcase page grouped by industry”:

1. Query: products (CPT), category = industry (dynamic)
2. Card: product image + name + one-line description + “Request a Quote” button
3. Top: industry filter tabs (WP Grid Builder facets)
4. Bottom: pagination (load more)

This is the single most common request for B2B export sites — Bricks Query Loop handles it end to end, no PHP, and your client can update products from the dashboard.

Next-Level Directions

• Conditional Logic: show different styles per category
• Dynamic tags: {archive_title} and friends
• Custom query parameters: extend complex queries with the bricks/query/loop_object hook

Related Reading

• [Bricks Installation & Basic Setup Guide](setup guide link)
• 5 Bricks Pitfalls (including Query Loop performance traps)

Query Loop is the feature that upgrades Bricks from a “drag-and-drop tool” to a “development tool” — master it and you can build dynamic sites without writing code. Spend one afternoon getting comfortable with these 4 scenarios; it pays for itself.