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:
4 comments
Manuel Marchal
Thanks a lot, how i can apply this on Metabox Relationship field.
For example i have cpt_A which has several cpt_B. Those cpt_B have several terms. Now i want to display on the detail page of cpt_A all related cpt_B sorted by terms.
Louis-P
So precious, I just needed that! And i found it throught AT 😉
Colin Hiom
That's a brilliant post. Very informative with great grabs thanks Maxime.
Álvaro Massana de Castro
Hi Maxime, thank you for your guide.
But doing it this way, all categories that have Out of Stock products are displayed, meaning that if there is a category with only Out Of Stock products, that category will appear empty of products. Also, the categories with products that have Catalog Visibility "Hidden", appear in the loop.
Is there any way to fix this and only display categories that have any product that have visibility "visible" and In Stock?