How to get child category list post in one template?

Question

Here is what I want to have

My category Structure in WP admin

Cat Parent
  -Cat Child 1
  -Cat Child 2
  -Cat Child 3
  -Cat Child 1

This what I want to have in one template:

It show the list of post in Cat Parent Children Category

Cat Child 1
 -Post1 Child 1
 -Post2 Child 1
 -Post3 Child 1
 -So on... .

Cat Child 2
 -Post1 Child 2
 -Post2 Child 2
 -Post3 Child 2
 -So on... .

Cat Child 3
 -Post1 Child 3
 -Post2 Child 3
 -Post3 Child 3
 -So on... .

Does anyone have done it before or anyone have an idea on how to code this?

Thanks

Answer 1

get the child categories, using get_categories(); then loop through them with a foreach loop, using WP_Query() :

<?php  $cats = get_categories('child_of='.get_query_var('cat')); 

    foreach ($cats as $cat) :

    $args = array(
    'posts_per_page' => 3, // max number of post per category
    'category__in' => array($cat->term_id)
    );
    $my_query = new WP_Query($args); 

        if ($my_query->have_posts()) : 
        echo '<h3>'.$cat->name.'</h3>';

        while ($my_query->have_posts()) : $my_query->the_post(); ?>     
        <?php /*general loop output; for instance: */ ?>
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>    <br />  

        <?php endwhile; ?>

        <?php else : 
        echo 'No Posts for '.$cat->name;                
        endif; 

    endforeach; ?>

Answer 2

Parent child taxonomy loop

$taxonomy = 'product_cat';
$category = get_terms($taxonomy);

echo '<ul>';

foreach( $category as $cat ){
    $link = get_term_link( $cat->slug, $taxonomy );

    if(empty($cat->parent)){
        echo '<li><a href="' . $link . '">' . $cat->name . '</a>' . '<strong>' . $cat->count . '</strong></li>';

    }
    $loop = 0;

    foreach( $category as $par ){
        $link = get_term_link( $par->slug, $taxonomy );
        if($cat->term_id == $par->parent ){

        if($loop == 0){ echo '<ul>'; }
        echo '<li><a href="' . $link . '">' . $par->name . '</a>' . $par->count . '</li>';

        $loop++;
        }
    }
    if($loop > 0){ echo '</ul>'; }

}

echo '</ul>';

Answer 3

<ul class="catTags">
<?php
        $args = array(
        'show_option_all'    => '',
        'orderby'            => 'count',
        'order'              => 'DESC',
        'style'              => 'list',
        'show_count'         => 0,
        'hide_empty'         => 1,
        'use_desc_for_title' => 1,
        'child_of'           => 0,
        'feed'               => '',
        'feed_type'          => '',
        'feed_image'         => '',
        'exclude'            => 1,
        'exclude_tree'       => '',
        'include'            => '',
        'hierarchical'       => 1,
        'title_li'           => __( '' ),
        'show_option_none'   => __('No categories'),
        'number'             => null,
        'echo'               => 1,
        'depth'              => 2,
        'current_category'   => 0,
        'pad_counts'         => 0,
        'taxonomy'           => 'category',
        'walker'             => null    
        ); 

        wp_list_categories( $args );
    ?>
    </ul>   
    </div>

    <?php get_sidebar(); ?>

And the CSS :

section .primary ul.catTags {
 padding:0px;
}

section .primary ul.catTags li {
 float: left;
 list-style-type: none;
 margin: 0px 20px 10px 20px;

}

section .primary ul.catTags li a,section .primary ul.catTags li a:visited {
 font-size:18px;
 text-decoration:underline;
}
section .primary ul.catTags li a:hover {
 text-decoration:none;
}
section .primary ul.catTags li ul.children {
 max-width:200px;
}
section .primary ul.catTags li ul.children li {
 margin: 0px 5px 3px 5px;
 display: inline;
}
section .primary ul.catTags li ul.children li a, section .primary ul.catTags li ul.children li a:visited {
 font-size:14px;
 text-decoration:none;
}
section .primary ul.catTags li ul.children li a:hover {
 text-decoration:underline;
}