How to Create a Custom Archives Page Template

Creating custom WordPress page templates is not an easy task, but once a template is created, it’s very easy to use. Archives page template displays a list of your latest posts, categories and monthly archives. In this tutorial, we’re going to talk about creating a custom WordPress Page template to display your site archives i.e. a list of articles published on your WordPress blog. We’re going to divide the Archives template into four sections:

1. Your custom content
2. Recent Articles
3. List of Article Categories
4. Monthly Archives listing

Before proceeding further, please make sure you have full Read/Write access to your active theme directory, using either an FTP client (such as FileZilla), or File Manager provided by your Web-hosting service provider.

Step 1: Creating a New PHP File

Navigate to your active theme directory, using any of the two methods mentioned above. The path to your theme directory from your WordPress root should be

<WP Root Directory> / wp-content / themes / <your_theme_directory> /

Now, create an empty new file, with .php as extension, e.g. archive-page.php (Make sure file permissions are set to 644 at least)

Step 2: Paste the Page Template Code

After creating a new PHP file in your WordPress theme directory, go to Appearance >> Editor from your WordPress back-end, and open the newly created file to edit. A blank page would open. Now, paste the following code in that file, and hit the “Update File” button.

<?php
/*
Template Name: Archives
*/

/** Page template developed by BeginWP.com */
?>

<?php get_header(); ?>

<div id="content"> <!-- Set Container ID according to your theme -->

	<h1 class="entry-title"> <!-- Set Title header class according to your theme -->
		<?php the_title(); ?>
	</h1> 

    <div class="entry-content"> <!-- Set Content container class according to your theme -->

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

    	<!--Recent Posts-->
        <h2>10 Recent Posts</h2>
        <ul>
            <?php wp_get_archives('type=postbypost&limit=10&format=custom&before=<li>&after=</li>'); ?>
        </ul>

        <!--Categories-->
        <h2>Categories</h2>
        <ul>
            <?php wp_list_categories('title_li='); ?>
        </ul>

        <!--Monthly Archive-->
        <h2>Monthly Archive</h2>
        <ul>
            <?php wp_get_archives('type=monthly'); ?>
        </ul>

    </div> <!--end .entry-content -->

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

<?php get_sidebar(); ?>

<?php get_footer(); ?>

NOTE: You may also download the Archives Template file, containing the above code, and upload it into the active theme directory using an FTP client or File Manager, as mentioned in Step 1. Don’t forget to unzip it before uploading to the server.

Step 3: Modify the Page Template Code

You may want to make changes in the above code, according to your needs and your theme’s layout structure, so we’ll briefly go through a few important lines of code.

1. Line 3 – The template name specified here, is the name with which it’s going to be recognized by WordPress.
2. Line 11, Line 13, Line 17 – In these lines, make sure you specify the ID and Classes, as used by your theme’s layout structure for other page templates (or default one i.e. page.php). If you’re unable to figure out the correct ID or Class name for these tags, leave them as they are, and specify separate CSS rules for them, in your theme’s stylesheet file (usually style.css).
3. Line 26 – Here the argument passed to the wp_get_archives() function is a concatenation of various options, but you basically need to concentrate on limit=10 part here. ‘limit’ sets the number of recent posts to return, in this case. So, you may set it to any number you like, say, if you want to display 50 recent posts instead, you need to replace limit=10 with limit=50.

After making all the necessary modifications, save changes to the file.

Step 4: Creating a WordPress Page for Archives

Now, it’s time to create a new WordPress page for Archives. Go to Pages >> Add New, and enter the title for the Archives page. The body part is ‘optional’, in case, if you want to display some custom text or images etc. on the Archives page, apart from a list of articles and categories.

Before publishing the page, you also need to select the “Archives” template, under the Page Attributes section.

And that’s it! Now, publish the page, and open it from the front-end. The page structure should look similar to the one below.

Easy isn’t it? And, that too without using any plugins. Try creating a custom archives page for your blog, and share with us your opinions regarding how do you plan to improve it further?