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

  • August 27th, 2011 at 8:55 pm

    No clue what any of that code means but it did exactly what I have been wanting for my archives page. Thanks!

  • September 25th, 2011 at 10:32 am

    Hi there, thanks a lot….i was trying many things but,,,this only worked finally.

    u r great!!!

  • October 5th, 2011 at 12:30 am

    Hey, thanks a lot. Worked very well.

  • Rick
    November 14th, 2011 at 5:42 am

    How can I display certain number of post per page?

  • Sarah
    November 30th, 2011 at 7:43 pm

    Exactly what I needed! Thanks for saving this php novice about a day’s worth of coding!

    • August 21st, 2013 at 7:57 am

      Does your website have a contact page? I’m having a tough time locating it but, I’d like to send you an email.
      I’ve got some recommendations for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it grow over time.

  • Rob
    January 17th, 2012 at 10:48 pm

    I’m trying to figure out how to display post thumbs instead of a list of post titles… any suggestions on how I might accomplish that or where I can read up?

    Thanks!

  • Rob
    January 17th, 2012 at 10:53 pm

    I’m trying to display them in a grid… sort of a portfolio view. I may have to just play with styling a bit more… but got em in there.

    Thanks for posting this!

  • January 31st, 2012 at 4:03 pm

    Hi there

    Just wanted to say thanks a million for this. Been searching for ages and tried numerous plug-ins which didn’t do what I wanted them to, and couldn’t quite get my head around the php. You have saved the day. Consider yourself bookmarked.

    Dom

  • Jeff Porter
    February 23rd, 2012 at 4:30 pm

    I used the Smart Archives Reloaded plugin to do this for standard posts on my development site, but could not figure out how to achieve the same for custom post types.

    This works perfectly.

    Thank you.

  • Kevin Read
    March 19th, 2012 at 7:31 am

    Thanks - great code, saved me a lot of time.

  • March 27th, 2012 at 7:53 pm

    I cannot believe this just works like a charm. This should be a part of the WordPress documentation in the archives section!!
    Honestly, I am so glad I found your site as it is exactly what I was looking for. I have been using a plugin to achieve the same before (but I’m getting some annoying error messages with it) and am more than thrilled to see that such little code is required to achieve the same. Without flaws.

    Thank you so much, WordPress Guy! You made my day. =)

    • October 23rd, 2014 at 7:10 am

      If you desire to increase your experience just keep visiting
      this site and be updated with the most up-to-date gossip posted here.

  • May 14th, 2012 at 8:42 pm

    Thanks a lot buddy… I was looking for such format of archives page… I was using another function, it was working fine but only for /%postname%/ permalink, the_permalink(); wasn’t working with that function…

    I am happy with your work, of course I made some changes to meet my needs…

    Thanks again

  • gab
    July 18th, 2012 at 11:39 am

    It worked like a charm. I would like to have the same page but also with all categories at hop hierarchy :

    Category A
    * May 2008
    25 - Lorem ipsum
    12 - Dolor sit amet
    * April 2008
    22 - Adipiscing elit
    18 - Consectetur
    3 - Ipsum amet

    Category B
    ….

    Can you help me for this ?
    thanks !

  • August 15th, 2012 at 8:07 pm

    Thank you so much! Exactly what I needed. You’re super cool!

  • stemie
    August 23rd, 2012 at 5:55 pm

    Hi, Im trying to do this but based on a custom field date not publish date.

    I have stored the custom field date as yyyy-mm-dd.

    Any ideas how I can alter your method to achieve this?

    Thanks

  • November 22nd, 2012 at 7:46 pm

    Hi, have good tutorials about archive page but what about if we need to page number show at bottom next prev page… limiting the posts… hope you understand my question..

    thanks :)

  • Ruwan
    May 5th, 2013 at 9:13 am

    Thanks,
    Worked well

  • July 2nd, 2013 at 10:10 am

    Thanks for this post it does “just what it says on the label”!!

  • September 10th, 2013 at 6:30 pm

    Worked well! Thanks

  • Steven Jenkins
    June 18th, 2014 at 4:36 pm

    I’m so glad I clicked past the first page of Google search results to find this! So simple and effective. Why does everyone else have to make things so complicated!?! (Oh, but I did rewirte your PHP code a lot, not sure why you kept closing and reopening your PHP tags so much ;-) )

  • October 31st, 2014 at 3:07 am

    very nice article in every sense

Your Comment