If you aren’t sure what an archive page actually is, consider this: any time you’re look at posts by category, date, tag, or author, you’re looking at an archive page. To understand where an archive page comes in to play, let’s refresh our knowledge on just how it works in the template hierarchy:
Image may be NSFW.
Clik here to view.
Recommended Reading
To take part you will need a WordPress installation to experiment with, but should also have
Why We Need archive.php
At the moment when we request an archive page with our theme it’s using index.php. This means that the category, date, tag, and author archive page views all look exactly the same. There is no way to distinguish between each.
In the future we will cover creating these pages individually, but for the moment we’re going to create a straight up archive.php that will adequately serve the four possible requests. It may be slightly confusing, and the code will look damn awful, but we’ll get it done.
Our Archive
Initially, the code will be a disaster to look at and likely be confusing. There are some comments through it, but I will break it down as always.
<?php get_header(); ?>
<div class="container">
<?php get_sidebar(); ?>
<div class="span9">
<?php if ( have_posts() ) : ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<div class="archives page-header"><h1>Browsing Articles In: <?php single_cat_title(); ?></h1></div>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<div class="archives page-header"><h1>Tagged: <?php single_tag_title(); ?></h1></div>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<div class="archives page-header"><h1>Archive: <?php the_time('F jS, Y'); ?></h1></div>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<div class="archives page-header"><h1>Archive: <?php the_time('F, Y'); ?></h1></div>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<div class="archives page-header"><h1>Archive: <?php the_time('Y'); ?></h1></div>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<div class="archives page-header"><h1>All Posts By: <?php echo get_the_author() ?></h1></div>
<?php } ?>
The start of our loop where we check for posts has moved up. The block of code that follows will generate the title based on what kind of archive is being generated, and does so through a series of elseif until it returns positive. Please note that we’ve added the class archives to each opening title div and will use that to style shortly.
After the titles, we’re close the operation before continuing with the rest.
<?php while ( have_posts() ) : the_post(); ?>
<section <?php post_class(); ?>>
<div class="page-header">
<h1>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h1>
<small>
By <?php the_author_posts_link(); ?>,
in <?php the_category(', '); //separated by a commma and space ?>,
on <?php the_time('F j, Y'); //DD Month, YYYY format dates ?>
</small>
</div>
<?php the_excerpt(); ?>
<a class="btn btn-small pull-right" href="<?php the_permalink(); ?>" >Continue Reading <i class="icon-hand-right"></i></a>
</section>
<?php endwhile; ?>
<!-- START PAGINATION -->
<section>
<ul class="pager">
<li class="previous"><?php previous_posts_link('« Previous Page') ?></li>
<li class="next"><?php next_posts_link('Next Page »') ?></li>
</ul>
</section>
<!-- END PAGINATION -->
<?php endif; ?>
</div><!-- closing .row -->
</div>
<!-- closing .container -->
<?php get_footer(); ?>
There are no drastic changes to the rest of our loop, we’re just showing the same as we would on the home page, but now the page has more meaning to those viewing it, by displaying what it contains at the top.
CSS Touchups
At the moment the title of the first post is drastically far away from the archive title, which is why we put the class .archives alongside the page title. We simply need to assign a 0px bottom margin to .archives.page-header and reap the rewards.
Layouts
Now it’s time to see how our archive page displays content!
Category
Image may be NSFW.
Clik here to view.
Tags
Image may be NSFW.
Clik here to view.
Author
Image may be NSFW.
Clik here to view.
Where to Next
In this tutorial we’ve created a one size fits all category page. It isn’t ideal to use one, but it is handy to have one. In the instance you create your own author.php or category.php then of course, that will be used, but if you are missing a page, this way you have backup.
Table of Contents
- Part 1: Setting up Self Hosted WordPress
- Part 2: Grasping Theme Anatomy
- Part 3: Templating with PHP
- Part 4: Beginning Our First WordPress
- Part 5: Preparing The Loop with Test Content
- Part 6: Learning The WordPress Loop
- Part 7: Getting Familiar with the Template Hierarchy and Building Pages
- Part 8: Creating an Easy, All-in-One Archive Page for Your Theme
- Part 9: Building Comments into your Template
- Part 9: Build a Dynamic, Customizable Menu
- Part 10: Widgetized Sidebars
- Part 11: Implementing Search
- Part 12: Your 404 Page
The post Part 8: Creating an Easy, All-in-One Archive Page for Your Theme appeared first on YinPress.