When building custom WordPress themes with Etch, you often need to conditionally display content based on hierarchical relationships between posts. Whether you need to show navigation for child pages, breadcrumbs for parent pages, or links to sibling pages, these checks become essential for hierarchical content structures like documentation sites, portfolios with project sub-pages, or any parent-child page relationships.
By default, Etch’s dynamic data doesn’t include a straightforward way to check these relationships. While Etch does provide a post_parent value, this snippet organizes all hierarchical data in one convenient hierarchy object and adds helpful boolean checks, children data, and sibling data that Etch doesn’t provide.
The snippet provides both naming styles because sometimes one reads more naturally than the other depending on what you’re checking. For example, is_parent might feel more intuitive when you’re checking the current page’s role, while has_child might read better when you’re emphasizing the relationship. They work exactly the same way, so use whichever makes your template code easier to understand.
Once added, you can use the has_child / is_parent properties in any Etch template:
{#if this.hierarchy.has_child}
<!-- Show when post has a child -->
{/if}
{#if this.hierarchy.is_parent}
<!-- Same as has_child, just reads differently -->
<!-- Use whichever makes more sense in your context -->
{/if}
and same for has_parent / is_child properties:
{#if this.hierarchy.has_parent}
<!-- Show when post has a parent -->
{/if}
{#if this.hierarchy.is_child}
<!-- Same as has_parent, just reads differently -->
<!-- Use whichever makes more sense in your context -->
{/if}
Check for siblings:
{#if this.hierarchy.has_sibling}
<!-- Show when post has siblings -->
{/if}
When a post has a parent, you’ll get the parent ID:
{#if this.hierarchy.has_parent}
<p>Parent ID: {this.hierarchy.parent}</p>
{/if}
When a post has children, you’ll also get a children array containing the child post IDs. You could do this for example:
{#if this.hierarchy.has_child}
<p>This post has {this.hierarchy.children.length()} child page(s)</p>
{/if}
When a post has siblings, you’ll get a siblings array containing the sibling post IDs You could do this for example:
{#if this.hierarchy.has_sibling}
<p>This post has {this.hierarchy.siblings.length()} sibling page(s)</p>
{/if}
On to the Code!
Add this to your child theme’s functions.php file, a custom plugin, or a snippet plugin:
