Web Development Blog

by Ei Sabai Nyo

10 Mar, 2010

Display 5 latest posts in each category in WordPress    

To display 5 latest posts in each parent category of your WordPress blog, add the following code into the template that you want the result to appear. In our case, we added the following code into our 404 template page (404.php of current theme). Other places that you might want to display a list of posts by category are: 1) Footer, 2) WordPress Custom Archive Page, 3) WordPress Custom Search Page, 4) WordPress Landing Page and so on.


Screenshot of 404 page with a list of posts by category (Wide View)


Screenshot of 404 page with a list of posts by category (Narrow View)

WordPress PHP Code

<div id="page-not-found" class="post-page">
		
<?php 
$cat_args = array(
  'orderby' => 'name',
  'order' => 'ASC',
  'child_of' => 0
);

$categories =   get_categories($cat_args); 

foreach($categories as $category) { 
    echo '<dl>';
    echo '<dt> <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a></dt>';
	
     $post_args = array(
      'numberposts' => 5,
      'category' => $category->term_id 
    );

    $posts = get_posts($post_args);
	
	foreach($posts as $post) {
	?>
		<dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
	<?php 
	} 
	echo '<dd class="view-all"> <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>View all posts in ' . $category->name.'</a></dd>';
	echo '</dl>';
} 
?>
<div class="page-end"><!-- --></div>

</div>

CSS

#page-not-found dl {
width: 200px;
float: left;
padding: 0 18px 0 0;
height: 250px;
}

#page-not-found dt {
font-weight: bold;
font-size: 1.1em;
padding: 10px 0;
}

#page-not-found dt a {
color: #b0bf32;
}

#page-not-found dd.view-all {
border-top: 1px solid #c9c9c9;
font-size: 0.9em;
margin: 5px 0;
padding: 2px 0 0;
text-align: right;
}

#page-not-found dd.view-all a {
color: #999;
}

.page-end { 
clear: both; 
}
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

9 Responses to “Display 5 latest posts in each category in WordPress”

  1. software100s says:

    Thanks for your sharing {Display 5 latest posts in each category in WordPress}

    Topics sharing on my blog this week is :
    1. How to recover CD/DVD corrupted data.
    2. how to use image to encrypt your data.
    3. Lock and conceal files on cd/DVD storage

    Thanks
    http://www.software100s.blogspot.com
    [[secure your computer world]]

  2. nyca says:

    Thanks for sharing.

    Good Luck

  3. This is an excellent and ingenious Bravo and thank you very much for sharing!

  4. Adal says:

    That is the most easily customizable light way of coding a “by category” loop of wordpress posts!
    Thank you so much for providing this :-)

    I used this code in conjunction with photoQ to generate this very light online store: http://www.andreatotalskincare.com/shop

  5. sageman says:

    thanks for this code. how will i exclude a category from the list if i wanted to?

  6. eisabai says:

    You can use ‘exclude’ argument and specify the category id that you wish to exclude. More info at http://codex.wordpress.org/Function_Reference/get_categories

  7. Andrew Edney says:

    Thank you for sharing this – I’m going to add it to my blog.

  8. Ramsey says:

    How do you modify this to work with a custom post type and to loop through each taxonomy associated with the post type?

  9. Upper Pages says:

    Nice post, pls tell how can we exclude some catagory in the above tutorial, nice tutorial keep it up

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories