Tired of that old Archive page that displays the months in which you have posts? Even worse, tired of that bulk on your sidebar?
If you come to think of it, it is probably helping your visitors very little, unless they are looking for a specific post and have a rather good idea of when it was published. But if they do know that much, they are more likely to use the search box instead.
I consider that archives need the right amount if information to make them useful, not more, not less. And in this case, an archive needs more.
In this post I’ll show you how to create a separate Wordpress page that lists all your posts in reverse chronological order and categorized by month, just like mine.
This will benefit your blog because you’ll have a permanent reference for all your posts with name and dates, so users can always refer to it, when looking for a post they seen, or digging your site for more.
Step 1: Create a new template
This part is easy, you have to duplicate a file in your theme called page.php and name the copy with a name you like. I’ll call it powerarchive.php.
Open powerarchive.php and Make sure the file starts with this
<?php
/*
Template Name: PowerArchive
*/
?>
Technically this is a PHP comment, meaning that it won’t be seen by the PHP interpreter. In practice, the wordpress applications looks for some special comments to find specific files. In this case, the comment is telling wordpress that the file is a page template and its name is Powerarchive. We are going to use this later, when we publish the archive page.
Step 2: Hollow the layout
Now, a tricky part. You must find where is the core-content part of the layout. This changes from theme to theme, but you must look for some signs. For isntance, on my theme, you’d find something like this
<div id="content" class="hfeed">
<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php echo __('View').' "'.the_title('', '', false).'"'; ?>"><?php the_title(); ?></a></h1>
<?php /* more PHP code */ ?>
<?php endwhile; endif; ?>
</div><!-- content -->
The <div> opened just before the <h1> and closed just after the end of the loop (<?php endwhile; endif; ?>) is the container we are looking for. Just hollow that div, except for the page title and maybe some other information you might want to keep.
Step 3: Change the content
So far, we have managed to have an empty page with a title. So our next step has to be change the way it behaves, and show the archives just after the title we left.
The whole idea is to get all the posts in reverse chronological order (newer first), cycle through them and, as we go, print the month name and year as a header for the set of posts on that month.
The first thing to have in mind is that, as we cycle through the posts, is that we must be able to compare a post and the previous one and see if they are on the same month, because if the month has changed, the header for the month must be displayed.
Let’s initialize a variable that will hold the date for the post being analyzed and another one for the date of the previous post.
<?php
$prev_date = NULL;
$date = NULL;
?>
Then, get all posts in the blog
<?php query_posts("posts_per_page=-1&order=DESC"); ?>
Loop through getting the month and year of each one, as well as setting the date of the current post for the sake of comparing it with the previous one.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$date = get_the_time('m.Y');
$year = get_the_time('Y');
$month = get_the_time('m');
$baseUrl = get_bloginfo('URL');
If the current date (containing month and year) is different from the previous one, this is because we have started to list posts from a different month, so we should start by printing the header with a link to the listing of those posts. Don’t forget to start by opening the list tag for the post titles.
if($date != $prev_date)
{
if ($prev_date) echo "</ul>\n";
$prev_date = $date;
echo "<h3>";
echo "<a href='" . $baseUrl ."/". $year ."/". $month . "'>";
echo get_the_time('F Y');
echo "</a>";
echo "</h3>";
echo "<ul>";
}
?>
Finally, let’s print the post date and post title into a list item, close the loop and the list tag
<li><?php the_time('M d') ?>. <a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
<?php endwhile; endif; ?>
</ul>
Here is how the code should look
<?php
$prev_date = NULL;
$date = NULL;
?>
<?php query_posts("posts_per_page=-1&order=DESC"); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$date = get_the_time('m.Y');
$year = get_the_time('Y');
$month = get_the_time('m');
$baseUrl = get_bloginfo('URL');
if($date != $prev_date)
{
if ($prev_date) echo "</ul>\n";
$prev_date = $date;
echo "<h3>";
echo "<a href='" . $baseUrl ."/". $year ."/". $month . "'>";
echo get_the_time('F Y');
echo "</a>";
echo "</h3>";
echo "<ul>";
}
?>
<li><?php the_time('M d') ?>. <a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
<?php endwhile; endif; ?>
</ul>
Guilherme
is a Web Designer focused on web standards and the web ahead of us.
26 Comments
Very nice! Thank you for sharing. :) My archives go back to 2005, and I think they could use some spiffing up.
Another Cool Tool! I like how you explained how it was done, so rather than just activating a plugin I may even learn a little something!
If I may add a thought about excerpts. I have really never used them so I had to search wordpress org for this before I could comment.
I thought this idea was cool, but wondered even with a logical structure as your created with the date and title how much it would help a reader find an article they were looking for. Then I looked at the edit page and see the “optional excerpt” field. If I understand this correctly it is used for things like RSS feeds to convey the intent of the post in a short paragraph. How huge would it make a archive page as you described if you added this to the page following the entry? Perhaps as a commented line that could be “turned on or off”. Perhaps also, it would required a page break added after some defined number of rows. Just a thought, and if nothing else you made me look up the use of the excerpt and now know I should probably be putting a brief synopsis of the post there!
A question please, what is the purpose of the “n” after the unordered list closing? It put an “n” on every line in the page. I removed it with no adverse affects so think maybe it was a typo?
if ($prev_date) echo “n”;
Otherwise you can see on my web site that it works very well.
Kaz
Last comment… the does it, but since not all posts have a excerpt comment it blows up. It needs a “if null” statement, which is beyond me. I looked at the code for powerblogroll and get the idea, but would probably take a few more hours to try and create by trial and error.
Later, Kaz
@Michael Martine -
I’m glad it’s useful to you, post a link of your archives when you are done and proud of them :-)
@Kaz -
My mistake, it was supposed to be “\n” but I forgot to use a HTML entity and was misinterpreted by the browser. Is fixed, thanks for poiting it out.
@Kaz -
The idea of showing the excerpt is interesting, but I think it would render the archive page more or less like the main page of the blog is.
My idea behind the archive page was to make it as short as possible, yet long enough to be useful. If you put the excerpts and they are not quite short (and if you have lots of posts) will generate an archive that might be too long.
Anyway, lets us know of your results if you implement it.
For the NULL test you could also do something like this:
I am using this plugin “SRG Clean Archives” that work almost the same as the way you described here, but I am still impressed by what you have wrote here. The method you described here is simple, direct and elegant compared to the intense coding (more than 300 lines of codes) in the archives plugin that I am using.
@Guilherme,
For me, the timing of this article is just right - I’ve just flipped over to my second calendar month of posting and my archives are a bit on the useless side. This code is just what I need to rev them up a bit and make them more useful!
Thanks, linked and stumbled!
Great tip, Guilherme! I’ll definitely have to put some time aside in the near future to create a “power archive” like this.
I am lost right off the top.
“This part is easy, you have to duplicate a file in your theme called page.php and name the copy with a name you like. I’ll call it powerarchive.php.
Open powerarchive.php and Make sure the file starts with this”
I guess I don’t know WHERE you do this?? how do you start a new page.php??
@Damien Oh, @Scramblejam, @Adam Snider - I’m glad you liked it. Thanks for the thumb ups.
@Michael Cusden -
Hi Michael. page.php is a file that resides in your WP installation. More precisely in (your_install_dir)/wp-content/themes/(your_theme)/page.php.
You have to reach that file via FTP, SSH or your preferred method and create a copy of it (in the same place) to get started. I hope it helped!
@Michael, you can take a look at this also.
http://www.kasdorf.name/wordpress/2008/creating-the-kazology-blogroll-part-1/
Same idea or method, just different page. (Blogroll vs Archive)
Disclaimer! I am not a programmer, just wanted to use this so hacked around until I got it to work. So no guarantees!
Kaz
thanks all I am not destined to get this at all. I don’t know if it is my theme but I can’t even get by the first step.
I copied the page.php and called in archive.php and it is in the right folder and everything.
I open it up in the theme editor and where you say make sure it starts like this……….I have nothing that resembles it at all.
I feel like I am reading a different language. It can’t be this hard can it?
my archive.php
starts like this
“>
Read the rest of this page »’); ?>
@Michael Cusden - Hey, Michael, don’t give up. Ask your questions here or on the Authority Blogger Forum. When you finish you’ll see is no rocket science ;-)
This is very useful IF it is useful for your blog to list posts chronologically. There are many Plugins and code examples that do that, but it’s not very useful to the readers.
What is useful is grouping the listing per category rather than date, grouping like-content together. Years ago, narchives was a template file that worked wonderfully, allowing the user to sort by date, author, or category, but it stopped working with version changes and lack of support.
Have you come up with a way to sort by category? That would be really helpful to millions of WordPress bloggers. Thanks!
Hi GUI!
This is pretty cool. I’m going to add this to my short-list…
Stumbled!
Cheers,
Mitch
@Lorelle -
It is true! It is helpful in the way that shows you a table of contents of the whole blog without the snippets of the post and all in a sigle page, but it is much more interesting to be able to browse category wise.
The reason I did my own archive in this way, rather than category wise is that this blog is dragging a lot of categories I created more or less randomly when it started (and I was a newbie blogger) and many of them have just one or two posts on it.
I sure have to organize myself on this matter!
It is a pretty simple variation to make, I’ll write my next tutorial on how to do it! :)
@Mitchell Allen - Great, Thanks!
Well, since I could not get the “the_excerpt” function to work properly, apparently there is a conflict with one of my other plugins, I had no recourse other than to put an excerpt into each post. It was giving me the full post everytime including pictures, etc. so it was creating a HUGE page! I have now activated the excerpt and added them to the archives page. I think it adds to it, so you can see a little bit about the post rather than just the title the “Teaser” if you will. I would like to get the formatting to not skip a line (using )which would condense it a little further. Also need to add some page breaks. But overall happy.
http://www.kasdorf.name/wordpress/archives-by-date/
Kaz.
PS I don’t understand the “Sort by Category” above. There are plugins that do that, not necessarilly with options, but look at the “TOC” page. It even includes Pages.?
http://www.kasdorf.name/wordpress/table-of-contents/
I do agree that a single plugin that would allow the user to perform the sorts would be cool. Would mean only one page instead of several.
@Kaz -
Congrats!
Stick with Zo’C and you will see it happening :-)
Love the look of the archives.
I’ve ran into a problem however. I’ve created the page. But how do I link it up in my menu?
I tried my domain name/powerarchive.php and I’ve tried domain name/archives/ and other things and I can’t get the page to come up. I get a 404 error.
Help please.
Thanks!
@LeisaWatkins -
I’m not sure I fully understood the point you reached, but this is how is done: you have to create a new page layout by following this post. Then you have to create a page with this layout. And this page will have the name you want, based on your WP configuration.
For instance, I’ve seen that you are using page-slugs on your WP, so if you create a page named “Archives” (using any template, including the one you just created) your page URL will be
yourdomain.com/archives
unless you changed your page slug has been changed.
Does this answer your question?
Never mind.
I figured it out. I added the following:
to the top of the page to create a template and then created a new page.
Thanks!
@LeisaWatkins - Your code didn’t show up in the comment, but I’m glad it worked for you.
@Lorelle - The tutorial you asked me for is online: A category based archive page
Thank you very much for this wonderful script (and for the PowerBlogroll plugin too!)!
I love my Archives page now.. it’s so neat :D
@Melissa - You are most welcome!
Trackbacks