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><strong>CC Child Pages</strong> 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:</p>
<ul>
<li>the <code>[child_pages]</code> <strong>shortcode</strong>, or</li>
<li>the <strong>CC Child Pages Gutenberg block</strong>.</li>
</ul>
<p>Both use a <strong>modern CSS system</strong> based on CSS variables and flexible grid layouts for improved theme compatibility. For older or heavily customised themes, a <strong>Legacy CSS</strong> mode is available – either by checking the <strong>Use Legacy CSS</strong> option in the block 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>A <strong>Pro add-on</strong> 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.</p>
<h3>What’s New in 2.0</h3>
<ul>
<li>Added <strong>Gutenberg block</strong> with live preview and sidebar options.</li>
<li>Reorganised shortcode attributes for clarity and ease of use.</li>
<li>Introduced <strong>modern CSS skins</strong> using CSS variables.</li>
<li>Added <strong>Legacy CSS</strong> toggle for backward compatibility.</li>
<li>Retained the <strong>legacy widget</strong> for existing sites (see below).</li>
<li>General code and security improvements.</li>
</ul>
<h3>Legacy Widget Notice</h3>
<p>The classic <strong>CC Child Pages Widget</strong> remains available to ensure existing sites continue to function.<br />
However, it is now considered <em>legacy</em>. For new builds, please use either the <strong>shortcode</strong> or the <strong>Gutenberg block</strong> inside widget areas via the <em>Shortcode</em> or <em>Block</em> widget.</p>
<p>–</p>
<h3>How It Works</h3>
<h3>1. Gutenberg Block</h3>
<p>Add a <strong>CC Child Pages</strong> 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.<br />
The block uses <strong>modern CSS-based skins</strong>, designed for full theme compatibility. If your theme uses older styles or layout methods, you can toggle <strong>Use Legacy CSS</strong> in the sidebar to switch to the classic stylesheet, which resolves most compatibility issues automatically.</p>
<h3>2. Shortcode</h3>
<p>Insert <code>[child_pages]</code> into your content. The shortcode supports a comprehensive set of attributes for layout, display, and query control.<br />
Like the block, it uses <strong>modern CSS</strong> by default and can be switched into legacy mode using <code>use_legacy_css="true"</code> if required.</p>
<p>–</p>
<h3>Shortcode Overview</h3>
<p><strong>Basic usage:</strong><br />
    [child_pages] – Lists child pages of the current page.</p>
<p><strong>Display children of another page:</strong><br />
    [child_pages id=”42″]</p>
<p><strong>Display in a grid:</strong><br />
    [child_pages cols=”3″ skin=”cards” thumbs=”true”]</p>
<h3>Full Attribute Reference (with defaults)</h3>
<p><strong>Parent and hierarchy</strong></p>
<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>
<p><strong>Sorting and limits / pagination</strong></p>
<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>
<p><strong>Layout and style</strong></p>
<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>
<p><strong>Content display</strong></p>
<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>
<p><em>Tip:</em> Most users get great results by combining <code>cols</code>, <code>skin</code>, and <code>thumbs</code>. Switch on <strong>Legacy CSS</strong> only if your theme needs it.</p>
<p>–</p>
<h3>Block Overview</h3>
<p>The <strong>CC Child Pages block</strong> provides a simple, visual interface for configuring these same options, complete with a live preview.<br />
It uses <strong>modern CSS</strong> for all skins and layouts. If your theme uses older styles or layout rules, enabling the <strong>Use Legacy CSS</strong> checkbox restores compatibility with the classic grid and list templates.</p>
<p>–</p>
<h3>License</h3>
<p>This plugin is free software; you can redistribute it and/or modify it under the terms of the <strong>GNU General Public License v2 or later</strong>.<br />
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></p>
<p>© 2025 Caterham Computing.</p>


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.

Child Pages Card vs CC Child Pages