1

I am trying to display child post in his parent's post with thumbnail and content. I also created a custom post for products and manage to display only parent post in custom template product.php. Now I want to display all the child of the parents. here is my code.

<?php
/**
 * Template Name: Product Page 
 *
 * Template for displaying a page just with the header and footer area and a "naked" content area in between.
 * Good for landingpages and other types of pages where you want to add a lot of custom markup.
 *
 * @package understrap
 */
get_header();
?>
<section class="inArea">
<div class="container">

    <div class="col-md-12 inconA wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.3s; animation-name: fadeInUp;">

        <h1 class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="1s" style="visibility: visible; animation-duration: 1s; animation-delay: 1s; animation-name: fadeInDown;">our PRODUCTS</h1>  
        <div class="clear"></div>

        <div class="products wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.6s; animation-name: fadeInUp;">
            <div class="clear"></div>
            <?php
            $query = new WP_Query(array('post_type' => 'products', 'paged' => $paged, 'post_parent' => 0, 'posts_per_page' => '-1'));

            if ($query->have_posts()) :
                ?>
                <?php while ($query->have_posts()) : $query->the_post(); ?> 
                    <div class="col-md-3 col-sm-6 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.9s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.9s; animation-name: fadeInRight;">
                        <div class="products_cat">
                            <div class="img_cls"> 
                                <?php
                                if (has_post_thumbnail()) { // check if the post has a Post Thumbnail assigned to it.
                                    the_post_thumbnail('full');
                                }
                                ?>
                            </div>
                            <div class="clearfix"></div>
                            <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2>
                        </div>
                    </div>
                <?php endwhile;
                wp_reset_postdata();
                ?>
                <!-- show pagination here -->
            </div>
        </div>
</section>
<?php else : ?>
<!-- show 404 error here -->
<?php endif; ?>


<?php
get_footer();
1

Just to check I understood your question, you want to display child posts under each parent post?

In that case you have to write one more WP_Query inside your while loop, with parent as current post in loop.

Something like:

        if ($query->have_posts()) :
            ?>
            <?php while ($query->have_posts()) : $query->the_post(); 

?> 
                <div class="col-md-3 col-sm-6 wow fadeInRight">
                    <div class="products_cat">
                        <div class="img_cls"> 
                            <?php
                               if (has_post_thumbnail()) { 
                                   the_post_thumbnail('full');
                               }?>
                        </div>
                        <div class="clearfix"></div>
                        <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2>
                    </div>
                </div>
            <?php
                             endwhile;
            wp_reset_postdata();
            ?>

Edit:

Make a file single-products.php and add

$child_query = new WP_Query(array('post_type' => 'products', 'post_parent' => get_the_ID(), 'posts_per_page' => '-1'));
                           while ($child_query ->have_posts()) : $child_query ->the_post();
?> 
                <div class="col-md-3 col-sm-6 wow fadeInRight">
                    <div class="products_cat">
                        <div class="img_cls"> 
                            <?php
                               if (has_post_thumbnail()) { 
                                   the_post_thumbnail('full');
                               }?>
                        </div>
                        <div class="clearfix"></div>
                        <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2>
                    </div>
                </div>
            <?php
                           endwhile;

Please check syntax errors and add necessary code which haven't specified. Sorry I lost track of indentations after so many edits.

| improve this answer | |
  • Not display any child it just show the featured image and content only of the parents. – Rahul Soni Feb 8 '17 at 6:15
  • Did you add the display code for $child_query loop? – Aniruddha Gawade Feb 8 '17 at 6:32
  • yes, can you just help me for writing the qurey – Rahul Soni Feb 8 '17 at 6:37
  • Query is already there, I don't understand what you want. – Aniruddha Gawade Feb 8 '17 at 6:59
  • but it does not display child post.instead, it displays only featured image and their content only. – Rahul Soni Feb 8 '17 at 7:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.