brendaegeland

A common web design pattern is to have a primary navigation with the top level pages, and then a separate 
navigation element on each page that shows only those pages related to a common top-most page. This widget helps 
to build those secondary navigation elements.
If your page structure was like this:
<ul>
<li>Home</li>
<li>About</li>
<li>— Our History</li>
<li>— Our Staff</li>
<li>— — Employment Opportunities</li>
<li>Services</li>
<li>— Widget Development</li>
<li>— Gadget Deployment</li>
<li>Contact Us</li>
</ul>
and you added the widget with its default settings to a sidebar, it would create a list like this:
<ul>
<li>About</li>
<li>Our History</li>
<li>Our Staff</li>
<li>— Employment Opportunities</li>
</ul>
on any of the pages in the About subtree. Notice that the top-most ancestor, About, is included as the first element of the list.
<h4>Options</h4>
<ol>
<li>Title. The widget title. If left blank, it defaults to the title of the top ancestor page.</li>
<li>Show Title. Maybe you don’t want a title. Just turn it off here.</li>
<li>Top Page. You can select one of your pages to be the top page, or you can choose Default, which determines the top-most ancestor of the page being displayed.</li>
<li>Menu Class. Gets applied to the outermost <ul> element.</li>
<li>Before Links. HTML to be inserted before links in the list.</li>
<li>After Links. HTML to be inserted after links in the list.</li>
</ol>

Subpages in Context

Lists pages and subpages for a given page, or the top ancestor of the current page and all of the ancestor's descendants

caterhamcomputing

CC Child Pages displays child pages of any parent page in a responsive grid or list layout. You can use it in page content, widget areas, or templates using either:
<ul>
<li>the <code>[child_pages]</code> shortcode, or</li>
<li>the CC Child Pages Gutenberg block.</li>
</ul>
Both 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 Use Legacy CSS option in the block sidebar, or by setting <code>use_legacy_css="true"</code> in the shortcode.
This makes it ideal for building sub-navigation sections, page directories, or visual site maps.
A Pro add-on is available at <a href="https://ccplugins.co.uk" rel="nofollow ugc">ccplugins.co.uk</a> adding advanced skins, hover effects, taxonomy filters, and custom field support – while helping fund ongoing development of the free version.
<h3>What’s New in 2.0</h3>
<ul>
<li>Added Gutenberg block with live preview and sidebar options.</li>
<li>Reorganised shortcode attributes for clarity and ease of use.</li>
<li>Introduced modern CSS skins using CSS variables.</li>
<li>Added Legacy CSS toggle for backward compatibility.</li>
<li>Retained the legacy widget for existing sites (see below).</li>
<li>General code and security improvements.</li>
</ul>
<h3>Legacy Widget Notice</h3>
The classic CC Child Pages Widget remains available to ensure existing sites continue to function. 
However, it is now considered legacy. For new builds, please use either the shortcode or the Gutenberg block inside widget areas via the Shortcode or Block widget.
–
<h3>How It Works</h3>
<h3>1. Gutenberg Block</h3>
Add a CC Child Pages block directly in the editor to display child pages of the current or chosen parent. Configure columns, thumbnails, excerpts, and “Read More” links visually from the sidebar. 
The block uses modern CSS-based skins, designed for full theme compatibility. If your theme uses older styles or layout methods, you can toggle Use Legacy CSS in the sidebar to switch to the classic stylesheet, which resolves most compatibility issues automatically.
<h3>2. Shortcode</h3>
Insert <code>[child_pages]</code> into your content. The shortcode supports a comprehensive set of attributes for layout, display, and query control. 
Like the block, it uses modern CSS by default and can be switched into legacy mode using <code>use_legacy_css="true"</code> if required.
–
<h3>Shortcode Overview</h3>
Basic usage: 
 [child_pages] – Lists child pages of the current page.
Display children of another page: 
 [child_pages id=”42″]
Display in a grid: 
 [child_pages cols=”3″ skin=”cards” thumbs=”true”]
<h3>Full Attribute Reference (with defaults)</h3>
Parent and hierarchy
<ul>
<li><code>id</code> – Parent page ID (default: current page via <code>get_the_ID()</code>).</li>
<li><code>page_ids</code> – Comma-separated list of specific page IDs to include (default: empty).</li>
<li><code>depth</code> – Levels of hierarchy to include (default: <code>1</code>).</li>
<li><code>siblings</code> – Show sibling pages instead of children (default: <code>false</code>).</li>
<li><code>show_current_page</code> – Include the current page in results (default: <code>false</code>).</li>
</ul>
Sorting and limits / pagination
<ul>
<li><code>orderby</code> – Sort field (<code>menu_order</code>, <code>title</code>, <code>date</code>; default: <code>menu_order</code>).</li>
<li><code>order</code> – Sort direction (<code>ASC</code> or <code>DESC</code>; default: <code>ASC</code>).</li>
<li><code>offset</code> – Number of results to skip (default: <code>0</code>).</li>
<li><code>limit</code> – Limit total number of pages displayed (default: <code>-1</code> = no limit).</li>
<li><code>posts_per_page</code> – Items per page when paginating (default: <code>-1</code>).</li>
<li><code>page</code> – Force a specific page number for pagination (default: <code>-1</code> = auto).</li>
<li><code>ignore_sticky_posts</code> – Ignore sticky posts (default: <code>true</code>).</li>
<li><code>post_status</code> – Filter by status (default: empty = standard published pages).</li>
</ul>
Layout and style
<ul>
<li><code>cols</code> – Number of columns (default: empty; theme or skin decides).</li>
<li><code>skin</code> – Visual style template (default: <code>simple</code>).</li>
<li><code>list</code> – Force a list layout instead of a grid (default: <code>false</code>).</li>
<li><code>class</code> – Additional CSS class on the wrapper (default: empty).</li>
<li><code>use_legacy_css</code> – Use the classic stylesheet for compatibility (default: <code>false</code>).</li>
</ul>
Content display
<ul>
<li><code>hide_title</code> – Hide page title (default: <code>false</code>).</li>
<li><code>hide_excerpt</code> – Hide excerpt (default: <code>false</code>).</li>
<li><code>hide_more</code> – Hide “Read more …” link (default: <code>false</code>).</li>
<li><code>hide_wp_more</code> – Ignore WP “more” tag (default: <code>false</code>).</li>
<li><code>show_page_content</code> – Show full page content (default: <code>false</code>).</li>
<li><code>truncate_excerpt</code> – Truncate long excerpts (default: <code>true</code>).</li>
<li><code>words</code> – Words to include in truncated excerpt (default: <code>55</code>).</li>
<li><code>thumbs</code> – Show featured image (default: <code>false</code>).</li>
<li><code>link_thumbs</code> – Make thumbnails clickable (default: <code>false</code>).</li>
<li><code>link_titles</code> – Make titles clickable (default: <code>false</code>).</li>
<li><code>title_link_class</code> – Class for linked titles (default: <code>ccpage_title_link</code>).</li>
<li><code>more</code> – Text for “Read more” link (default: <code>Read more ...</code>).</li>
<li><code>link_target</code> – Target for links (e.g. <code>_blank</code>; default: empty).</li>
<li><code>link</code> – Override the link URL (default: empty).</li>
<li><code>use_custom_excerpt</code> – Use custom excerpt field if present (default: empty).</li>
<li><code>use_custom_title</code> – Use custom title field if present (default: empty).</li>
<li><code>use_custom_more</code> – Use custom “more” text field if present (default: empty).</li>
<li><code>use_custom_thumbs</code> – Use custom thumbnail field if present (default: empty).</li>
<li><code>use_custom_link</code> – Meta key for custom link (default: <code>cc_child_pages_link</code>).</li>
<li><code>use_custom_link_target</code> – Meta key for custom target (default: <code>cc_child_pages_link_target</code>).</li>
<li><code>show_author</code> – Show page author (default: <code>false</code>).</li>
<li><code>show_date_created</code> – Show created date (default: <code>false</code>).</li>
<li><code>show_date_modified</code> – Show modified date (default: <code>false</code>).</li>
<li><code>subpage_title</code> – Custom heading above the list/grid (default: empty).</li>
</ul>
Tip: Most users get great results by combining <code>cols</code>, <code>skin</code>, and <code>thumbs</code>. Switch on Legacy CSS only if your theme needs it.
–
<h3>Block Overview</h3>
The CC Child Pages block provides a simple, visual interface for configuring these same options, complete with a live preview. 
It uses modern CSS for all skins and layouts. If your theme uses older styles or layout rules, enabling the Use Legacy CSS checkbox restores compatibility with the classic grid and list templates.
–
<h3>License</h3>
This plugin is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License v2 or later. 
See <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-2.0.html</a>
© 2025 Caterham Computing.

CC Child Pages

Display child pages in a responsive grid or list via a shortcode or Gutenberg block. Includes modern CSS skins with optional legacy mode.

Subpages in Context vs CC Child Pages