To loop posts under categories, you should know something.
- get_categories($args): Arguments to retrieve categories and we want to return array List of category objects that ‘parent’ => 0 .
$categories = get_categories(array(
‘parent’ => 0,
‘order’=>’DESC’,
));
- foreach ( $categoriesas$category ): loop category , show category name and add herf for category link <?php echo get_category_link($category->term_id )?>
count total post <?php echo$category->count?> under parent category - query post under ‘cat’=>$category->cat_ID then loop post foreach( $the_query as $post )
and set post per page or ‘numberposts’=>4
follow Code as below:
<main class="container">
<section class="row catparent-list my-4">
<div class="col-lg-8 col-md-8 h-100">
<?php
global $post;
$categories = get_categories(array(
'parent' => 0,
'order' => 'DESC',
));
foreach ($categories as $category) :
?>
<div class="mb-3 border-bottom py-3 ">
<a class="border bg-light d-block p-3 rounded mb-3 text-uppercase" href="<?php echo get_category_link($category->term_id) ?>">
<?php echo $category->name ?> <span class="badge rounded-pill bg-primary" title="total post"><?php echo $category->count ?>
<i class="fa fa-sticky-note" aria-hidden="true"></i></span>
</a>
<p><?php echo $category->description ?></p>
<?php
$args = array(
'numberposts' => 4,
'offset' => 0,
'cat' => $category->cat_ID
);
$the_query = get_posts($args);
if ($the_query) : ?>
<div class="row">
<?php
foreach ($the_query as $post) :
?>
<div class="col-lg-6 col-md-6 mb-3">
<a href="<?php the_permalink(); ?>">
<div class="card h-100">
<?php getthumbnail(); ?>
<div class="card-body">
<div class="card-title">
<?php the_title(); ?>
</div>
<div class=" card-text card-description hidden-phone">
<?php the_excerpt(); ?>
</div>
</div>
<div class="card-footer ">
<div class="entry-date"> <?php echo time_ago(); ?></div>
</div>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
<?php
endif;
?>
</div>
<?php endforeach; ?>
<!-- end list category -->
</div>
<div class="col-lg-4 col-md-4 h-100">
<?php get_sidebar(); ?>
</div>
</main><!-- #main -->
