50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Query Loop in Bricks

This Pro tutorial walks you through the steps to use the Query Loop feature in Bricks to display a responsive grid of posts using CSS Grid while reducing the load on the database using a Bricks filter hook.

For each post we are going to set up:

  • featured image in a custom image size linking to post's permalink
  • post title linking to permalink
  • post excerpt
  • Read more button linking to permalink

We shall also ensure that the Read more button is positioned at the end (vertically) of each post.

This example is mainly meant for secondary queries where a fixed number of posts (6 in this case) are to be shown.

Step 1

Edit your Page with Bricks.

Posts Grid Query Loop Section

You can skip this entire step and simply import the Posts Grid Query Loop Section file from our test site if you want. This is provided near the end of this step.

If you want to get familiar with Bricks and learn and ins-and-outs, we recommend doing it manually as detailed below.

Add a Section. In Bricks version 1.4.0.2 and earlier, this is done by clicking the + icon, then the Layout icon (on the Container element) and clicking on "Full width (Section)".

This adds a Section having a Container.

Select the Container and add a Heading element.

You may want to change the text to something like "Latest Posts".

Add a Container below the heading. This will be the parent container of all the posts. You might want to double click on the layer name in the structure panel and rename it to something like "Posts Grid".

Let us add a bit of custom CSS for an automatic (no need to set breakpoint-specific CSS using media queries) responsive grid.

STYLE → CSS → Custom CSS:

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

  • Dan Ericson

    Hello,

    I used this tutorial to show the posts in grid and I also used WPGridBuilder to filter the posts. When there is only one post after filtering, the post width expands to full width. Can we make the post width still to be like 3 column grid (33%) even if there is only one post after filtering?

    Thanks.

  • Lukáš Jakab

    Hello Sridhar, very useful article! I came across one bug and I wonder if it happens on my site only.

    After having things set exactly like in this guide I tried to set style on :hover over the button that is inside the div with Query loop applied. Applying the hover styles caused the styles to be applied across the whole page, not the button only as intended. E.g. when I applied border style on the button, the border started to show up over every page element that I hovered over.

    Could you please try to reproduce? I wonder if there is some missconfiguration / typo on my site or if it is a bug.

Leave your comment