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.

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:

root {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-column-gap: 40px;
	grid-row-gap: 60px;
}

Add a Container inside. We are going to apply the Query Loop on this element which results in this element becoming an individual post in the loop.

Toggle “Use query loop” on.

Click the query (infinity) icon and set your desired query parameters like Posts per page.

Row gap: 10px.

Time to build each post.

Image

Add an Image element inside the Container (that is inside “Posts Grid”).

Select “Featured image” in the first dropdown.

We need to decide the dimensions of the featured images. If you are okay with one of the built-in options you could select that. Refer to this article.

In this example let’s register a custom image size.

In child theme‘s functions.php, add:

add_image_size( '16x9-crop-480px', 480, 270, true ); // Hard Crop Mode

If your posts already have featured images, you will need to regenerate them.

Save your Page in Bricks editor and reload it.

Select the newly set image size and configure the element like this:

Post Title

Add a Post Title element.

Enable “Link to post”.

Excerpt

Add an Excerpt element.

Set margin at the bottom to 10px.

Button

Add a Button element.

Text: Read more →

Set it to link to the post’s permalink.

To make this button aligned to the bottom, select the parent Container.

Align container: Stretch

Select the button and set its top margin to auto.

Step 2

WordPress uses SQL_CALC_FOUND_ROWS in most queries in order to implement pagination even when we don’t need pagination at all. By setting no_found_rows parameter to true we can tell wordPress to not count the total rows thereby reducing load on the DB.

Thankfully, Bricks provides a filter to modify the query parameters of elements that output a list of posts like the Posts element and also for the containers on which Query Loop has been applied.

Add the following in child theme’s functions.php:

// Set no_found_rows to true to reduce the load on the database.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( 'xzftlh' === $element_id ) {
		$query_vars['no_found_rows'] = true;
	}
	
	return $query_vars;
}, 10, 3 );

Replace xzftlh with the ID of the Container on which the query loop has been applied w/o the #brxe- part at the front. You can also get this by inspecting this on the front end using your browser’s DevTools.