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

Pro
Child Posts Section in Bricks

Child Posts Section in Bricks

This Pro tutorial provides the steps to limit the posts (can be of any post type) output by Bricks' query loop to children of the…
Categories:
Pro
Related Posts by Taxonomy in Bricks

Related Posts by Taxonomy in Bricks

In the previous Posts Related by Current Post's Terms in Bricks tutorial, we showed how posts related to the current single post that have the…
Categories:
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
Per-Category Load More with Post Count in Bricks Builder Nested Query Loops

Per-Category Load More with Post Count in Bricks Builder Nested Query Loops

In the BricksLabs group, a user asks: Hi everyone! I'm working on a website where I need to list a large number of products on…
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Pro
Top-level Pages and Children Bricks Query Loop

Top-level Pages and Children Bricks Query Loop

This Pro tutorial for Bricks users can be considered Part 2 or a variation of the earlier Bricks Query Loop for Top-level Parent Pages with…
Categories: