Katsushi Kawamori

<h4>Displays child page archives in card form</h4>
<ul>
<li>Generated with shortcode</li>
<li>Generated with block</li>
<li>Can sort in ascending order and descending order.</li>
<li>Specify the number of characters from the text and display the excerpt.</li>
<li>Displays an featured image. If there is no featured image, a site icon is displayed, and if there is no site icon, a WordPress icon is displayed.</li>
<li>Can specify the size of the displayed image.</li>
</ul>
<h4>How it works</h4>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/AYzcpFhYu2c?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h4>Customize</h4>
<ul>
<li>Template files allow for flexible <a href="https://github.com/katsushi-kawamori/Child-Pages-Card-Templates" rel="nofollow ugc">customization</a>.</li>
<li>The default template file is <code>template/childpagescard-template-html.php</code> and <code>template/childpagescard-template-css.php</code>. Using this as a reference, you can specify a separate template file using the filters below.</li>
</ul>
<pre><code>/** ==================================================
 * Filter for template file of html.
 *
 */
add_filter(
    'child_pages_card_generate_template_html_file',
    function () {
        $wp_uploads = wp_upload_dir();
        $upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
        $upload_dir = untrailingslashit( $upload_dir );
        return $upload_dir . '/tmp/childpagescard-template-html.php';
    },
    10,
    1
);
</code></pre>
<pre><code>/** ==================================================
 * Filter for template file of css.
 *
 */
add_filter(
    'child_pages_card_generate_template_css_file',
    function () {
        $wp_uploads = wp_upload_dir();
        $upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
        $upload_dir = untrailingslashit( $upload_dir );
        return $upload_dir . '/tmp/childpagescard-template-css.php';
    },
    10,
    1
);
</code></pre>
<ul>
<li>CSS files can be set separately. Please see the filters below.</li>
</ul>
<pre><code>/** ==================================================
 * Filter for CSS file.
 *
 */
add_filter(
    'child-pages-card_css_url',
    function () {
        $wp_uploads = wp_upload_dir();
        $upload_url = $wp_uploads['baseurl'];
        if ( is_ssl() ) {
            $upload_url = str_replace( 'http:', 'https:', $upload_url );
        }
        $upload_url = untrailingslashit( $upload_url );
        return $upload_url . '/tmp/childpagescard.css';
    },
    10,
    1
);
</code></pre>


Child Pages Card

Displays child page archives in card form.

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.

Child Pages Card vs CC Child Pages