Hey @splaquet,
In Cornerstone, you should not use hardcoded indexed keys like {{dc:looper:field key="children.0.children"}}. Doing so attempts to reach into the first child item’s array statically rather than looping through the current item in scope, which is also why Cornerstone crashes/errors out if a child item lacks grandchildren or the array is not structured that way.
Here is the correct way to understand and configure a 3-tiered menu structure in Cornerstone using a single WordPress Menu looper provider.
Am I approaching this correctly?
No, using children.0.children breaks the dynamic context.
When you nest Looper Providers in Cornerstone, each nested Looper Provider automatically evaluates relative to the current item of the parent Looper Consumer.
Cornerstone already unpacks WordPress menu hierarchy into nested children arrays:
-
Tier 1 (Top Level): Iterates over the top-level menu items.
-
Tier 2 (Sub-level): Iterates over the
children of the current Tier 1 item.
-
Tier 3 (Sub-sub-level): Iterates over the
children of the current Tier 2 item.
Therefore, the Looper Provider key for Tier 3 is identical to Tier 2:
{{dc:looper:field key="children"}}
How to Correctly Set Up the 3rd Tier
Structure your elements hierarchically in the Document Outline as nested Provider/Consumer pairs:
1. Tier 1 (Top Level)
-
Looper Provider: Dynamic Content
- Key:
{{dc:wp:menu_items menu="your-menu-slug-or-name"}} (or use the built-in WordPress Menu looper provider if available in your version).
-
Looper Consumer: On the Tier 1 layout element (e.g., Column or Div).
- Consumes 1 item per loop.
- Outputs the top-level title:
{{dc:looper:field key="title"}} and link: {{dc:looper:field key="url"}}.
2. Tier 2 (Columns / Group Headers)
Inside the Tier 1 Consumer:
-
Looper Provider: Dynamic Content
- Value:
{{dc:looper:field key="children"}}
-
Looper Consumer: On the Tier 2 layout element (e.g., a Column or Group Div).
- Consumes 1 item per loop.
- Outputs the second-tier label/header:
{{dc:looper:field key="title"}}.
3. Tier 3 (Nested Links Under Tier 2)
Inside the Tier 2 Consumer:
-
Looper Provider: Dynamic Content
- Value:
{{dc:looper:field key="children"}}
-
Looper Consumer: On the Tier 3 layout element (e.g., a List, Div, or Button).
- Consumes
All (or 1 item per repeated element).
- Outputs the third-tier title:
{{dc:looper:field key="title"}} and link: {{dc:looper:field key="url"}}.
Preventing Cornerstone Errors / Crashes
Cornerstone can throw errors or break the builder preview when an element tries to consume {{dc:looper:field key="children"}} on menu items that do not have children (where children is empty, null, or undefined).
To safeguard against this:
-
Apply an Element Condition to the Tier 2 and Tier 3 Looper Providers/Containers:
- Go to the Conditions tab on the element acting as the Tier 3 Provider/Consumer.
- Add a condition:
- Choose: Number or String
- Dynamic Content:
{{dc:looper:field key="children"}}
- Operator:
is not empty (or check {{dc:looper:count}} > 0).
- Alternatively, use the Conditional rule:
-
Condition:
{{dc:looper:field key="children"}} is not (leave value blank / empty).
