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.

Table of Contents

• The DOM tree
• Create a Term query loop
• Create a Sub query loop for posts
• Add your post information as dynamic data
• Results

The DOM tree

Here is how I structured my elements inside the bricks builder:

Create a Term query loop

The first step is to create a Term query loop. It can be a div/block/container – it doesn’t matter. Just make sure to enable the query loop option, and choose Terms as query Type and Categories as the taxomomy:

If you want to output the name of each category, you add a heading/text element and add the term name as a dynamic data function:

Create a Sub query loop for posts

To return the post data, we need to create a nested query loop element that will output the posts. Each query needs to be filtered by the actual term query. So let’s add a taxonomy query setting inside our post query loop element, and insert the term_id as the field we want to target, and the term_id function as the term value we want to filter:

Add your post information as dynamic data

Inside this nested post query loop – which is your card – you can add the element you need in order to compose your Card. In my example, I used the featured image, the title, the excerpt and a read more button. Remember to use the post dynamic data for each of these elements in order to dynamically generate the content for each post.

Results

If everything works correctly, you should now output all the categories and the relative posts inside it: