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

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:

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

11 comments

  • How to get the pagination on post working?

    How to get working pagination on posts in categories (eg. 4 psots in category and different ajax pagination for each category)?

  • How do we exactly the opposite, where we want to pull in an image from an acf field in the taxonomy for a post? I can't get it to happen. We have a product (CPT), which has a brand taxonomy (ACF Taxonomy), which has several field groups, one of which being the "brand_image_svg". For the life of me, I cannot get that image to show, nor any other of that post's "Brand" taxonomy fields. I have tried to use sub loops, but nothing I do to restrict to the one "Brand" assigned to the product works. I can get it to display fields from the entire Brand taxonomy in a loop, but specifying it to just the one specific "Brand" taxonomy term on the "Product" post has proven impossible.

    • **UPDATE: SOLVED**
      I finally got it! For anyone in the same boat, the nested loop for getting terms fields under a post is like this:

      Imagine you want to pull in the "Brand" logo from the "Brand" taxonomy assigned to a "Car" CPT.

      1. Outer loop - Posts (I chose a CPT of mine called "Cars" in my example below)

      2. Inner loop inside the post loop - Terms (I chose a custom ACF taxonomy i created called "Brands" in my example below)

      * Set "number" of terms to return to 1 returned (in my case, only one "Brand" to each "Car").
      * The meta filter needs to have something in common between the term and the post, OTHER THAN the term_name. For my example, I added an ACF field for the "Cars" CPT store the "Brand Name" as a text field "cpt_car_brand_name", and I added the same field to the Taxonomy as an ACF test field and called it "tax_brand_brand_name" that was set to a value identical to the "Brand" taxonomy term_name associated with car as its Brand taxonomy. Eg. If the Brand term name was "Audi", I stored the "Audi" in the "Car" CPT ACF field "car_brand_name". Then, in "Meta Query" of the Taxonomy query, set "Meta Key" to "tax_brand_brand_name" and Meta Value to "{acf_cpt_car_brand_name}"

      Ahhhhh. Success.

      I truly hope this saves someone hours and hours in the future 🙂

  • Chris Seifert

    Ty Maxime for the help! I was trying to do this using the \Bricks\Query class and the new PHP query editor and could not get it to work. However, after viewing this article it works!

  • 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.

    • Thanks so much, this is a really educative powerful and simple way to do the post categories in one loop. Cheers man!

      Just an enquiry, can bricks forms be downloaded as pdf after submitting and if do how?
      Thanks.

  • 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?

Leave your comment