Web Development Blog

by Ei Sabai Nyo

22 Feb, 2010

5 steps to creating a custom Archive page in WordPress    


Here is how to create a custom archive page in WordPress just like the one you see on our blog.

1. Go to the current theme folder of your WordPress installation (wp-content/themes/*current theme*) and make sure you don’t already have archives.php in the folder

2. Create a new file called archives.php (or whatever file name you want to give)

3. Copy and paste the following code into the new file and upload it to your current theme folder (wp-content/themes/*current theme*)

<?php
/*
Template Name: Archives Page
*/
?>

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post-page" id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

<h2>Archives by Title:</h2>
<ul>
    <?php wp_get_archives('type=alpha');?>
</ul>

<h2>Archives by Month:</h2>
<ul>
    <?php wp_get_archives('type=monthly'); ?>
</ul>

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

<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

Note: You will probably need to modify this code a bit to match the code structure of your current theme. For example, you might need to have get_sidebar() or you might have extra markup.

4. Login to your WordPress Administrator Panel and create a new page (and name it whatever you like. Ours is called “Archive”)

5. On the right side of the create/edit page, you will see Attributes section where you can specify settings for Parent, Template and Order. Choose “Archives Page” for Template and publish/save your changes.

You now have an Archive page for your WordPress blog that is similar to our Archive page.

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

8 Responses to “5 steps to creating a custom Archive page in WordPress”

  1. [...] details here. MAIN CONTENTS END ■ Posted in Article Tags: Howto, WordPress 3 [...]

  2. Ash Blue says:

    Not a bad tutorial, would be cool though if you could show us how to create an advanced/improved archives page thats different than the original.

  3. eisabai says:

    Thank you for the idea, Ash.

  4. Rezmason says:

    I’m trying to follow your guide, and for some reason, despite having templates in my theme’s folder, the “Template” section of the Attributes menu on my dashboard does not appear. I cannot select a template to base a page on until I can make that section show up. Got any ideas?

  5. eisabai says:

    Hi Rezmason, I haven’t had that problem before, but this might help: http://wordpress.org/support/topic/343384

  6. Jase says:

    THANK YOU!! I’ve been struggling with this for days. Used your code as is and it worked a treat. When I have more time I’ll finesse the display but I’m a happy puppy right now. Many thanks!

  7. Debbie Gray says:

    Perfect! This was a huge timesaver – thanks!

  8. pmhub says:

    Great tips, worked as it is supposed to be with WP 3.0.3 and Attahualpa 3.3.5 theme

    Just took less than 5 minutes to follow the process. Thanks

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories