I don't understand coding and how you show the child pages featured images on the parents page, I have tried to add coding I've found online but it just shows up on the actual webpage!

I don't understand coding and how you show the child pages featured images on the parents page, I have tried to add coding I've found online but it just shows up on the actual webpage!

• php

• 2 Hi! Unfortunately if you want to solve this with code it does imply at least some basic level of proficiency with PHP. If you include your research on what had you found and tried it might get the question to the point we can point you in the right direction. – Rarst Commented May 30, 2017 at 16:12
• I have found this so far <ul> <?php $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); ?> <?php if ( $child_pages ) : foreach ( $child_pages as $pageChild ) : setup_postdata( $pageChild ); ?> <li> <a href="<?php echo get_permalink($pageChild->ID); ?>" – Emily Cowgill Commented May 31, 2017 at 7:13
• rel="bookmark" title="<?php echo $pageChild->post_title; ?>"> <span class="thumbnail"><?php echo get_the_post_thumbnail($pageChild->ID, 'small-thumb'); ?></span> <span class="title"><?php echo $pageChild->post_title; ?></span> </a> </li> <?php endforeach; endif; ?> </ul> – Emily Cowgill Commented May 31, 2017 at 7:13
• Please edit these into your question. :) – Rarst Commented May 31, 2017 at 7:16

1 Answer 1

Updated:

You have multiple options here.

• You could just insert the images and child-page-titles as normal content in your parent page (this is the easiest solution)
• You can edit the existing page.php(or similar, depends on theme) file inside your theme folder
• You can create a new page-template file to use as a parent-page template
• You can use a shortcode

I personally think that using a shortcode is the best option, as it is theme independent. So if you change the theme in the future this function will continue to work.

There are already multiple existing plugins out there to display child-pages, they will do exactly what you want.

However I want to provide a simple code to do just that. You should create a new plugin or insert the below code inside your functions.php

After this you can insert the shortcode [show_childpages] inside a parent-page, and if this page has children, they will be listed.
Keep in mind, this is just a bare minimum setup:

function show_childpages_shortcode() {

    // a shortcode should just return the content not echo html
    // so we start to create an object, and on the end we return it
    // if we dont do this the shortcode will be displayed in the top of the content
    ob_start();

    // only start if we are on a single page
    if ( is_page() ) {

        // get the ID of the current (parent) page
        $current_page_id = get_the_ID();

        // get all the children of the current page
        $child_pages = get_pages( array( 
            'child_of' => $current_page_id,  
        ) );

        // start only if we have some childpages
        if ($child_pages) {

            // if we have some children, display a list wrapper
            echo '<ul class="childpages">';

            // loop trough each childpage 
            foreach ($child_pages as $child_page) {

                $page_id    = $child_page->ID; // get the ID of the childpage
                $page_link  = get_permalink( $page_id ); // returns the link to childpage
                $page_img   = get_the_post_thumbnail( $page_id, 'medium' ); // returns the featured image <img> element
                $page_title = $child_page->post_title; // returns the title of the child page

                ?>

                <li class="childpage-<?php echo $page_id; ?>">

                    <a href="<?php echo $page_link; ?>">

                        <h4><?php echo $page_title; ?></h4>
                        <?php echo $page_img; //display featured image ?>

                    </a>

                </li>

                <?php

            }//END foreach ($child_pages as $child_page)

            echo '</ul>';

        }//END if ($child_pages)    

    }//END if (is_page())

    // return the object
    return ob_get_clean();

}
add_shortcode( 'show_childpages', 'show_childpages_shortcode' );

This will create an unordered list, each child-page is a single listitem, with a link, title and image.

You can than style the list using normal CSS.