Advertisement
Theme Development

Create A WordPress Archives Template for Your Theme

by

An archives page is great way of linking to all of your important archives such as monthly archives and category archives on one dedicated page. It's a great alternative to simply linking to your older posts in your sidebar and footer. Surprisingly, a lot of themes out there don't include one by default... so today, we're going to show you a quick way of building one from scratch.

The Kubrick WordPress Theme, which was the default theme of WordPress for 5 years (version 1.5 until 3.0), came packaged with its own archives.php template. Sadly, the last two default WordPress themes (TwentyTen and TwentyEleven) have not.

As most WordPress themes do not come with an Archives template, it is frequently necessary to create your own. In this tutorial we will be walking you through how you can create a simple archives page using the current default theme TwentyEleven however these steps can be applied to any WordPress design.


Before We Start

Please do not confuse the archive.php template and the archives.php template. The archive.php template is included in most themes and is used to generate monthly archives, category archives, author pages etc (the parent file index.php is used if no archive.php template is available). For example, archives like www.yoursite.com/2011/12/ and www.yoursite.com/category/main-category/.

What we are creating today is the archives.php template. This helps create a dedicated Archive page on your website that lists to all of your monthly archives. For example, www.yoursite.com/archives/.


Step 1 Copy Your Page.php Template

The best way to create any new WordPress page template is by copying the code from the themes page.php template and removing the code within the main content area. The Twenty Eleven page.php template looks like this:

<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Step 2 Create An Empty Archives.php Template

Copy your page.php template code to a new template file called archives.php. We will now remove the code that we do not need for our archives template.

The main content area of the Twenty Eleven page.php template simply displays the loop. All you need to do is remove those 4 lines of code. (i.e. remove the while statement).

Additionally, you should add the following:

  • Template Name: Archives Template - Add this to the top of your template to make it selectable as a page template in your page editor.
  • <?php the_title(); ?> - This will display our archives page title.
  • <?php the_post(); the_content();  ?> - This will ensure any content that is added to your Archives Page via the WordPress page area will be displayed at the top of the page (You do not need to add this line if you do not plan on writing an introduction before your archives).

This gives us the following:


<?php
/**
* Template Name: Archives Template
* Description: A Page Template that lets us created a dedicated Archives page
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">
                          
          <h1 class="entry-title"><?php the_title(); ?></h1>
                          <?php the_post(); the_content();  ?>

                          <!-- The main functions of our Archives.php template will go below here -->


                          <!-- The main functions of our Archives.php template will go above here -->

</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

You now have an empty archives template. It's time to populate it with some content :)


Step 3 Call Some Basic Functions In Your Archives.php Template

Most archives pages display a search form, monthly archives and category archives. These can be added to your archives.php template using the following 3 functions:

  • get_search_form();
  • wp_get_archives();
  • wp_list_categories();

Your archives.php template should now look something like this:

<?php
/**
* Template Name: Archives Template
* Description: A Page Template that lets us created a dedicated Archives page
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">
                          
          <h1 class="entry-title"><?php the_title(); ?></h1>
                          <?php the_post(); the_content();  ?>

                          <!-- The main functions of our Archives.php template will go below here -->

                            <?php get_search_form(); ?>

            <h2>Archives by Month:</h2>
            <ul>
     <?php wp_get_archives(); ?>
             </ul>

    <h2>Archives by Subject:</h2>
    <ul>
      <?php wp_list_categories(); ?>
            </ul>

                          <!-- The main functions of our Archives.php template will go above here -->

</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Step 4 Create An Archives Page

Your theme now has a basic archives.php template. The next thing you need to do is create a new page on your website (i.e. at http://www.yoursite.com/wp-admin/post-new.php?post_type=page). You can call the page anything you want e.g. Archives, Site Archives, Sitemap etc.

Make sure you change the template for the page from the default template to your newly created archives template.

If you followed this tutorial using the Twenty Eleven theme, your archives page should look something like this:


Bonus Step Customising Your Archives Page

In step 3 we added a search form, monthly archives and category archives to our archives page. The wp_get_archives and wp_list_categories functions that we used are very versatile and can be used to display a wide range of different archive lists.

Two other functions that you may find useful are wp_list_pages and wp_tag_cloud.

Below you will find some examples of the parameters that can be passed to all of these functions. You should find them useful in customising your archives.php template further.

wp_get_archives Examples

<?php wp_get_archives('type=daily&limit=30'); ?>

Displays the last 30 days of posts.

<?php wp_get_archives('type=postbypost&limit=20'); ?>

Displays the last 20 posts.

<?php wp_get_archives('type=weekly'); ?>

Displays weekly archives.

<?php wp_get_archives('type=weekly&limit=12'); ?>

Displays 12 weekly archives.

Note, this doesn't necessarily list the last 12 weeks of posts. If will list the last 12 weeks that there were posts published i.e. the list could go back years if your blog hasn't been updated much.

<?php wp_get_archives('show_post_count=1'); ?>

Displays monthly archives with post counts.

<?php wp_get_archives('type=yearly'); ?>

Displays yearly archives.

<?php wp_get_archives('type=alpha'); ?>

Displays all posts alphabetically.

<?php wp_get_archives('type=postbypost'); ?>

Displays all posts by date. Newest posts are listed first.

wp_list_categories Examples

<?php wp_get_archives('show_post_count=1'); ?>

Show post count of categories.

<?php wp_list_categories('title_li=Info'); ?>

Change the name of the list title from 'Categories' to 'Info'.

<?php wp_list_categories('hide_empty=0'); ?>

Display empty categories in the category list.

<?php wp_list_categories('include=1,5'); ?>

Only list categories 1 and 5.

<?php wp_list_categories('exclude=2'); ?>

Do not list category 2.

<?php wp_list_categories('depth=1'); ?>

Show only top level categories.

<?php wp_list_categories('depth=3'); ?>

Show three level of categories (i.e. top category, child category and child of child category).

<?php wp_list_categories('child_of=3'); ?>

Only show the children categories of category 3

<?php wp_list_categories('title_li=News&include=4show_post_count=1'); ?>

Only show category 4, show post counts and change the list title from 'Categories' to 'News'.

wp_get_archives Examples

<?php wp_list_pages(); ?>

List all pages and sub pages.

<?php wp_list_pages('title_li='); ?>

Display all pages and sub pages but no list title.

<?php wp_list_pages('sort_column=post_date'); ?>

Sort pages by the date they were created.

<?php wp_list_pages('sort_column=post_modified'); ?>

Sort pages by the date they were last modified.

<?php wp_list_pages('include=2,4,6' ); ?>

Only list the pages that you specify.

<?php wp_list_pages('exclude=1,9' ); ?>

Exclude certain pages from the list.

<?php wp_list_pages('depth=1' ); ?>

Only display the top level of pages.

<?php wp_list_pages('depth=2' ); ?>

Display pages and the first level of sub pages.

wp_tag_cloud Examples

<?php wp_tag_cloud(); ?>

Display your tag cloud in full.

<?php wp_tag_cloud('orderby=count'); ?>

Order your tag cloud by count (least number of topics to most).

<?php wp_tag_cloud('smallest=15&largest=30'); ?>

Set the text sizes for smallest and larger count values (8 is the default size for the smallest counts and 22 for the largest).

<?php $args = array('taxonomy'  => array('post_tag','category'), ); wp_tag_cloud($args); ?>

Display a tag cloud of your categories and your tags.


Conclusion

By adding an archives page to your website you are giving your readers and search engines more ways of finding your best content. It's such an easy page to set up that it's surprising that more themes don't come with an archives template included.

Remember, even though we have used the default Twenty Eleven as an example throughout this tutorial, the steps that we have taken can be applied to any modern WordPress theme.

Good luck - Kevin

Related Posts
  • Code
    Creative Coding
    Advanced Use of Attachments in WordPress: Creating Custom Queries for AttachmentsAdvanced use of attachments in wordpress 400
    This tutorial is the second in a four part series in which you'll learn some techniques for working with images in attachments in WordPress which give you advanced options.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding Featured ImagesCreating wordpress theme from html 400
    You've now worked through a number of steps to create a WordPress theme from static HTML files. Specifically, we've looked covered the following: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages creating an archive template file. Your theme now has a template file for displaying archive pages, but at the moment it's not displaying images properly. In this tutorial, you'll learn how to add featured image support to your theme and how to display and style them in your archive template.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating an Image-Based Archive Page: Getting StartedCreating an image based archive page
    Using images when displaying an archive listing in WordPress can be very powerful. It can increase the visual appeal of your archive pages and your site overall and it can help to illustrate what your site is all about.Read More…