Inspired by Chris Coyier's archive at CSS-Tricks, I've decided to create the Ultimate Archive Index With Pagination. By Ultimate, I mean, functions well and looks good! I'll be the first to say, I'm a beginner when it comes to PHP or hacking Wordpress. I knew what I wanted it to do, and how I wanted it to look. All I had to do was find out how I was going to accomplish it. After many hours of trial and error, I've achieved what I wanted to achieve, and I'm going to share it with you.

When I was trying to figure out what and how I was going to accomplish this, I asked several questions:

1. How can I create an archive index of all my posts?
2. How can I add a drop down list of archive dates?
3. How can I add a drop down list of categories?
4. How can I add pagination to the archives?

After several hours of google, Wordpress forums, and trial and error I was able to hack this all together. I've tested this in Firefox, IE7, IE6, Safari, and Opera and it works fine in all of them. As I implied, I hacked this code together, so I'm sure there is a cleaner way to do it. Unfortunately, I'm not fluent enough in PHP to create it, however, if anyone finds a more efficient, cleaner, or better way to accomplish this - please let me know, and I'll give credit where credit's due. Alright, Let's get started!

In order for you to achieve the same exact results as mine, in addition to my source code, you'll need the following Wordpress plugins:

1. WP Page Numbers
2. Different Posts Per Page

The first plugin is an alternative to WP-PageNavi, which allows for pagination of the archives. Otherwise you can just utilize the Wordpress default posts_nav_link();. The second plugin will allow you to modify the number of posts shown on the home, category, archive or search pages.

Once you get the plugins installed, we'll start with the archive.php file.

Create archive.php File

First thing we're going to do is create our archive.php file. This is the file Wordpress accesses when a user clicks on a Category or a Date in the archive list (assuming you have it on your sidebar). We want our archive.php and archives.php template to be identical so let's use the following code:

<?php get_header(); ?>
 
<h3>Archives:</h3>
<h1><?php wp_title('',true,'right'); ?></h1>
 
<!-- Put Archive Dates in a Drop Down -->
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo attribute_escape(__('Select Month')); ?></option> 
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>
 
<!-- Put Categories in a Drop Down -->
<?php wp_dropdown_categories('orderby=name&show_count=1&show_option_none=Select Category'); ?>
<script type="text/javascript">
  var dropdown = document.getElementById("cat");
  function onCatChange() {
	if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
		location.href = 
		"<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
	}
    }
    dropdown.onchange = onCatChange;
</script>
 
<!-- Put A Link To Archive Index Page -->
<a class="browse-all" href="<?php $_SERVER['DOCUMENT_ROOT']?>/demos/index">Browse All</a>
 
<!-- The Loop -->
<?php if (have_posts()) : ?>
	<ul id="archive-list">		
	<?php while (have_posts()) : the_post(); ?>				
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span><?php the_time(' F j, Y') ?></span></li>
	<?php endwhile; ?>
	</ul>	
<?php endif; ?>		
 
<!-- Call For wp_page_numbers Plugin -->
<?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>
 
<?php get_footer(); ?>

First thing we did, of course, is included your theme's header with the Wordpress function get_header(); . We also used the Wordpress function wp_title(); to apply the title of the archive being viewed to each page.

We put our archive dates in a drop down by using code provided by the Wordpress Codex. We also put our categories in a drop down using the Wordpress function wp_dropdown_categories();, you can read more about this here.

We also included a link back to the Archive Index page, which we'll be creating next. Be sure to change the URL to work for you.

We finish off with the standard Wordpress Loop, the call for the WP Page Numbers plugin, and the Wordpress function get_footer();.

Now that we have our archive.php finished, we need to upload it to our root and create the index page!

Create the Archive Index Template

What we're going to be doing is creating a blank page on our blog and applying the template we're about to create to it. So for our example, we'll be able to access your Archive Index with http://pathtoyourblog/index assuming you title your page Index.

Let's start by creating the template now. If you still have your archive.php file open, go ahead and Save As archives.php. Now you should have 2 files - archive.php and archives.php with the same code on them both. We're going to add a couple changes to the archives.php next.

As I said earlier, we want our archive.php and archives.php pages to look the same so there are only a couple differences in the code. First thing we need to do is define archives.php as a template so it will be recognized as one by Wordpress. So paste the following code at the very top of the file.

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

Much like our style sheet in our theme, this is required in order for for our file to be recognized as a template. Also, you won't need the link to the Archive Index, so remove:

<!-- Put A Link To Archive Index Page -->
<a class="browse-all" href="<?php $_SERVER['DOCUMENT_ROOT']?>/demos/index">Browse All</a>

Because this is going to be an archive index we want to be able to choose how many results to display on each page of the index. In your Wordpress admin you can choose how many posts you'd like to appear on your page, however without a plugin, you're stuck with that number on all your pages. So, if you wanted your blog's homepage to show your last 5 posts, you'd be stuck with your Archives page only showing 5 posts as well. What kind of archive index would that be?

Good news is, the Different Posts Per Page plugin allows for you to set the number of posts per page seperately on your home, category, archive and search pages. So you can have your homepage show the 5 most recent blog posts, while your category page and archives show 20 posts per page. Unfortunately, on our index page we'll need to implement it manually on our archives.php template. Paste the following code right before the loop.

<!--Change The Amount of Results You Wish To Display Per Page-->
<?php 
$offset = "0";
$no_of_posts = "15"; //Number of posts to display on each page
if (preg_match('/page/', $_SERVER['REQUEST_URI'])) {
	$uri = explode('/', $_SERVER['REQUEST_URI']);
	foreach ($uri as $key=>$value) {
		if ($value == "") {
		unset($uri[$key]);
		}
	}
	$offset = (array_pop($uri) * 15) - 15; //Both These Numbers Should Match the $no_of_posts 
}
query_posts('posts_per_page=' . $no_of_posts . '&offset=' . $offset); ?>

For this demo, I set the number of posts per page to 15. In the admin of my blog, I also set the Category and Archive number to 15. In order for you to be able to do that, you'll need to download, install, and activate the Different Posts Per Page plugin.

Save and upload archives.php to the root of your theme.

Log into your Wordpress dashboard, and create a new page (not post), and title it (I titled it Index). On the right side of the sidebar you should see an option to apply your template to the page. Choose Archive Index and click Publish.

If you view your archives right now, it will be functioning, but it won't be pretty. You can style this to your liking but I'll provide you with my styles from the demo to start you off.

 
h1 {
	font: 3.0em Georgia, "Times New Roman", Times, serif;
	color: #FFF;
}
 
h3 {
	font: bold 1.0em Arial, Helvetica, sans-serif;
	color: #727271;
	text-transform: uppercase;
}
 
select {
	margin: 10px 10px 5px 0;
}
 
a.browse-all {
	color: #FFF;
}
 
ul#archive-list {
	list-style: none;
	width: 600px;
	margin: 5px 0;
}
 
ul#archive-list li{
	position: relative;
}
 
* html ul#archive-list li{  /*We All Love IE6*/
	height: 0px;
	margin-top: -2px;
}
 
ul#archive-list li a{
	text-decoration: none;
	display: block;
	width: 100%;
	border-bottom: 1px solid #2b2b2b;
	color: #727271;
	padding: 5px 0;
	font-size: 1.0em;	
}
 
ul#archive-list li a:hover{
	background-color: #282425;
	color: #FFF;
}
 
ul#archive-list li span{
	position: absolute;
	width: auto;
	right: 0px;
	top: 5px;
	text-align: right;
	color: #a82918;
}

There you have it, my Ultimate Archive Index With Pagination! Like I said, there may be a more efficient way to do this, but I've yet to find it. If you have a better way of achieving the same results, please share.

I'll be sure to update this as I find newer and cooler options to add to it. I hope you enjoy it! Thanks again for reading.

7 Comments

1. 
   Mike
   January 27, 2009
   11

   Hi Jarod,
   The problem I am only having is how to properly style the archive index. My page (sent in the email) is having problems working. I have added my own div container called ‘archive_container’ and controllled the css through my main css style sheet of my theme and yet nothing seems to happen to the page styling wise.
   Help?

2. 
   Mike
   January 27, 2009
   12

   Jarrod,
   Great news! I got it working and it’s styled beautifully. I don’t even think I need to change the styling much as the elements I would have included you have already. I’m sure I would be able to figure out smaller elements such as getting the excerpt by calling it within The Loop.

   I was able to resolve the CSS styling by attaching the archives.php with its own CSS stylesheet. I added another one and used import url to call it. I also however, reset the page and then applied the template again and it now works.

   (I have not added my page url for privacy reasons.)

3. 
   Jarod Taylor
   January 27, 2009
   13

   Mike:

   I’m glad you got it all figured out! If you need any more help just let me know.

4. 
   Mike
   February 1, 2009
   14

   Jarod,
   Hi there, after implementing the archive page, it may have caused a serious problem with my website. Now, for some strange reason, when I click on any post to view its own content, what appears is one post I have made. I have about 6 posts and they all point to a post with id=3. So when I click on a post, it doesn’t show its own content even when I’ve tried adding whatever to see if it worked.

   link

   Help?

5. 
   Jarod Taylor
   February 1, 2009
   15

   Mike,

   I’m not seeing what you’re seeing. When I go to your page, and click on “Articles”, it gives me the index. When i click on a particular post, it’s bringing me to the correct post, however, some of your posts have titles without content?

6. 
   Jason Strauss
   March 27, 2009
   16

   Awesome tutorial, bro. I like the results!

   Thanks.

7. 
   desorirelinia
   November 18, 2009
   18

   A quality site offering ways to learn forex and secrets to make money. Purchase the forex trading software now.
   where can I obtain forex ea

   forex trading

   forex day trading