WordPress.org

Ready to get started?Download WordPress

Forums

display child pages (featured images) in a parent page (16 posts)

  1. jds13145
    Member
    Posted 1 year ago #

    How do I display subpages featured images within a parent page?
    I.e. I want the featured image of subpage http://www.xyz.com/items/flashlight
    to show on page http://www.xyz.com/items, I'd like to do this automatically as I include more an more items.

    you should know that I am an idiot with WP, I can copy and past html into the html editor and thats more or less it.

    Much obliged for any help.

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    want the featured image of subpage to show on page

    where?
    above or below the page content?
    in the sidebar?

    general (untested):

    <?php $subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id' ));
    if( $subs->have_posts() ) : while( $subs->have_posts() ) : $subs->the_post();
    echo get_the_post_thumbnail($post->ID);
    endwhile; endif; wp_reset_postdata(); ?>

    http://codex.wordpress.org/Class_Reference/WP_Query
    http://codex.wordpress.org/Class_Reference/WP_Query#Post_.26_Page_Parameters
    http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

  3. jds13145
    Member
    Posted 1 year ago #

    Below the Page content, which will be minimal.

    Am I supposed to create a new page theme to run this in text editor and only have this info above?

    Is there any way in just doing this through the html input of a normal page?

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    forgot to mention:
    add this code to page.php, in your case below the line with <?php the_content(); ?>

    i.e. edit page.php in the dashboard - appearance - editor

  5. jds13145
    Member
    Posted 1 year ago #

    I'm sorry to be a pain, but I copied and pasted the info you had above, put it in the page.php through editor under the content tag. Updated the file and nada on the actual page.

    I went back into the page (which is both a parent and child) and updated that as well.

    Still nothing.

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    just tested the code, and it is working in my local test site.

    can you paste the full code of page.php into a pastebin.com and post the link to it here, so someone can check the code?

    can you post a link to a parent page which has at least one child page containing a featured image?

    the page (which is both a parent and child)

    ? - when viewing a parent page, the code should show the 'featured image' aka 'the post thumbnail' of the child page.

  7. jds13145
    Member
    Posted 1 year ago #

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I can't see nothing unusual in the code of page.php.

    have you double-checked:

    - that the page you are looking at has child pages?
    - that those child pages (at least some of them) have a 'featured image' assigned?

    test 1:
    add
    <?php the_post_thumbnail(); ?>
    into page.php, below the
    <?php the_content();?>
    then view the child pages to see if the featured image shows.

    and test 2:
    add
    <ul><?php wp_list_pages('title_li=&child_of='.$post->ID); ?></ul>
    into page.php, below the
    <?php the_content();?>
    then view the parent page to see if you get a list of all child pages (regardless if with or without featured images).

  9. nate.taylor
    Member
    Posted 1 year ago #

    further to this..
    This works an absolute charm, apart from the fact that I have many child pages, each with their own featured image, and posting into a custom post from the child page. The code only shows the first image from the first child page.

    I'm fairly new to php/wordpress but heres the code. I tried putting into foreach() but still same result.

    Any help or direction would be appreciated greatly.

    [code moderated - please use the pastebin for any code over 10 lines]

  10. Russ
    Member
    Posted 1 year ago #

    This worked for me, however the images are full size. How can I modify it to reference the actual thumbnail size.

    Here is what I have now:

    <?php the_content(); ?>
    
    <!--Child Page Thumbnails Start-->
    <?php $subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id' ));
        if( $subs->have_posts() ) : while( $subs->have_posts() ) : $subs->the_post();
        echo get_the_post_thumbnail($post->ID);
        endwhile; endif; wp_reset_postdata(); ?>
    <!--Child Page Thumbnails End-->
  11. Russ
    Member
    Posted 1 year ago #

    One other thing...

    I would like to reference the Child Page Name just above the thumbnail. I would also like the child page name and thumbnail hyper-linked to the child page.

    Ultimately, I want to list these in a grid pattern, but I can take care of that on the CSS side... I just need the content outputted so that I can work with it.

    Thanks!

  12. Russ
    Member
    Posted 1 year ago #

    I figured out how to reference the thumbnail size:

    <?php the_content(); ?>
    
    <!--Child Page Thumbnails Start-->
    <?php $subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id' ));
    if( $subs->have_posts() ) : while( $subs->have_posts() ) : $subs->the_post();
    echo get_the_post_thumbnail($post->ID, 'thumbnail');
    endwhile; endif; wp_reset_postdata(); ?>
    <!--Child Page Thumbnails End-->

    Now onto figuring out the page titles and hyperlinks...

  13. Russ
    Member
    Posted 1 year ago #

    Got it figured out.

    This will show all child page featured image thumbnails and hide references to child pages that do not have featured images:

    <?
    $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY menu_order", 'OBJECT');
    
    if ( $child_pages ) :
        foreach ( $child_pages as $pageChild ) :
            setup_postdata( $pageChild );
            $thumbnail = get_the_post_thumbnail($pageChild->ID, 'thumbnail');
            if($thumbnail == "") continue; // Skip pages without a thumbnail
    ?>
            <div class="child-thumb">
              <a href="<?= get_permalink($pageChild->ID) ?>" rel="bookmark" title="<?= $pageChild->post_title ?>">
                <?= $pageChild->post_title ?><br /><?= $thumbnail ?>
              </a>
            </div>
    <?
        endforeach;
    endif;
    ?>
    <div style="clear:left;"></div>

    Then you can add some CSS like this:
    .child-thumb {margin:20px 5px 0;float:left;text-align:center;}

  14. dcurran
    Member
    Posted 1 year ago #

    Thanks for the code. Everything works fine except that I just realized it is also displaying the featured images from pages that have not yet been published and are set as draft. Has anyone else run into this problem, or found a fix?

    Thanks!

  15. slaton
    Member
    Posted 1 year ago #

    Is it possible to put this coding into a sidebar?

    Ideally, I would be able to input the parent page, so that I could create two Text menus and then use Dynamic Widgets to specify which pages each sidebar would appear.

  16. jwjewhurst
    Member
    Posted 11 months ago #

    What about showing the pages in either ascending or descending. Mainly newest first for me?

Topic Closed

This topic has been closed to new replies.

About this Topic