8th Feb '24
/
3 comments

Bricks Query Loop for Top-level Parent Pages with Children

In the Bricks Facebook group, a user asked:

Looking for a custom query to output a list of posts in the same hierarchy that the posts use. For example, the posts are like:

Parent 1

- child A

- child B

Parent 2

- child C

- child D

That's the way I need to build an unordered list. If you just query posts you get them all without hierarchy, for example (if sorted by name) child A, child B, child C, child D, Parent 1, Parent 2.

Anyone have a code snippet that will accomplish this?

WordPress has a wp_list_pages() function for showing a list of all Pages, but it outputs all Pages, and there's no direct way to specify that only the top-level Pages and their children are to be included.

This Pro tutorial provides the steps to output top-level parent posts (can be Pages or any hierarchical post type) and their child posts using nested query loops in Bricks.

Given this Page structure:

this will be the output after implementing the tutorial:

Step 1

Edit the Page where you'd like to show the top-level parent Pages and their children with Bricks.

Section JSON is provided near the end.

Add a Section and inside its Container, a Container (UL).

Add a Block (LI) inside the Container.

Enable query loop on the Block.

Post type: Pages

Enable PHP query editor.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 2)

How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 2)

This tutorial provides the PHP & JS codes that can be pasted in order to create a flying effect on map markers each time your…
Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…
Pro
Outputting an Element in Bricks x times where x is a custom field value

Outputting an Element in Bricks x times where x is a custom field value

Learn how to output a query loop item(s) as many times as the value of a custom field in Bricks.
Categories:
Bricks Query Loop – Posts Authored by Logged in User

Bricks Query Loop – Posts Authored by Logged in User

How to display only the posts authored by the currently logged-in user in a query loop.
Categories:
How to display a Query Loop in 3 columns in Bricks

How to display a Query Loop in 3 columns in Bricks

This tutorial provides the builder settings and CSS codes that can be pasted in order to create a 3-columns query loop container inside Bricks Builder.
Categories: