Display the most Recent Post from a Specific Category

Did you see sites with a magazine style theme who are displaying posts from a specific category. Sometimes only the most recent post. Well you can do this too easily.

By default, your main WordPress blog page displays your most recent posts in descending date order. But if you're using categories on your site and your readers will want to see what's new in each category, you might want your blog page to look different.

In this tutorial I'll show you how to do just that. I'll demonstrate how to:

• identify all of the categories on your blog
• display the most recent post for each one, with a featured image if the post has one
• make sure that posts in more than one category don't get duplicated
• add some styling to make it look good
• To follow this tutorial, you'll need:
  • A development installation of WordPress.
  • Some posts and categories set up. I've used a sample of the data from the WordPress theme unit test data.
  • A theme. I'm going to create a child theme of the Twenty Fourteen theme.
  • A code editor.
  The first step is to get the theme set up. I'm going to create a child theme of the Twenty Fourteen theme, with just two files

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

  /* Theme Name: Display the Most Recent Post in Each Category Theme URI: http://code.tutsplus.com/tutorials/display-the-most-recent-post-in-each-category--cms-22677 Version: 1.0.0 Description: Theme to accompany tutorial on displaying the most recent post fort each term in a taxonomy for Tutsplus, at http://bitly.com/14cm0yb Author: Rachel McCollin Author URI: http://rachelmccollin.co.uk License: GPL-3.0+ License URI: http://www.gnu.org/licenses/gpl-3.0.html Domain Path: /lang Text Domain: tutsplus Template: twentyfourteen */ @import url('../twentyfourteen/style.css');

  I'll come back to this file later to add styling, but for now it's all WordPress needs to recognize the child theme.
  As I want my main blog page to display the latest post in each category, I'm going to create a new  file in my child theme.

  Creating an Empty index.php File

  First I'll copy the  file from Twenty Fourteen and edit out the loop and other content so it looks like this:

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

  <?php /**  * The main template file.  *  * Based on the `index.php` file from TwentyFourteen, with an edited version of the `content.php` include file from that theme included here.  */ ?> <?php get_header(); ?> <div id="main-content" class="main-content">     <?php         if ( is_front_page() && twentyfourteen_has_featured_posts() ) {             // Include the featured content template.             get_template_part( 'featured-content' );         }     ?>     <div id="primary" class="content-area">         <div id="content" class="site-content" role="main">         </div>     </div>     <?php get_sidebar( 'content' ); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

  The first step is to identify the categories in your blog. Immediately after the opening tag, add the following:

  1 2 3 4 5 6 7

  <?php     $categories = get_categories();     foreach ( $categories as $category ) {     } ?>

  This uses the function to fetch a list of the categories in the blog. By default this will be fetched in alphabetical order and any empty categories won't be included. This works for me so I'm not adding any extra arguments.
  Then I'm using  to tell WordPress to run through each of these categories in turn and run the code inside the braces. The next step will be to create a query which will run for each of those categories.
  Now you need to define the arguments for your query. Inside the braces, add this:

  1 2 3 4 5

  $args = array(     'cat' => $category->term_id,     'post_type' => 'post',     'posts_per_page' => '1', );

  This will fetch just one post in the current category.

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

  $query = new WP_Query( $args ); if ( $query->have_posts() ) { ?>     <section class="<?php echo $category->name; ?> listing">         <h2>Latest in <?php echo $category->name; ?>:</h2>         <?php while ( $query->have_posts() ) {             $query->the_post();             ?>             <article id="post-<?php the_ID(); ?>" <?php post_class( 'category-listing' ); ?>>                 <?php if ( has_post_thumbnail() ) { ?>                     <a href="<?php the_permalink(); ?>">                         <?php the_post_thumbnail( 'thumbnail' ); ?>                     </a>                 <?php } ?>                 <h3 class="entry-title">                     <a href="<?php the_permalink(); ?>">                         <?php the_title(); ?>                     </a>                 </h3>                 <?php the_excerpt( __( 'Continue Reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) ); ?>             </article>         <?php } // end while ?>     </section> <?php } // end if // Use reset to restore original query. wp_reset_postdata();

  This will output the featured image, title and excerpt for each post, with each enclosed in a link.
  Let's take a look at how this looks now:
  As you can see, there's a problem. My page is displaying the most recent post in each category, but it's duplicating posts because sometimes a post will be the most recent post in more than one category. Let's fix that.
  Above the line where you added the function, add this line:

  This creates an empty array called  which we'll use to store the ID of each post as it's output and then to check if the ID of any post being queried later on is in that array.

  Next, add a new line below the opting of your query, so the first two lines look like this:

  1 2 3 4 5 6

  <?php while ( $query->have_posts() ) {     $query->the_post();     $do_not_duplicate[] = $post->ID;     ?>

  This adds the ID of the current post to the array.
  Finally, add a new argument to your query arguments to avoid outputting any posts in this array. Your arguments will now look like this:

  1 2 3 4 5 6

  $args = array(     'cat' => $category->term_id,     'post_type' => 'post',     'posts_per_page' => '1',     'post__not_in' => $do_not_duplicate );

  This uses the  argument which looks for an array of post IDs.
  Save your file and take a look at your blog page again:
  That's better! Now your posts aren't duplicated.
  At the moment it's all a bit spread out, with the featured images above the post title and excerpt. Let's add some styling to float the image to the left.
  In your theme's  file, add the following:

  01 02 03 04 05 06 07 08 09 10 11 12

  .listing h2 {     margin-left: 10px; } .category-listing img {     float: left;     margin: 10px 2%; } .category-listing .entry-title {     clear: none; }

  Now the content fits more nicely onto the page and is laid out better