Takayuki Miyauchi

<p>You can use shortcode for display child pages from the page.</p>
<p><a href="https://github.com/miya0001/child-pages-shortcode" rel="nofollow ugc">This plugin maintained on GitHub.</a></p>
<h4>Some features</h4>
<ul>
<li>This plugin will add shortcode <code>[child_pages]</code> display child pages.</li>
<li>You can customize default HTML template on your plugin.</li>
<li>This plugin will be able to “excerpt” to the pages.</li>
</ul>
<h4>Example</h4>
<p>Display child pages of the current page.<br />
    [child_pages width=”33%”]</p>
<h4>Args</h4>
<ul>
<li>id – ID of page (Optional)</li>
<li>size – Post thumbnail size. e.g. ‘thumbnail’ or ‘large’</li>
<li>width – width of block for child pages.</li>
<li>disable_shortcode – Shortcode not work in the template if set true.</li>
<li>disable_excerpt_filters – filters not work for the excerpt if set true.</li>
</ul>
<h4>filter hooks example</h4>
<p>Filter for query_posts() query.</p>
<pre><code><?php
    // default args
    $args = array(
        'post_status' => 'publish',
        'post_type' => 'page',
        'post_parent' => $id_for_the_post,
        'orderby' => 'menu_order',
        'order' => 'ASC',
        'nopaging' => true,
    );

    add_filters('child-pages-shortcode-query', "my_query");
    function my_query($args) {
        //
        // some code here
        //
        return $args;
    }
?>
</code></pre>
<p>Filter for default template.</p>
<pre><code><?php
    add_filter("child-pages-shortcode-template", "my_template");
    function my_template($template) {
        return '<div class="%class%"><a href="%post_url%">%post_thumb%</a></div>';
    }
?>
</code></pre>
<p>Filter for stylesheet URI.</p>
<pre><code><?php
    add_filter("child-pages-shortcode-stylesheet", "my_style");
    function my_style($url) {
        return 'http://example.com/path/to/style.css';
    }
?>
</code></pre>
<p>Default Template</p>
<pre><code><div id="child_page-%post_id%" class="child_page" style="width:%width%;">
    <div class="child_page-container">
        <div class="post_thumb"><a href="%post_url%">%post_thumb%</a></div>
        <div class="post_content">
            <h4><a href="%post_url%">%post_title%</a></h4>
            <div class="post_excerpt">%post_excerpt%</div>
        </div>
    </div>
</div>
</code></pre>
<p>Template valiables</p>
<ul>
<li>%post_id% – ID of the Page</li>
<li>%width% – Width of block for single page</li>
<li>%post_url% – Page permalink</li>
<li>%post_thumb% –  for Post thubmail</li>
<li>%post_title% – Page title</li>
<li>%post_excerpt% – Page excerpt</li>
</ul>
<h4>Support</h4>
<ul>
<li>http://wpist.me/wp/child-pages-shortcode/ (en)</li>
<li>http://firegoby.theta.ne.jp/wp/child-pages-shortcode (ja)</li>
</ul>
<h4>Contributors</h4>
<ul>
<li><a href="http://wpist.me/" rel="nofollow ugc">Takayuki Miyauchi</a></li>
</ul>
<h3>Credits</h3>
<p>This plug-in is not guaranteed though the user of WordPress can freely use this plug-in free of charge regardless of the purpose.<br />
The author must acknowledge the thing that the operation guarantee and the support in this plug-in use are not done at all beforehand.</p>
<h3>Contact</h3>
<ul>
<li>http://wpist.me/</li>
<li><a href="https://twitter.com/#!/wpist_me" rel="nofollow ugc">@wpist_me</a></li>
</ul>


Child Pages Shortcode

You can use shortcode for display child pages from the page.

shazdeh

<p>The shortcode requires the widget ID, but no need to guess, the plugin generates the code for you. To override the widget title for a widget you can use the “title” parameter:<br />
    [widget id=”text-1″ title=”New title”]<br />
You can also hide the widget title entirely if desired:<br />
    [widget id=”text-1″ title=”0″]</p>
<p>Additional Parameters:</p>
<ul>
<li><strong>container_tag</strong>: the HTML tag to use for the widget container, default: <code>div</code></li>
<li><strong>container_class</strong>: CSS classname added to the widget container, default: <code>widget %2$s</code> (Note: uses sprintf for variable substitution)</li>
<li><strong>container_id</strong>: HTML ID attribute for the widget container, default: <code>%1$s</code> (Note: uses sprintf for variable substitution)</li>
<li><strong>title_tag</strong>: HTML tag to use for the widget title wrapper, default: <code>h2</code></li>
<li><strong>title_class</strong>: CSS classname for the widget title wrapper, default: <code>widgettitle</code></li>
</ul>


Widget Shortcode

I had tried another plugin to use a widget in the gutenberg block editor on a page, however that plugin had some issues so was not ideal.

Widget shortcode enabled me to add my widget by copying the generated shortcode to the shortcode block in the block editor, resulting in the widget being displayed perfectly on the page. 

Works perfectly with the block editor

Adds [widget] shortcode which enables you to output widgets anywhere you like.

Child Pages Shortcode vs Widget Shortcode