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 632 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Query Loop in Bricks

Query Loop in Bricks

This Pro tutorial walks you through the steps to use the Query Loop feature in Bricks to display a responsive grid of posts using CSS…
Categories:
How to Show Future Events in Bricks

How to Show Future Events in Bricks

One of the common requirements in WordPress is being able to filter the events (or could be posts of any post type) to only those…
Categories:
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
Masonry Accordion Query Loops in Bricks Builder

Masonry Accordion Query Loops in Bricks Builder

Learn how to enable masonry layout for nestable accordions in Bricks builder and use JavaScript to re-layout the masonry on accordions' open and close.
Categories:
Tags:
Auto Responsive Grids in Bricks

Auto Responsive Grids in Bricks

This tutorial provides the CSS that can be pasted for automatic responsive grids in Bricks Builder. Posts element Each post will get a right padding…
Pro
Current Post’s Terms in Bricks

Current Post’s Terms in Bricks

Updated on 15 Jan 2024 This Pro tutorial provides the steps to set up a grid of terms (like categories) that the current post is…