Display 5 latest posts in each category in WordPress

10 Mar, 2010

Display 5 latest posts in each category in WordPress

Web Development » PHP, Snippets, Tutorials, WordPress » 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;
}