What we’re going to do here is for every top-level categories, we will:

1. display the category title in bold and the category description.
2. list the latest post title prominently displayed as the first entry and short excerpt.
3. list is followed by four or five post titles sorted by date.
4. finally all children/subcategories of the category listed at the bottom.

Something like what we have here on the right illustration. Using WordPress, I’ve always wanted to replicate the myriad of ways most news and magazine-style websites present its contents.

If you are familiar with wp_list_categories(), which is the one of main category tags that handles how categories are formatted and displayed, you’ll realise wp_list_categories() alone is not enough. We’ll also use get_categories(), get_cat_ID()and a wpdb query direct into WordPress’s database.

Also, I think the coding in this article is more suited for WordPress themers who prefer to hard-code it into their themes. The solution is a very straightforward sequential code where you can just copy and paste it into your sidebar.php (or wherever you wish) for instance.

Let’s get down to the source codes …

CSS stylesheet

ul.category_list {width:300px; list-style:none; padding:0; margin:0;}
.category_title {background:#333; color:#fff; padding:0.2em 0.5em; font-size:1em; margin:0; text-transform:uppercase;}
.category_box {background:#f8f8f8; border:1px solid #333; border-width:0 1px 1px 1px; margin:0 0 2em 0;}
.category_description {background:#aaa; border-bottom:3px solid #ccc; color:#eee; font-style:italic; display:block; padding:0.5em; font-size:0.9em; font-weight:bold;}
ul.category_posts {list-style:none; margin:0 1em; padding:0; font-size:0.8em;}
ul.category_posts li {border-bottom:1px dotted #bbb; padding:0.75em 0;}
ul.category_posts li.last {border:none; padding:0.5em 0; margin:0 0 1em 0;}
ul.category_posts li a {color:#333;}
ul.category_posts li a.more_articles {text-decoration:underline; font-weight:bold;}
ul.subcategory_list {color:#aaa; padding:1em; margin:0; background:#eee; border-top:1px solid #ccc; font-size:0.8em; font-weight:bold;}
ul.subcategory_list li {display:inline; margin:0 0 0 0.75em;}
ul.subcategory_list li a {color:#333;}
.first_post {font-size:1.2em; font-weight:bold;}
.first_post_excerpt {color:#888; font-weight:normal; font-style:italic;}

PHP and HTML markup

<?php // get category IDs of Featured, Uncategorized and Personal for exclusion
$categories_to_exclude = get_cat_ID('featured').','.get_cat_ID('uncategorized').','.get_cat_ID('personal');

// get category IDs for all subcategories (categories where parent is not 0) for exclusion
$subcats = $wpdb->get_results("SELECT term_id FROM $wpdb->term_taxonomy WHERE taxonomy='Category' AND parent>0");
foreach ((array)$subcats as $subcat) { $categories_to_exclude .= ','.$subcat->term_id; }

// get all categories minus excluded categories
$cats = get_categories('exclude='.$categories_to_exclude.'&amp;orderyby=name&amp;hide_empty=0'); ?>

<h3>CATEGORIES</h3>

<ul class="category_list">

<?php foreach ((array)$categories as $category) { ?>
	<li class="category_box"><h5 class="category_title">• <?php echo $category->cat_name; ?></h5>
			<div class="category_description">“<?php echo $category->category_description; ?>” </div>

			<?php $the_query = new WP_Query('cat='.$category->cat_ID.'&amp;showposts=5&amp;orderby=post_date');
			$first = true; ?>

			<ul class="category_posts">
			<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

				<?php if ($first) { ?>
					<li class="first_post"><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>" ><?php the_title(); ?></a><br />
					<small class="first_post_excerpt"><?php echo strip_tags(get_the_excerpt(), '<a><strong>'); ?></small>
				<?php $first = false;
				} else { ?>
					<li><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>" ><?php the_title(); ?></a>
				<?php } ?>
				</li>
			<?php endwhile; ?>
			<li class="last"><a class="more_articles" href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>" >More articles in <?php echo $category->cat_name; ?> »</a></li>
			</ul>

		<?php $sub_categories =  wp_list_categories('echo=0&amp;orderby=name&amp;title_li=&amp;hierarchical=0&amp;child_of='.$category->cat_ID);
		if ($sub_categories != "<li>No categories</li>") { ?>
			<ul class="subcategory_list">See Also: <?php echo $sub_categories; ?></ul>
		<?php } ?>
	</li>
<?php } ?>
</ul>

I hope you find this short tutorial useful. Thanks for reading!