StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

WordPress Archive page

Since lot of people asked me how i have made my archives page http://stylizedweb.com/archive/ i realized that they are not really familiar with page templates so i looked over the web for some tutorials and i really couldn't find good ones, so this tutorial will shortly explain how to do it.

If your WordPress blog is getting bigger archive page is really good to have, and here you can list all your posts, months, weeks what ever you want. If you are using some free template look in the theme folder because you could already have it, if you don't here's how to make it.

1. Open your index.php page and save it as archive.php
2. Replace the original loop code with some of these examples (it starts with <?php while(have_posts()) : the_post(); ?> and ends with <?php endwhile; ?> so everything between that)

 
<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<ul>
<?php
$myposts = get_posts('numberposts=100&offset=0');
foreach($myposts as $post) :
?>
<li><?php the_time('d.m.y') ?> | <a href="<?php the_permalink(); ?>"><? php the_title(); ?></a></li>
 
<? php endforeach; ?>
</ul>
 
<?php endwhile; ?>
 

This will list all posts like on http://stylizedweb.com/archive/ you can change offset (number to start from) etc, more on WordPress codex about it http://codex.wordpress.org/Template_Tags/get_posts. This second code will list categories and month archives.

 
<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<ul><?php wp_list_cats(’sort_column=name&optioncount=1) ?></ul>
<ul><?php wp_get_archives(’type=monthly&show_post_count=1) ?></ul>
 
<?php endwhile; ?>
 

3. Add this code at the top of your archive.php page

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

4. Upload archive.php to your theme folder
5. Create a new page and Archives Page from the page templates

Page template

Of course if you don't like saving index file as archive you can start from the making a new page and adding all these things.

Leave a comment on Stylized Web Have some feedback? Leave a comment

40 Comments So Far

  1. By Sarah posted on March 8, 2008 at 3:53 pm

    Awesome! Just what i was looking for, thanks!

  2. Pingback: WP Archive page

  3. By Marko posted on March 8, 2008 at 8:13 pm

    good tutorial, thanks!

  4. very useful, your archive page looks good, thanks

  5. Yeah agree that this type of tut is fairly minimal on the web!
    I had to find a theme and copy it for how to do it.

  6. Thanks for the tutorial. Just wanna know how could I create archive of pages instead of posts?

  7. Pingback: Web 2.0 & Usability Blog by Adam Moss » Blog Archive » 10 Blog Usability Guidelines

  8. By James posted on April 14, 2008 at 8:15 pm

    Hey

    Can you tell me how your ordered your list? I’ve tried using the order argument for ordering the dates similar to yours but nothing seemed to work. Thanks for the help, but this little bit is driving me nuts.

  9. By Dejan posted on April 14, 2008 at 9:34 pm

    James
    What do you mean ordered list? This is ul with simple text for dates, please explain

  10. By James posted on April 14, 2008 at 10:16 pm

    Sorry, I meant how did you order it with the latest posts at the top. When I try to use the argument from the get post page on WordPress it doesn’t work. Thanks.

  11. By Dejan posted on April 14, 2008 at 10:21 pm

    try this before foreach
    <?php $myposts= array_reverse($myposts, true); ?>

  12. Pingback: Peter Gamez » Wordpress Archive page

  13. Pingback: Digg Top OffBeat News of all times » Wordpress Archive page

  14. Pingback: Useful WordPress Tricks | StylizedWeb.com

  15. Pingback: ArtsLab

  16. Pingback: Engwar » Blog Archive » Minimalism

  17. Thanks a lot, dude :)

  18. The first code won’t work for me.
    I always get following error message:

    Parse error: syntax error, unexpected T_STRING

    could anybody help me?

  19. 丁香女性网提供服装搭配、身材与搭配、明星搭配、街头潮流、省钱搭配、色彩搭配、饰品搭配、鞋帽包、搭配图库等最新资讯..

  20. @Markus Török

    Try using this with in your list item:

    <a href=”">

  21. Sorry, my code elements were stripped. Hopefully this works.

    <a href="">

  22. By Mike posted on March 2, 2009 at 4:59 pm

    Thanks, just what i was looking for too =) thanks

  23. 顶~~~~我叫征途资料站,希望能交个朋友哈!

  24. 最专业的DOTA资料网,提供最全面最新的地图下载,英雄模拟器,录像,战报,攻略。!

  25. Pingback: Wordpress Trick - HTTP://BLOG.OHLOG.NET

  26. By Barbra Hyde posted on April 30, 2009 at 10:41 pm

    iiocqaeuuw386liw

    资料网

  27. Pingback: Article Archive Page Added. Add your own archive page easily! (code included) « MartinOgg.com

  28. Step 2 has some errors. Be sure to remove the space from between the ? php.

  29. By milind posted on November 28, 2009 at 8:44 am

    hi friend thank for these information sharing that before I am very confuse regarding archive template
    But one question is remaining as show output on following link
    http://stylizedweb.com/archive/
    as a same effect possible in the presence of index.php mean as normal template (as regular template)

    pls reply as soon as possible

  30. Pingback: Como Crear una Página de Archivos en WordPress | LCparradO

  31. Thanks, just what i was looking for too =) thanks

  32. Pingback: Как создать страницу "Архив" | Активируй разум и богатей

  33. By ying posted on August 29, 2011 at 10:45 am
  34. Thanks, just what i was looking for too

  35. Step 2 has some errors. Be sure to remove the space from between the ? php.

  36. Thanks a lot!!
    wow!! I solved my problem. Now i have a archive page on my client’s site.

    Thums Up!!

  37. follow the above instuctions.. with below code … it’s working perfect!!

    Archives by Month

    Archives by Subject


  38. Archives by Month

    Archives by Subject


  39. [sourcecode language="php"]

    Archives by Month

    Archives by Subject


    [/sourcecode]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>