↓Skip to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

Children

🐺 Children 🧒👶
Create a toc-like list of sub-pages of the page in question.
This shortcode blatantly stolen Lovingly borrowed from the Learn Theme1 and lightly modified.

Think of the children!!
Use the children shortcode to list the child pages of a page and any further descendants (childrens’ children).
By default, the shortcode emits links to the child pages.

The shorcode will not enumerate pages within leaf pagebundles. Only branch pages are traversed

Usage #

Parameter Default Description
page current Specify the page name (section name) to display children for
style “li” Choose the style used to display descendants. It could be any HTML tag name
showhidden “false” When true, child pages hidden from the menu will be displayed
description “false” Allows you to include a short text under each page in the list. When no description exists for the page, children shortcode takes the first 70 words of your content. More info..2
depth 1 Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages. Tips: set 999 to get all descendants
sort none Sort children by Weight - to sort on menu order, Name - to sort alphabetically on menu label, Identifier - to sort alphabetically on identifier set in frontmatter, and URL - to sort by URL

Demo #

Simplest Usage #

With descriptions #

{{< children description=“true” >}}

Without descriptions #

{{< children >}}

Use HTML Heading elements #

{{< children style=“h2” description=“true” >}}

{{< children style=“h3” description=“true” >}}

Include subpages that would otherwise be hidden: #

If the parameter showhidden is used, regardless of value, hidden pages will be listed:

{{< children depth=“4” showhidden=“0” >}}

{{< children depth=“4” >}}

Specify the traversal depth and use HTML Heading elements #

{{< children style=“h2” depth=“4” description=“true” >}}

Use HTML div elements #

Without descriptions #

{{< children style=“div” depth=“999” >}}

With descriptions #

{{< children style=“div” depth=“999” description=“true” >}}

  1. https://github.com/matcornic/hugo-theme-learn/tree/master/exampleSite/content/shortcodes/children ↩︎

  2. https://gohugo.io/content/summaries/ ↩︎

Children-1 Branch Pagebundle

1
1 min
stub branch pagebungle for children-1

Children-2 Branch Pagebundle

2
1 min
Branch pagebundle for children-2

Children-3 Branch Pagebundle

3
1 min
👶🐯🐣 Children-3 Branch pagebundle. No description or summary.

Children-4 Leaf Pagebundle

4
1 min
Children-4 Leaf pagebundle demo