Query Loops Explained for Bricks Layouts

Query loops power blog grids, related services, and case study carousels. Get the query wrong and the design looks fine while the database cries. Get the empty state wrong and a perfectly good template looks broken the first time a category has no posts.

This article explains the query shapes behind clean Bricks loops, how to keep related modules honest, and how to design for zero results without apologizing in six paragraphs. It assumes you are building real editorial and service templates, not a demo with twelve perfect sample posts forever.

Bricks query anatomy

Start with post type, posts per page, and order. Add tax queries only when the UI truly filters. Exclude the current post on related sections. Turn off sticky posts when stickies would distort a curated grid.

// Related posts query shape
[
  'post_type' => 'post',
  'posts_per_page' => 3,
  'post__not_in' => [get_the_ID()],
  'category__in' => wp_get_post_categories(get_the_ID()),
  'ignore_sticky_posts' => true,
]

In Bricks, mirror that intent with the query UI or a custom query hook when you need logic the panel cannot express. Keep custom queries documented next to the template so the next developer knows why orderby is date instead of menu_order.

Archive grids versus related modules

Archive loops should paginate. Related modules should not pretend to be archives. Three to four related items is usually enough. If you need more discovery, link to the category archive rather than dumping twelve cards under an article.

For service-related loops, prefer an explicit relationship field over latest services when editorial control matters. Latest is fine for blogs; productized service silos often need curated adjacency so a migration page does not randomly promote an unrelated tooling article.

Empty states

Design the zero-results message. A blank grid looks broken; a short line with a CTA looks intentional.

if (!$query->have_posts()) {
  echo '<p class="loop-empty">No related articles yet. <a href="/blog/">Browse all posts</a>.</p>';
}

Style .loop-empty like body text, not like an error. Offer a next step: browse all posts, view services, or contact. Never leave a heading that promises Related articles above an empty void.

Card design contracts

Loop cards need a stable contract: image aspect ratio, title line clamp, excerpt length, and meta row. Without that contract, one long title or missing image collapses the grid rhythm. Use CSS line clamping and a consistent thumbnail size.

.post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__media {
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

Decide whether cards show categories, dates, or reading time. Showing everything creates noise; showing nothing can hurt scanning. Pick a meta pattern and reuse it across archive and related modules so users learn the card language once.

Performance habits

Prefer no_found_rows on modules that do not paginate. Avoid nested loops that run a new WP_Query inside each card. If cards need a custom field, consider priming meta in one go rather than calling get_field repeatedly without a plan.

Watch for Bricks loops that accidentally query the main content type with no caps on builder preview — preview churn can hide cost that appears under real traffic. Profile with Query Monitor on a production-like dataset, not an empty staging site.

Filters and taxonomies

If you add category filters, make sure the UI reflects real terms with posts. Empty filter chips teach users the navigation is decorative. For large taxonomies, tax_query with explicit field and terms is clearer than overloaded category__in arrays.

When filters are client-side only, still ensure the initial server render is useful without JavaScript. Progressive enhancement matters for SEO and for users on flaky connections.

Accessibility and semantics

Each card should have a clear accessible name — usually the post title link. Do not wrap the entire card in a link and also nest additional links inside without care. If the whole card is clickable, keep secondary meta as text, not competing anchors.

Pagination should be a navigation landmark with a clear label. Infinite scroll is not free accessibility; if you use it, provide an equivalent way to reach older content.

Query loops are the backbone of content-driven Bricks layouts. Treat them as product surfaces: clear query intent, stable cards, and a planned empty state. The design will look intentional on day one and on day one hundred when the category is sparse.