WordPress Archive Pages: the tutorial

WordPress Archive Pages: the tutorial:
On any bigger site, you’ll get archive pages of some sort. Whether they are taxonomy or category archives, like this SEO category, Custom Post Type archives like this one for our WordPress plugin reviews or my speaking engagements, or even date archives: they all share the same common traits. In WordPress an archive will, by default, consist only of a listing of posts. As these pages will get visited by normal people, that means those visitors are “thrown” upon a page that doesn’t try to tell them where they are.
This lack of introduction gives visitors only two options: leave immediately because they don’t understand where they’ve ended up, or click through to an article, without you having had any chance of pushing them in the right direction.
Because of that, every decent archive needs an “introduction”. This can be as simple as just a header that stands out, but for more important sections of your site, it actually pays of to write a bit of content.
Before you write that content though, you first have to make sure that the content you write actually displays on those archive pages.

Show introductory content on archive pages

Categories, Tags and Custom Taxonomies

For category, tag or custom taxonomy archives, you can simply create a custom template by creating a file. For categories, for instance, this file would be called category.php. If you don’t know how template hierarchy works within WordPress, check out our infographic on the topic.
In this template, above the standard WordPress loop, you add the following code:

<?php if ( !get_query_var( 'paged' ) ) { ?>
  <h1><?php single_term_title(); ?></h1>
  <?php echo wpautop( term_description() ); ?>
<?php } ?>

This uses the title you set for the category / tag / custom taxonomy, as well as the description, which you can fill in the WordPress backend.
If you uses Genesis, you don’t need to create an extra file, you can probably just check the box in your Genesis theme settings:

Or if that doesn’t work, you can just add this to your child theme’s functions.php (there’s still no need to make that file):

<?php
function yoast_term_archive_intro() {
  if ( !is_category() && !is_tag() && !is_tax() )
    return;

  if( get_query_var( 'paged' ) )
    return;

  echo '<h1 class="entry-title">'.single_term_title('', false).'</h1>';
  echo '<div class="entry-content">'.wpautop( term_description() ).'</div>';
}
add_action( 'genesis_before_loop', 'yoast_term_archive_intro', 20 );

Of course you can add some extra code or classes in there to style those boxes a bit more.

Custom Post Type archives

For custom post type archives, this might actually be a bit harder. The beginning of the process is the same: you can create a new file, the name of which should contain your post type: archive-{posttype}.php.
Then you could output the name of the post type using the following code:

if ( !get_query_var( 'paged' ) ) {
$pt = get_post_type_object( get_post_type() );
echo '<h1>'.$pt->labels->name.'</h1>';
}

This is where the tricky bit comes in though: there is no backend in WordPress to input descriptions for these types of pages, nor is there a preferred way of storing that data. I added input fields for these to my Genesis child theme settings, which is too much to explain here, of course you could also hardcode it but that’s a bit ugly…
Within Genesis, with the data coming from my child theme settings, I output the text using the following code in my functions.php (again, no reason to create a new file):

<?php
function yoast_cpt_intro() {
  if ( !is_post_type_archive() )
    return;

  if( get_query_var( 'paged' ) )
    return;

  $pt = get_post_type();
  if ( genesis_get_option( $pt.'-title', 'child-settings' ) ) {
    echo '<h1>'.genesis_get_option( $pt.'-title', 'child-settings' ).'</h1>';
    echo wpautop( genesis_get_option( $pt.'-intro', 'child-settings' ) );
  }
}
add_action( 'genesis_before_loop', 'yoast_cpt_intro', 20 );

Prevent duplicate content

To avoid duplicate content, we only add the introduction to the first page of an archive, if that archive is a paginated one. With the introduction of rel=”next” and rel=”previous”, sites that have implemented this well will be getting more visitors to the first page of a paginated series of archives anyway, but we still don’t want to show the same content on multiple pages.
You might have noticed this line of code in the Genesis examples above:

if( get_query_var( 'paged' ) )
return;

This does exactly that: prevent the duplicate content.

Styling the archive introduction text

You should make sure that your introductory text for your archive really stands out. Remember, it’s not “just” there for SEO reasons, it’s there because people will read it! It’s very tempting to make it look just like another post, but you should take a bit more time and style it properly.
I personally like the way we’ve done that in our recent redesign, this is for instance what the WordPress category intro looks like:

Of course, the text for that introduction is a bit poor. I should probably do a much better job myself of explaining people where to go for what kinds of content, so I’ll get right on that once I finish this post… Which brings me to the last bit:

HTML in category descriptions

HTML in descriptions for categories, tags and custom taxonomies is currently disallow by default. I think that’s changing in an upcoming release, but for now you’ll have to fix that. If you’re using my WordPress SEO plugin, this has already been fixed for you, if not, AppThemes has quite a good tutorial on it.
Let me know what you did with your archive pages in the comments, I’m very curious to see good examples!
WordPress Archive Pages: the tutorial is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!


DIGITAL JUICE