Create a Powerful jQuery-Powered Archives Page in WordPress

June 1, 2010

Almost every blog you come across will have an archives page. Unfortunately, most of them will only show you a list of posts by month. An archives page is a prime place to get a reader further into your site.

Here you’ll learn how to add an archives page to WordPress that not only shows a monthly archive, but also your categories, every post you’ve written, your most popular posts, and even a search box, using jQuery to keep everything organized and easy to navigate.

This is based on the archives tutorials by WP Guy and Matt Flies, so thanks to them for the great work they’re doing. You can see a demo of this in action here on Theme Thesis.

Note: I will be teaching you how to create this page on both a regular WordPress site, and a Thesis site. Instructions for Thesis will be in a box like this.

Create the archives page

If you’re using a regular WordPress theme, you’ll need to create a new file called custom_archives.php and place the following at the top:
```
<?php
/*
Template Name: Custom Archives
*/
?>
```
If you’re using Thesis, you’ll need to create a custom function since there’s already an archives page by default.

Place the following in your custom-functions.php file:
```
function my_archive() {
?>

//// CODE HERE

<?php }
remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_archives_template', 'my_archive');
```
You will place the code in the following step in the middle.
Add the skeleton

Place the following code in the appropriate places as defined in the last step.
```
<div class="archive-leftcol">

<div class="archive">
  <h3>By Category</h3>

  <ul>
   	 	//  CATEGORY CODE
  </ul>

<h3>All Articles</h3>

   <ul>
     		// ARTICLE CODE
   </ul>

// MONTHLY ARCHIVES CODE

<h3>Search</h3>

<ul>
		// SEARCH CODE
</ul>
</div>

</div>

<div class="archive-rightcol"> 

<div class="archive">
<h3>Popular Posts</h3>
<ul>
		// POPULAR POSTS CODE
</ul>
</div>

</div>
```
That’s the basic framework for the page. We set up two columns, one of which contain the Categories, All Articles, Monthly Archives, and Search, which will all be collapsed by default. The other column will show our popular posts and be open the entire time. Feel free to adjust and move anything around if you’d like. The most important thing to note is that each column is wrapped in a div named “archive”, uses h3 tags for the headings, and places its content in ul tags. This is what the jQuery will be working with shortly.
Add the CSS

The CSS is incredibly simple here. All you really need is:
```
.archive h3 {cursor: pointer;}
.archive-leftcol { float: left; width: 48%;}
.archive-rightcol { float: right; width: 48%;}
```
That’s it for the layout. That sets up two columns and sets the heading cursor to a pointer, so that your readers will know they can be clicked. You can also style .archive li{} if you’d like to make things prettier.

Add the jQuery

If you’re using a regular WordPress theme, open up header.php and place the following in the < head > section above < ?php wp_head(); ? >.


<?php wp_enqueue_script("jquery"); ?>

<script type="text/javascript">
$(document).ready(function() {
  $('div.archive:eq(0)> ul').hide();
  $('div.archive:eq(0)> h3').click(function() {
    $(this).next().slideToggle('fast');
  });
});

</script>

If you’re using Thesis, turn on jQuery in your Page Options and place the following function in custom-functions.php:

function show_hide() {
?>

<script type="text/javascript">
$(document).ready(function() {
  $('div.archive:eq(0)> ul').hide();
  $('div.archive:eq(0)> h3').click(function() {
    $(this).next().slideToggle('fast');
  });
});

</script>

<?php }
add_action('wp_head', 'show_hide');

So what does this do? It sets up jQuery to hide anything wrapped in ul tags inside of archive divs, and show them when you click on their headings.

Add functionality

Place the following code in the appropriate spot as defined by the comments in the skeleton code. That is, replacing the lines that start with “//”

Category list

   <?php wp_list_categories('sort_column=name&amp;title_li='); ?>
 [sourcecode]  

<h3>All articles</h3>

[sourcecode language='php']
 <?php wp_get_archives('type=postbypost'); ?>

Monthly archives

This code was taken from WP Guys tutorial and slightly modified.

<?php

// Declare some helper vars
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;

// Get the posts
$myposts = get_posts('numberposts=-1&amp;orderby=post_date&amp;order=DESC');

?>

<?php foreach($myposts as $post) : ?>	

	<?php
 	global $post;
	// Setup the post variables
	setup_postdata($post);

	$year = mysql2date('Y', $post->post_date);
	$month = mysql2date('n', $post->post_date);
	$day = mysql2date('j', $post->post_date);

	?>

	<?php if($year != $previous_year || $month != $previous_month) : ?>

		<?php if($ul_open == true) : ?>
		</ul>
		<?php endif; ?>

		<h3><?php the_time('F Y'); ?></h3>

		<ul>

		<?php $ul_open = true; ?>

	<?php endif; ?>

	<?php $previous_year = $year; $previous_month = $month; ?>

	<li><span class="the_article"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>

<?php endforeach; ?>
	</ul>

Search

<form method="get" class="search_form" action="<?php bloginfo('home'); ?>/">
		<p>
			<input class="text_input" type="text" value="Enter search..." name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</p>
	</form>

All together now

This is what all the code should look like when you’re finished:

<div class="archive-leftcol">

<div class="archive">
  <h3>By Category</h3>
  <ul>
    <?php wp_list_categories('sort_column=name&title_li='); ?>
  </ul>

   <h3>All Articles</h3>
   <ul>
     <?php wp_get_archives('type=postbypost'); ?>
   </ul>

<?php

// Declare some helper vars
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;

// Get the posts
$myposts = get_posts('numberposts=-1&amp;orderby=post_date&amp;order=DESC');

?>

<?php foreach($myposts as $post) : ?>	

	<?php
 	global $post;
	// Setup the post variables
	setup_postdata($post);

	$year = mysql2date('Y', $post->post_date);
	$month = mysql2date('n', $post->post_date);
	$day = mysql2date('j', $post->post_date);

	?>

	<?php if($year != $previous_year || $month != $previous_month) : ?>

		<?php if($ul_open == true) : ?>
		</ul>
		<?php endif; ?>

		<h3><?php the_time('F Y'); ?></h3>

		<ul>

		<?php $ul_open = true; ?>

	<?php endif; ?>

	<?php $previous_year = $year; $previous_month = $month; ?>

	<li><span class="the_article"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>

<?php endforeach; ?>
	</ul>

<h3>Search</h3>
<ul>
	<form method="get" class="search_form" action="<?php bloginfo('home'); ?>/">
		<p>
			<input class="text_input" type="text" value="Enter search..." name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</p>
	</form>
</ul>
</div>
</div>

<div class="archive-rightcol">
<div class="archive">
<h3>Popular Posts</h3>
<ul>
&lt;?php popular_posts(); ?&gt;
</ul>
</div>

</div>

Enjoy!

So that’s the end. Now you should have a rockin’ archives page that should help your visitors find what they’re looking for and hang around your site a little longer.