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
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.
If everything works correctly, you should now output all the categories and the relative posts inside it: