WordPress Guy

WordPress Guy designs and develops WordPress themes and plugins. WordPress Guy teaches you WordPress stuff.

An archive page is nothing more than a page with links to your blog posts ordered by date, category, etc. In this tutorial we’re going to list all the blog posts in our blog, ordered by date in a hierarchical way.

Something like this:

  • May 2008

    • 25 - Lorem ipsum
    • 12 - Dolor sit amet
  • April 2008

    • 22 - Adipiscing elit
    • 18 - Consectetur
    • 3 - Ipsum amet

Cool, eh! Let’s go…

The page

First create a new php file and type this at the very beginning:

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

This will help us identify the template when we create the archives page in the WordPress back-end.

Now, let’s enter the basic page code. You may want to open the page.php file of your theme, and copy the structure. I’ll be using the default “kubrick” theme structure for this tutorial:

<?php get_header(); ?>
 
<div id="content" class="widecolumn">
 
<!--Here is where our code will go-->
 
</div>
 
<?php get_footer(); ?>

The code

Ok and now this is the code that will print the actual list of posts:

<?php
 
// Declare some helper vars
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
 
// Get the posts
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
 
?>
 
<?php foreach($myposts as $post) : ?>	
 
	<?php
 
	// 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 class="month_archive">
 
		<?php $ul_open = true; ?>
 
	<?php endif; ?>
 
	<?php $previous_year = $year; $previous_month = $month; ?>
 
	<li><span class="the_day"><?php the_time('j'); ?></span> <span class="the_article"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li>
 
<?php endforeach; ?>
	</ul>

How does this work? Well… it’s a little hard to explain. Basically, we’re using the get_posts() function to get all the posts (numberposts=0 means all of them), ordered by date (orderby=post_date) in descending order (order=DESC). Then, we’re looping through every last one of them, comparing it’s published month and year to the previous one and echoing the year and the month accordingly.

Wrapping up

That’s basically it. Now save this file and upload it to your template directory (/wp-content/themes/your_theme). Then create a new page in the WordPress back-end, selecting “Hierarchical Archives” in the page template drop-down menu. And you’re done.

Hope you liked the pseudo-tutorial ;-).

Comments

  • July 15th, 2008 at 4:21 pm

    On WordPress 2.6, it only shows the last month.

  • July 16th, 2008 at 3:13 am

    Or maybe it displays only number of posts that you set in Options -> Reading.
    I just have the last 5 posts… as I set to display on front page.
    (See http://www.designgrafik.net/archives/ )

  • August 11th, 2008 at 6:27 pm

    Forget it. I’m using another PHP script now…

    • Nate
      June 25th, 2009 at 9:12 am

      What other PHP script did you use to create an Archive?

  • September 11th, 2008 at 1:47 pm

    Excellent tutorial. Very handy.

    I’d love to see the same process written up for creating a Tags page. Seeing all of the tags with post data below each in alphabetical order, instead of the typical tag cloud, would be quite interesting.

  • September 21st, 2008 at 8:03 am

    Thank you so much for this tutorial, it’s been a lifesaver for me!

  • September 28th, 2008 at 7:06 pm

    I guess, “numberposts” option should be set to -1 in order to get all posts.
    ex: get_posts(’numberposts=-1&orderby=post_date&order=DESC’);

    if it is set to 0 you will get limited number of posts as it is defined in your settings page. (settings > reading > blog pages show at most)

    at least, it works in that way with wordpress 2.6.2.

    good luck!

  • October 30th, 2008 at 8:21 pm

    I just noticed that the last post printed in the list isn’t followed by a closing tag for that month’s ul. That’s a huge issue. Would appreciate a correction to fix that.

  • October 30th, 2008 at 9:41 pm

    @Travis: You’re totally right. What a dumb mistake!

    Thanks for the heads-up

  • October 30th, 2008 at 9:44 pm

    @Baturalp: You’re right… I guess I should double-check my code before posting it ;-)

  • November 12th, 2008 at 5:52 pm

    PERFECT! this is exactly what i needed! (for a friend’s website, not mine.) i see you incorporated people’s suggestions. thanks so much for the script!!!

  • November 23rd, 2008 at 2:01 pm

    Super - I needed something quick and simple for my wife’s blog and this did the trick. I previously installed about 4 plug ins which didn’t work and this code worked great. Thanks for posting and being ranked high on google!

  • Alvin
    November 28th, 2008 at 7:49 pm

    Wow, I can’t believe how perfect this is for what I needed!

    Can you think of any way to get the Month title to display the number of posts next to it?

    Eg ‘September 2008 (10)’

    Thanks!

  • December 4th, 2008 at 12:33 am

    Great help, thanks. Is there any way to add in page navigation? If your archives go a really long time, typical page navigation would come in very handy. Thanks.

  • January 2nd, 2009 at 10:41 pm

    This is AWESOME!! Thanks so much!

  • January 7th, 2009 at 11:34 pm

    Hi,

    I have been working on an archive page template myself and your post came in handy to understand the get_posts methods in Wordpress. Thanks for these explanations.
    If you wish to do so, you can check out my archive page on my blog at http://www.wwangle.com/blog and grab the code here: http://www.wwangle.com/blog/2009/a-wordpress-index-page-template/

    Samantha

  • Suzanne
    January 9th, 2009 at 8:28 am

    Thanks a ton WP Guy - this was exactly what I was looking for too. Cheers!

  • January 28th, 2009 at 3:49 pm

    Nice tutorial bro… thank
    its will be helpfull for me.. :D
    i will wait your next tutorial…

  • February 12th, 2009 at 11:33 pm

    This is absolutely perfect! I’ve tried a few others and none of them work.

    Quick question — I want to remove the Date headers and want to display just a series of posts with the date. When I take the date header out, however, there is a line break in between the groups of posts in a month. How do I get rid of that?

    Example of what’s happening: http://www.grabup.com/uploads/9bd9152b2d986045e564fd894ec41f3e.png

  • March 10th, 2009 at 7:08 am

    Thanks for the tutorial. I was able to create an “Archive” page for my lifestream videos following this http://askadria.com/archive/

  • March 27th, 2009 at 1:52 am

    Hi. This post is exactly what I’m looking for, but I’m getting an error when I try to use it:

    Parse error: syntax error, unexpected T_VARIABLE when it hit the lines

    $previous_year = $year = 0;
    $previous_month = $month = 0;
    $ul_open = false;

    Any idea what’s wrong?

    Thanks for the help!

  • April 16th, 2009 at 6:01 pm

    Thanks for the great tutorial! This has been in the back of my mind for awhile, and it’s exactly what I needed!

  • May 10th, 2009 at 9:43 am

    Hi
    Great I was looking for that.
    Thanks!

  • August 1st, 2009 at 1:27 am

    Great tutorial. Thanks much!

  • rooz
    September 21st, 2009 at 2:27 pm

    awesome , this was driving me crazy! works like a charm on wp 2.8.4

  • September 30th, 2009 at 6:56 am

    Btw did you know you misspelled cronological? it is really spelled as chronological…

    Nice site btw!

  • November 10th, 2009 at 10:59 am

    This really helped a lot! Copy / pasted and worked as intended. Thanks!

  • ... wp_get_archives on the template because I needed more data out of it. With a lot of help from the wordpress guy, I did something very similar but separated the year and the month. I also show an icon of the ...

  • December 3rd, 2009 at 6:44 pm

    Brilliant.
    You explained that so well I managed to create my first php template. And it worked, first time. Thanks!!!

  • January 18th, 2010 at 7:30 am

    Really a nice tutorial. Thank you so much for the great post.

  • February 14th, 2010 at 7:48 am

    Awesome, this is exactly what I needed. Thank you!

  • ... partie du code php de la page provient d’un article sur le blog WPGuy : WP Guy. Posté dans Wordpress | Tags : archives, dynamiques, jquery, ...

  • February 27th, 2010 at 7:20 am

    This is perfect! Thank you so much. It works perfectly.

  • March 6th, 2010 at 1:32 pm

    fantastic, i can easily input the code, thanks for this tutorial and the code

  • March 21st, 2010 at 2:20 pm

    This works very well. Thank you!

  • April 3rd, 2010 at 12:46 pm

    Thanks! Works perfectly. Here is the example archive page on my site. http://devonenote.com/archive/

    Note that you might need to update the css class in code to the actual class in your theme.

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

  • adastra
    July 15th, 2010 at 9:53 am

    Just what I needed! And so much easier without having to do ‘real’ PHP ;)

    Is there a possibility to also seperate by year, e.g. by just adding something like an hr tag or a div=”divider” between every year?

  • August 15th, 2010 at 3:51 pm

    If I want all posts in a certain category to appere. How to do then becouse I wont 7 post´s on the main page but 50 post´s in two category´s.

  • October 6th, 2010 at 8:10 pm

    Cool tip! I wanted to show all posts on my website and numberposts=0 made it work for me! Thanks

  • judy
    February 4th, 2011 at 10:43 pm

    this is fantastic! thanks so much! works great!

  • ... rujukan : Zo’C Blog , WordPress Guy , WordPress Codex Entri Lain :Nickname : Asal Usul Eastbullet[Contest] IT Contest By ...

  • jocelyn
    March 8th, 2011 at 4:23 pm

    this is awesome. I have a little thing to ask. How can I made like this;

    -2011
    –March
    —post01
    —post02
    —post03
    –February
    —post01
    —post02
    —post03
    –January
    —post01
    —post02
    —post03
    -2010
    –December
    —post01

    Thanks

    • jocelyn
      March 9th, 2011 at 2:46 pm

      oh I trying but i can’t get it. Could I have any help please.

  • March 22nd, 2011 at 7:16 am

    You at smashing, are reading in minds ! I just started to build my first wp theme saturday and you release this post. I was blocked, I think this will really help me ! Thanks !

  • March 29th, 2011 at 3:16 am

    Works like a charm in WP 3.1
    Only one question: How can u make it, that it will list the posts from last three months or only year 2011 ?

  • April 1st, 2011 at 9:28 am

    Thanks for a wonderful post.
    I did mine here:
    http://nail-fungus-cures-that-work.com/blog/?page_id=239

    Thanks once again
    Hammer

  • April 17th, 2011 at 9:00 pm

    I was looking to achieve something like this without the use of a plugin. Thanks for the great solution!

  • ... the invoices including whether they have been paid or not. To do this I found a great post by the WordPress Guy named An archives page with all the posts in chronological order. I modified this slightly to change the class that was assigned to the <li> to show whether ...

  • June 11th, 2011 at 8:45 pm

    I’ve been using this for over a year now but after upgrading to wp 3.1.3, this is no longer working for me. The archives page works only when I’m logged in as admin but when I log out, the page won’t load. Any thoughts?? I’d really hate to look for another archiving tool because I really love how easy it is to use this one!

  • Pavel Berka
    July 18th, 2011 at 11:10 am

    hi, does anyone know how to add pagenavi plugin to have pagenavigation on the page? like with normal archive/posts?

  • Anaa
    August 13th, 2011 at 11:49 am

    Hi!
    Nice post.
    I want to have posts separated by date. Any idea how can I do that?
    Below is the example of what I want to achieve

    12 Aug 2011

    post
    post

    13 Aug 2011
    post
    post
    post

Your Comment