Show posts from one category with thumbnail and description on latest

Is there a widget for WordPress to show posts from one category with a thumbnail and description for latest post?
WIDGET LIKE: Top news section of WWW.GOAL.com.

enter image description here

Related posts

Leave a Reply

2 comments

  1. I don’t know of any widgets or plugins that do this by default. To create this within your theme you would need to write multiple query loop that goes through each category then queries the latest posts from each with a counter so the top post can be styled differently.

    Quick example.

    $cats = get_categories();
    
    foreach ( $cats as $cat ) {  //Loop through all the categories
        $count = 0;
        $args = array(
               'cat' => $cat->term_id,  //uses the current category in the loop
               'posts_per_page' => 4,
               'no_found_rows' => true,  //Performance optimizes the query
               'update_meta_cache' => false,  //We don't need post_meta
               );
    
        echo '<div class="aside-'. $cat->slug .'">'. $cat->name .'</div>';
    
        $cat_q = new WP_Query( $args );
        while( $cat_q->have_posts() ) : $cat_q->the_post();
        $count++
    
        if( $count == 1 ) { ?>  //Sets the output for the top post
            <div id="post-<?php the_ID(); ?>" <?php post_class('feature'); ?>>
                <fig><?php the_post_thumbnail(); ?></fig>
                <h3 class="post-title feature><a href="<?php the_permalink(); ?>><?php the_title(); ?></a></h3>
                <p><?php the_excerpt(); ?></p>
            </div>
            <div class="right-side">
            <ul class="post-list">
    <?php } else { ?>
            <li><a href="<?php the_permalink(); ?><?php the_title(); ?></a></li>
    <?php }
         endwhile; ?>
             </ul>
             </div><!-- /end .right-side -->
             </div><!-- /end .aside-<?php echo $cat->slug; ?> -->
    
    <?php } //Ends our category foreach loop
    
  2. This will do trick,

    <?php $postCount = 0; ?>
        <h1 class="section_title">Category-1</h1>
        <?php query_posts('cat=1&showposts=4'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
        <?php if($postCount == 0) { the_excerpt(); }?> 
        <?php $postCount++; ?>
    <?php endwhile; ?>
    
    <?php $postCount = 0; ?>
        <h1 class="section_title">Category-2</h1>
        <?php query_posts('cat=2&showposts=4'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
        <?php if($postCount == 0) { the_excerpt(); }?> 
        <?php $postCount++; ?>
    <?php endwhile; ?>
    
    <?php $postCount = 0; ?>
        <h1 class="section_title">Category-3</h1>
        <?php query_posts('cat=3&showposts=4'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
        <?php if($postCount == 0) { the_excerpt(); }?> 
        <?php $postCount++; ?>
    <?php endwhile; ?>
    

    Note –

    • Here we are making three queries to show posts in three groups by categories
    • Replace cat=1 with category ID you want to display
    • Showposts=4 will show latest 4 posts you including the first(full post)
    • if($postCount == 0) was used to determine first post in loop and show excerpt