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

Not only once, it has been said that displaying full posts on your blog home page, category pages or archive pages increases the chance of being penalized for duplicate content.

In WordPress, using post excerpts has proven to be a good alternative, but one that has its downsides:

• You lose control over text formatting;
• Images won’t be displayed;
• If you don’t take time to write them yourself, WordPress might not select the most appropriate fragments;
• Readers might not be convinced to further click, if the excerpt is not attractive enough.

Better Post Excerpts

If you’re concerned about your writing style, you’ll most definitely take care about how you structure your posts, where you insert images and how you write the introductory paragraph.

With these in mind, you basically got yourself a very good post excerpt, one that you should not leave to WordPress to decide when and where to cut.

The ‘More’ Tag

This is the most valid alternative to displaying post excerpts, if the_excerpt() template tag does not fit your needs.

More is what the WordPress developers call a quicktag, designed to cut-off large posts into two fragments: one that will be displayed as an excerpt and one that users will continue to read from after clicking the “read more” link. It serves as a marker inside the post so that users who come from the excerpt link, will start reading the content from that point on, and not from the beginning, again.

What this quicktag actually represents is a HTML comment that WordPress translates a the cut-off point. To use it while editing your posts in HTML view, you simply need to add this where you want the post cut:

Your introductory paragraph should be placed before using the 'more' quicktag.
That way it will act as a post excerpt.
<!--more-->

Using it like in the above example will return a post excerpt similar to this:

Your introductory paragraph should be placed before using the ‘more’ quicktag.
That way it will act as a post excerpt. more…

Customizing the ‘more’ link

The default text (more…) is not very attractive, right? I mean, you must really be interested in the rest of the story to click it.

But fear not, there are many ways in which you could customize the link, applying a global or single post effect. Described below are two methods you could use.

Method One: Customizing the_content() template tag

Effects: Global
Requirements: Minor coding knowledge

As per default, posts excerpts are displayed by using the_excerpt(), while full posts are displayed through the use of the_content() tag.

If you take a look at the code of your theme’s index.php file, and of course if it uses full posts, you’ll notice a line of code similar to this one:

<?php the_content(); ?>

The easiest way to customize it and obtain a global effect would be by adding a parameter containing your own ‘read more’ text, as shown in the example below:

<?php the_content(' Continue reading this post!'); ?>

The end result will look similar to this:

Your introductory paragraph should be placed before using the ‘more’ quicktag.
That way it will act as a post excerpt. Continue reading this post!

To further more customize the link, you can even use HTML code and add CSS classes to it:

<?php the_content(' Continue reading this post!'); ?>

or use WordPress’ get_the_title() template tag to add the post name inside the link, like this:

<?php the_content(' Continue reading '.get_the_title()); ?>

Assuming the example of my own post title, this will result in something similar the this:

Your introductory paragraph should be placed before using the ‘more’ quicktag.

That way it will act as a post excerpt. Continue reading Post Excerpts and the More Tag in WordPress

Of course, you could always use a combination of HTML tags and WordPress template tags to further customize the link, as long as you keep in mind that the effect will be global (will apply to all posts using the more quicktag).

Method Two: Customizing the <!--more--> quicktag

Effects: Single post
Requirements: Nothing a 5 year old won’t manage

Assuming you have adjusted the link to your needs by using the above described global-method and on some posts you need to tweak the link more, the best way to customize the display text is my adding it to the <!--more--> quicktag, as shown below, in your post HTML view:

<!--more This is my custom more text-->

This will result in:

Your introductory paragraph should be placed before using the ‘more’ quicktag.
That way it will act as a post excerpt. This is my custom more text

Note: The results of this method override the defaults or the effects of the first method and only affect the text, and not the formatting.

That’s it!

Easy as one, two, three, right? Happy customizing! And in case you need more information, here are a few links from the WordPress Codex:

• Customizing the Read More
• Template Tags: the_content()
• Template Tags: the_excerpt()

Free PDF eBook: Corporate Blogging Guide by Blogsessive

Welcome to our new series’ first post! The “WordPress Template Tags” series is intended to bring into spotlight some of WordPress’ less common, but very useful template tags. While the contents can’t be considered a revelation to advanced WP users and developers, it can be of big help to those who take their first steps in the amazing world of online publishing using this famous blogging platform.

But enough chit chat! Here’s our first recommendation:

wp_get_archives()

Have you ever thought of how to display a list of your most recent posts? Or a list of all posts published in the last 10 days? Or 6 months? Or 2 years?
If so, after searching for a solution, you came across a plugin to help you, or used the WordPress’ standard “Recent Posts” widget.

For such a small need, you had to install one more thing, when it could have solved with one tiny line of code using the wp_get_archives() template tag.

What makes this tag so useful is the possibility to customize the result based on a few factors like: type, format, limit, code to be added before & after or post count. Since by default this template tag returns results inside of <li></li> elements, remember to always enclose it in <ul></ul>, like shown below:

Usage & Examples:

1. Display an archive of the last 6 months:

<ul><?php wp_get_archives('type=monthly&limit=6'); ?></ul>

2. Display the latest 10 posts:

<ul><?php wp_get_archives('type=postbypost&limit=10'); ?></ul>

Also, the display mode can be customized so that instead of showing a <ul> / <li> list, the archives could be displayed in a dropdown form element.

More reference: WordPress Codex on wp_get_archives()

Free PDF eBook: Corporate Blogging Guide by Blogsessive