Create a Powerful jQuery-Powered Archives Page in WordPress

by admin on June 1, 2010 · 22 comments

Wordpress jQuery Archives

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.

Avenger Skin for Thesis Themes


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.

  1. 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.

  2. 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.


  3. 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.

  4. 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.

  5. 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;amp;amp;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;amp;amp;amp;orderby=post_date&amp;amp;amp;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>
    

    Thesis Product Skin

    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>
    

    Popular posts

    To automatically show your most popular posts, you’ll need to install Rob Marsh’s Popular Posts plugin and then use the following:

    &amp;amp;amp;amp;amp;amp;lt;?php popular_posts(); ?&amp;amp;amp;amp;amp;amp;gt;
    

    Alternatively, you can manually put posts you’d like to feature by using a list.

  6. 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;amp;amp;amp;orderby=post_date&amp;amp;amp;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>
    &amp;amp;amp;amp;amp;amp;lt;?php popular_posts(); ?&amp;amp;amp;amp;amp;amp;gt;
    </ul>
    </div>
    
    </div>
    
  7. 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.

References, resources, and inspiration:

An Archives Page With all the Posts in Chronological Order by WPGuy
10 Ways to Customize Thesis and Enhance Your Blog by Matt Flies
More Showing, More Hiding by Learning jQuery

Have a question, know a better way of doing something, or just want to say hey? Leave a comment below.


photo by the wolf

Previous:

Next: