Mark Jaquith

<p>Subpage Listing allows you to take full advantage of WordPress Pages’ hierarchy by generating a navigational tree of the pages below them (subpages).</p>
<p>For example, say you have a parent page called “Parent.” Now, say you have 3 pages under “Parent,” called “Child1,” “Child2,” and “Child3.” Now, say that you have 2 pages under “Child2” called “Grandchild1” and “Grandchild2.”</p>
<p>Subpage Listing would create a navigation tree for “Parent” that looks like this:</p>
<ul>
<li>Child1</li>
<li>Child2
<ul>
<li>Grandchild1</li>
<li>Grandchild2</li>
</ul>
</li>
<li>Child3</li>
</ul>
<p>This allows you to very easily create a complex hierarchical structure that can be browsed.</p>
<h3>Advanced Usage</h3>
<p>Blank pages will automatically be given a navigation tree. This allows you to quickly create “container” pages (all you do is fill in a title, and choose the page’s parent.)</p>
<p>If you would like to insert the navigational tree manually (that is, surrounded by text of your choosing), use the “Subpage Listing” quicktag that will show up on the Write Page screen (sorry, no RTE support at this time). This will insert the tag:  which will be replaced by the listing of the subpages.</p>
<p>Note: when inserting the tag manually, make sure that there is a blank line both above and below the tag, so as to ensure proper handling of your surrounding paragraphs by WordPress.</p>
<p>Version 0.6 was a massive update that added a bunch of new functionality. The ability to show the current page’s parent has been added, as well as the ability to show the current page’s siblings. You can also suppress the showing of children, and show only siblings, parents, or both. To use these features within a post, use this syntax:  The first “parameter” is the depth you want to show. You can set this to 0 to suppress display of children. The second “parameter” is a boolean switch for display of the parent page. The third “parameter” is a boolean switch for display of sibling pages. All are optional, although if you want to set the second “parameter”, you also have to set the first, and if you want to set the third, you have to set all three.</p>
<p>There is also a new function for use in your templates. Many people wanted to show subpages or siblings in their sidebar, so now you can do that. <code><?php txfx_wp_subpages(); ?></code> is the most basic form, but it can take many parameters.</p>
<pre><code><?php txfx_wp_subpages(5, false, false, '<ul>', '</ul>', true); ?> will show 5 pages deep (first parameter), hide the parent (second parameter), hide the siblings (third parameter), wrap the whole thing in '<ul>' and '</ul>' (fourth and fifth parameters), and will echo the result (sixth parameter). These happen to be the default settings, that I have just illustrated.
</code></pre>

Subpage Listing

Allows you to display a list of the child pages of the currently viewed page.

caterhamcomputing

<p>CC Child Pages displays WordPress child pages of any parent page in a responsive grid or list layout, making it easy to display hierarchical page structures, subpages and navigation.</p>
<p>You can use it in page content, widget areas, or templates using:</p>
<ul>
<li>the <code>[child_pages]</code> shortcode,</li>
<li>the <strong>CC Child Pages</strong> Gutenberg block, or</li>
<li>the <strong>CC Child Pages</strong> Elementor widget (when Elementor is active).</li>
</ul>
<p>All output methods use a modern CSS system based on CSS variables and flexible grid layouts for improved theme compatibility. For older or heavily customised themes, a Legacy CSS mode is available — either by checking the <strong>Use Legacy CSS</strong> option in the block or Elementor sidebar, or by setting <code>use_legacy_css="true"</code> in the shortcode.</p>
<p>This makes it ideal for building sub-navigation sections, page directories, or visual site maps.</p>
<p>Full documentation is available at <a href="https://docs.ccplugins.co.uk/plugins/cc-child-pages/" rel="nofollow ugc">docs.ccplugins.co.uk</a></p>
<h4>Features</h4>
<ul>
<li>Display WordPress child pages in grid or list layout</li>
<li>Supports shortcode, Gutenberg block and Elementor widget</li>
<li>Flexible column layouts (1–6 columns)</li>
<li>Modern CSS system based on CSS variables</li>
<li>Optional Legacy CSS mode for older themes</li>
<li>Pagination and sorting controls</li>
<li>Custom field overrides</li>
<li>Lazy loading support</li>
<li>Fully translatable</li>
</ul>
<p>A Pro add-on is also available at <a href="https://ccplugins.co.uk" rel="nofollow ugc">ccplugins.co.uk</a> which adds additional display skins, advanced layout controls, colour customisation options and Elementor enhancements.</p>
<h3>What’s New in 2.x</h3>
<ul>
<li>Gutenberg block with live preview</li>
<li>Elementor widget integration</li>
<li>Modern CSS skins using CSS variables</li>
<li>Legacy CSS compatibility toggle</li>
<li>Reorganised shortcode structure</li>
<li>Continued support for the classic widget (legacy)</li>
</ul>
<h3>How It Works</h3>
<h4>Gutenberg Block</h4>
<p>Insert the <strong>CC Child Pages</strong> block in the editor. Configure:</p>
<ul>
<li>Parent page</li>
<li>Columns</li>
<li>Thumbnails</li>
<li>Excerpt display</li>
<li>Sorting</li>
<li>Legacy CSS toggle</li>
</ul>
<p>The block provides a live preview while editing.</p>
<h4>Elementor Widget</h4>
<p>If <strong>Elementor</strong> is installed and active, a <strong>CC Child Pages</strong> widget becomes available.</p>
<p>The widget is located inside the <strong>CC Plugins</strong> category within the Elementor panel.</p>
<p>You can:</p>
<ul>
<li>Select the parent page</li>
<li>Choose columns (1–6)</li>
<li>Enable thumbnails and lazy loading</li>
<li>Control excerpt display</li>
<li>Configure sorting</li>
<li>Enable Legacy CSS if required</li>
</ul>
<p>All shortcode options are available via intuitive controls in the Elementor sidebar.</p>
<p>The widget renders the same output structure as the shortcode and block, ensuring consistent styling across editors.</p>
<h4>Shortcode</h4>
<p>Insert:</p>
<pre><code>[child_pages]
</code></pre>
<p>By default, this displays the child pages of the current page.</p>
<p>To enable legacy styling:</p>
<pre><code>[child_pages use_legacy_css="true"]
</code></pre>
<p>The shortcode supports detailed layout and query control, documented below.</p>
<h3>Complete Shortcode Guide</h3>
<h3>1. Basic Usage</h3>
<p>Display children of current page:</p>
<pre><code>[child_pages]
</code></pre>
<p>Display children of a specific page:</p>
<pre><code>[child_pages id="42"]
</code></pre>
<p>Display specific pages only:</p>
<pre><code>[child_pages page_ids="3,7,10"]
</code></pre>
<p>Exclude specific pages:</p>
<pre><code>[child_pages exclude="5,9,12"]<h3>2. Grid Layout Options</h3>
</code></pre>
<p>Choose number of columns:</p>
<pre><code>[child_pages cols="1"]
[child_pages cols="2"]
[child_pages cols="3"]
[child_pages cols="4"]
[child_pages cols="5"]
[child_pages cols="6"]
</code></pre>
<p>Choose skin:</p>
<pre><code>[child_pages skin="simple"]
[child_pages skin="red"]
[child_pages skin="green"]
[child_pages skin="blue"]
[child_pages skin="sleek"]
[child_pages skin="bold"]
</code></pre>
<p>Add custom wrapper class:</p>
<pre><code>[child_pages class="my-custom-grid"]<h3>3. List Mode (Instead of Grid)</h3>
</code></pre>
<p>Display as unordered list:</p>
<pre><code>[child_pages list="true"]
</code></pre>
<p>Control hierarchy depth:</p>
<pre><code>[child_pages list="true" depth="0"]
</code></pre>
<p>Depth values:</p>
<ul>
<li><code>0</code> – unlimited depth (nested list)</li>
<li><code>-1</code> – flat list</li>
<li><code>1</code> – top level only</li>
<li><code>2, 3, 4</code> – specific depth</li>
</ul>
<p>In list mode, only these attributes apply:</p>
<pre><code>id, `exclude`, `orderby`, `order`, `cols`, `class`, `depth`<h3>4. Thumbnails</h3>
</code></pre>
<p>Show featured images:</p>
<pre><code>[child_pages thumbs="true"]
</code></pre>
<p>Specify size:</p>
<pre><code>[child_pages thumbs="large"]
[child_pages thumbs="full"]
[child_pages thumbs="my-custom-size"]
</code></pre>
<p>Make thumbnails clickable:</p>
<pre><code>[child_pages thumbs="medium" link_thumbs="true"]
</code></pre>
<p>Enable lazy loading:</p>
<pre><code>[child_pages thumbs="medium" lazy_load="true"]
[child_pages thumbs="medium" link_thumbs="true" lazy_load="true"]<h3>5. Titles & Links</h3>
</code></pre>
<p>Make titles clickable:</p>
<pre><code>[child_pages link_titles="true"]
</code></pre>
<p>Hide titles:</p>
<pre><code>[child_pages hide_title="true"]
</code></pre>
<p>Hide “Read more” link:</p>
<pre><code>[child_pages hide_more="true"]
</code></pre>
<p>Change “Read more” text:</p>
<pre><code>[child_pages more="View Details"]
</code></pre>
<p>Open links in new tab:</p>
<pre><code>[child_pages link_target="_blank"]<h3>6. Excerpt Control</h3>
</code></pre>
<p>Limit word count:</p>
<pre><code>[child_pages words="20"]
</code></pre>
<p>Disable excerpt truncation:</p>
<pre><code>[child_pages truncate_excerpt="false"]
</code></pre>
<p>Hide excerpt completely:</p>
<pre><code>[child_pages hide_excerpt="true"]
</code></pre>
<p>Hide WordPress “Continue reading” text:</p>
<pre><code>[child_pages hide_wp_more="true"]
</code></pre>
<p>Show full page content:</p>
<pre><code>[child_pages show_page_content="true"]<h3>7. Sorting & Query Control</h3>
</code></pre>
<p>Order results:</p>
<pre><code>[child_pages orderby="title" order="ASC"]
</code></pre>
<p>Supported <code>orderby</code> values:</p>
<ul>
<li><code>menu_order</code> (default)</li>
<li><code>id</code></li>
<li><code>title</code></li>
<li><code>slug</code></li>
<li><code>author</code></li>
<li><code>date</code></li>
<li><code>modified</code></li>
<li><code>rand</code></li>
</ul>
<p>Limit number displayed:</p>
<pre><code>[child_pages limit="5"]
</code></pre>
<p>Offset results:</p>
<pre><code>[child_pages offset="2"]
</code></pre>
<p>Display sibling pages:</p>
<pre><code>[child_pages siblings="true"]
</code></pre>
<p>Include current page with siblings:</p>
<pre><code>[child_pages siblings="true" show_current_page="true"]<h3>8. Pagination</h3>
</code></pre>
<p>Enable pagination:</p>
<pre><code>[child_pages posts_per_page="6"]
</code></pre>
<p>Force a specific page:</p>
<pre><code>[child_pages posts_per_page="6" page="2"]
</code></pre>
<p>Pagination does not apply in list mode.</p>
<h3>9. Post Status Control</h3>
<p>By default:</p>
<ul>
<li>Published pages are shown</li>
<li>Private pages are shown to authorised users</li>
</ul>
<p>Specify manually:</p>
<pre><code>[child_pages post_status="publish"]
[child_pages post_status="publish,private"]<h3>10. Display Meta Information</h3>
</code></pre>
<p>Show author:</p>
<pre><code>[child_pages show_author="true"]
</code></pre>
<p>Show creation date:</p>
<pre><code>[child_pages show_date_created="true"]
</code></pre>
<p>Show modified date:</p>
<pre><code>[child_pages show_date_modified="true"]<h3>11. Custom Fields (Advanced)</h3>
</code></pre>
<p>Override default values using meta fields.</p>
<pre><code>[child_pages use_custom_excerpt="custom_excerpt"]
[child_pages use_custom_title="custom_title"]
[child_pages use_custom_thumbs="custom_thumb"]
[child_pages use_custom_link="custom_link"]
[child_pages use_custom_link_target="custom_target"]
</code></pre>
<p>Custom field overrides are ignored in list mode.</p>
<h3>12. Sticky Posts</h3>
<p>Sticky posts are ignored by default.</p>
<p>To include them:</p>
<pre><code>[child_pages ignore_sticky_posts="false"]<h3>License</h3>
</code></pre>
<p>This plugin is free software; you may redistribute it and/or modify it under the terms of the GNU General Public License v2 or later.</p>
<p>See https://www.gnu.org/licenses/gpl-2.0.html</p>


CC Child Pages

Display WordPress child pages in a responsive grid or list using a shortcode, Gutenberg block or Elementor widget.

Subpage Listing vs CC Child Pages