One technique that is most common with WordPress magazine or news style themes is the display of an archive of the latest posts by category, as simple titles or with post excerpts. This is useful for the previously mentioned theme styles, but not only. It can be used to set up custom blog homepages, 404 pages, landing pages or even a special archive page.

This tutorial will help you build a ‘Latest Posts by Category Archive‘ in a very easy way. The widths in the CSS styling presented below have been calculated based on the default WordPress theme, assuming that is the most common theme available to anyone.

If you are looking for a plugin to generate such an archive, please check out: WP Plugin: Latest Posts by Category Archive.

Setting up the page template

Open up you favorite code editor and create a blank document. Save the document as ‘category-archive.php’ (or any other name you’d prefer) in the default WordPress theme directory (wp-content/themes/default).

The first step is to asign our new template a name and a page-like structure, so based on the default theme’s page template, the code you should paste in your new document is:

<?php
/*
Template Name: Category Archive
*/
?>

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>
	</div>
	<?php endwhile; endif; ?>

	<!-- Category Archive Start -->
	<!-- Category Archive End -->

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The template above will make sure to display the page name you set up, and also, any additional content you might want to add before the archive, from you WordPress page editor. We will be adding our ‘latest posts by category’ code between the ‘Category Archive Start’ and ‘Category Archive End’ comments.

Adding the archive’s PHP code

Simply put, the code below will cycle through the first-level categories of your blog (parent categories), check for the ones that are not empty and if this condition is met, return an unordered list of the latest 5 post from each category. Empty categories will not be displayed.

<?php
/*
Template Name: Category Archive
*/
?>

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>
	</div>
	<?php endwhile; endif; ?>

	<!-- Category Archive Start -->
	<ul class="catArchive">
	<?php
	$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");

	$catCounter = 0;

	foreach ($catQuery as $category) {

		$catCounter++;

		$catStyle = '';
		if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';

		$catLink = get_category_link($category->term_id);

		echo '<li'.$catStyle.'><h3><a href="'.$catLink.'" title="'.$category->name.'">'.$category->name.'</a></h3>';
			echo '<ul>';

			query_posts('cat='.$category->term_id.'&showposts=5');?>

			<?php while (have_posts()) : the_post(); ?>
				<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
			<?php endwhile; ?>

				<li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>
			</ul>
		</li>
		<?php }	?>
	</ul>
	<!-- Category Archive End -->

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

You should now save your file, because we’re done editing it. As you can see, the archive code has been added between the ‘Start’ and ‘End’ comments. Now let’s go through the code and dissect it.

The PHP code explained

The first thing we do is to set up a database query to cycle through the non-empty parent categories:

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");

You can further tweak this query to exclude categories or specify categories to be listed based on their ID, with the use of the MySQL comparison functions NOT IN or IN.

Let’s say that you’d like the archive to exclude the categories with IDs 2, 5 and 6. Your query would become:

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id NOT IN (2,5,6)");

Similarly, if you want to display only the categories with IDs 2,5 and 6, you’d have:

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id IN (2,5,6)");

For further help with comparison operators and functions, you can check out the MySQL manual.

Next, we set up a category counter which will be incremented each time a category will be displayed. Based on this counter, the code adds a ‘catAlt‘ class that you can use to style differently consecutive categories. In our case, we’ll use it to shift the categories into two columns. This is were the alternate classes are assigned:

$catCounter++;

$catStyle = '';
if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';

The category list is built by the use of foreach and it helps retrieve vital information about the categories, such as name and permalink:

foreach ($catQuery as $category) {
	/* Code used to retrieve and display the latest posts */
}

After we display the category title and link through this line of code

echo '<li'.$catStyle.'><h3><a href="'.get_category_link($category->term_id).'" title="'.$category->name.'">'.$category->name.'</a></h3>';

we continue by using a custom query to retrieve the latest 5 posts from the current category in the cycle, followed by a link to the complete category archive:

query_posts('cat='.$category->term_id.'&showposts=5');?>

<?php while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
	<li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>

And that’s about everything in terms of coding! Now, onto the CSS styling.

Styling the archive

Find the style.css file in your default theme’s directory, open it and scroll down to the end of the file. Now copy the code below and paste it in your file.

/* Latest posts by category styles */

.catArchive {
	width: 450px;
	overflow: hidden;
	margin: 20px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.catArchive h3 {
	font: normal bold 18px sans-serif;
	border-bottom: 1px solid #666;
	margin: 0;
	padding: 0 0 3px 0;
	display: block;
}

.catArchive li {
	display: block;
	float: left;
	width: 210px;
	margin: 0 30px 30px 0;
}

.catArchive ul {
	margin: 0;
	padding: 0;
}

.catArchive li li {
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: 4px 0;
}

.catAlt {
	margin-right: 0 !important;
}

Now, save the file. We’re done!

Note: Keep in mind that column sizes have been calculated based on the available space (450 pixels) in the default theme’s content area. So, our columns should each be 210 pixels wide, with a 30 pixels spacing between them.

Since the column shifting is done with the help of float, I’ve set the overflow to hidden to stretch the list full height. This can only work with a fixed given container width, which in our case is 450px set on .catArchive.

If your new to “floating”, Sarah has posted a fairly easy to understand article about the float property on BloggingTips.com.

You can download an archive containing both source files: Download.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

wp_list_pages() is one of the most common WordPress template tags. Sometimes, the little white space that some browsers add to the output of this function can create a big mess in your theme’s template, making it hard to style, especially when trying to create a horizontal list. The fix for this is quite simple and requires minimum coding knowledge, if none at all.

The Problem

The wp_list_pages() generates either a series of <li> elements containing links to all of you blog’s pages, or a full unordered list with a heading at the beginning.
The output of this list looks like this:

<ul>
<li><a href="#">Page name</a></li>
<li><a href="#">Page name</a></li>
</ul>

While some browsers don’t have a problem with elements being generated on new lines, in some, this method causes a white space to show up in front of each list item. This space becomes visible and annoying when trying to create a horizontal menu with background colors and equal horizontal spacing.

The Fix

To get rid of the white space, your output would need to look like this:

<ul><li><a href="#">Page name</a></li><li><a href="#">Page name</a></li></ul>

This can be achieved by using a small PHP function that will take the code generated by wp_list_pages() and turn it into something similar to the example above. To make this function available for use in your templates you need to edit the “functions.php” file, found in you theme’s directory. If you don’t have such a file, create an empty one and name it “functions.php”.

In functions.php add the following code at the beginning or at the end of the file. Just be careful not to paste it inside another function and cause the script to break.

function qbkl_nospace($input) {
$output = str_replace(array("\n", "\r", "\t"), "", $input);
echo $output;
}

Usage

To apply the fix, simply find the wp_list_pages() in your theme’s template (usually header.php or sidebar.php) and edit the code according to the following example:

Find:

<?php wp_list_pages(); ?>

Replace with:

<?php qbkl_nospace(wp_list_pages()); ?>

This fix works with any function or template tag that generates the same problem.

The white space generated by wp_list_pages() has been a nightmare for many WordPress themes designers. It doesn’t have to be one for you!

Where is wp_list_pages() located?

Although it’s not recommended that you alter the base code of WordPress, advanced users might feel like taking such a job.

If you need to alter the output, wp_list_pages is defined in the post-template.php file, in the “wp-includes” folder of your WordPress blog.

For further tweaking, you might also need to adjust the walk_page_tree function, located in the same file, which makes use of the class Walker_Page, extending the Walker class, both located in wp-includes/classes.php.

* The above file names and locations are confirmed for WordPress 2.5 to 2.6.3.

If you’re having any questions or need further assistance, please use this post’s comment form.

Free PDF eBook: Corporate Blogging Guide by Blogsessive