Last night I added an article archive page to this site. It makes it easier to navigate all the blog posts by listing all the blog posts by title on one single page. It is sorted in chronological order. My intention is to have all the articles easily accessible so anyone can quickly scan through any posts of interest. This is better than a standard blog page as typically you would have to wade through the whole content over multiple pages.

The credit for the archive page code goes to stylizedweb.com for his post. The steps are there on this person’s page and they are reasonably clear, however it requires knowledge of ftp, the folder structure of your wordpress installation and notepad or other text editor to modify php code. I noticed a couple of mistakes in his php insert code which caused it not to work on my page straight off, so I will post what i did…

Steps to create an archive index page on your wordress site (For wordpress 2.7.1)

1. Make an archives2.php file – First step is to make a new page template file. I went to my theme directory /wp-content/themes/arc/ using my ftp client ( where arc is the folder for the theme ) and copied index.php over to my desktop. This was then renamed to archives2.php ( I called it this because this theme already had an archives.php file, didn’t want to get rid of it just in case. Note that the filename doesn’t matter as no reader will see it )

2. Modify the code in the archives2.php file – Now this file must be customised for making a template. Edit the file with a text editor. I used notepad on windows. For me I had the first block of text..

<?php
/* Arclite/digitalnature */
get_header();
?>

This needs to be changed to..

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

The name here is only used for your own reference so it can be anything you like. Save the file now

3. Remove the page code and replace with new code – This I belive is the hardest step because you need to see what background code is (i.e. Side bars, background, links, etc) and see what the main code for that page is. The way I did it was to look at the code I needed to put in…

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<!– post –>
<div id=”post-<?php the_ID(); ?>” <?php if (function_exists(“post_class”)) post_class(); else print ‘class=”post”‘; ?>>

<div class=”post-header”>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php _e(‘Permanent Link:’,’arclite’); echo ‘ ‘; the_title_attribute(); ?>”><?php the_title(); ?></a></h3>
<p class=”post-date”>
<span class=”month”><?php the_time(__(‘M’,’arclite’)); ?></span>
<span class=”day”><?php the_time(__(‘j’,’arclite’)); ?></span>
</p>
<p class=”post-author”>
<span><?php printf(__(‘Posted by %s in %s’,’arclite’),'<a href=”‘. get_author_posts_url(get_the_author_ID()) .'” title=”‘. sprintf(__(“Posts by %s”,”arclite”), attribute_escape(get_the_author())).’ “>’. get_the_author() .'</a>’,get_the_category_list(‘, ‘)); ?> <?php edit_post_link(__(‘Edit’,’arclite’),’ | ‘); ?></span>
</p>
</div>

<div class=”post-content clearfix”>
<?php if(get_option(‘arclite_indexposts’)==’excerpt’) the_excerpt(); else the_content(__(‘Read the rest of this entry &raquo;’, ‘arclite’)); ?>

<?php
$posttags = get_the_tags();
if ($posttags) { ?>
<p class=”tags”> <?php the_tags(__(‘Tags:’,’arclite’).’ ‘, ‘, ‘, ”); ?></p>
<?php } ?>
</div>

<div class=”post-links”>
<?php
global $id, $comment;
$number = get_comments_number( $id );
?>
<a class=”<?php if($number<1) { echo ‘no ‘; }?>comments” href=”<?php comments_link(); ?>”><?php comments_number(__(‘No Comments’,’arclite’), __(‘1 Comment’,’arclite’), __(‘% Comments’,’arclite’)); ?></a>
</div>

</div>
<!– /post –>

<?php endwhile; ?>

<div class=”navigation” id=”pagenavi”>
<?php if(function_exists(‘wp_pagenavi’)) : ?>
<?php wp_pagenavi() ?>
<?php else : ?>
<div class=”alignleft”><?php next_posts_link(__(‘&laquo; Older Entries’,’arclite’)) ?></div>
<div class=”alignright”><?php previous_posts_link(__(‘Newer Entries &raquo;’,’arclite’)) ?></div>
<div class=”clear”></div>
<?php endif; ?>
</div>
<?php else : ?>
<h2><?php _e(“Not Found”,”arclite”); ?></h2>
<p class=”error”><?php _e(“Sorry, but you are looking for something that isn’t here.”,”arclite”); ?></p>
<?php get_search_form(); ?>
<?php endif; ?>

At the top you can see the line <?php if (have_posts()) : ?>  – this is the beginning of the loop which shows every single post in the archive. I then looked at the archives2.php file I had.. I saw..

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Quite near the top of the file. It was also indended. Scrolling down I also found the closing <?php endif; ?> for that starting if line. The indentation helped me to see this was page content and not the background for each page. I removed it all and replaced it with the required code mentioned earlier. Note that I have no experience whatsoever for php programming, this was done only by looking at the <?php tags within the file. Now save this file. Dont worry if you think you did it wrong, even if it wont work, the worst youll see on your site is an error message and you can try again. No damage will occur and you wont lose your previous posts.

4. Upload the new archives2.php to your theme folder where you got your index.php file from.

5. Make a new page. Go to your admin page on your website and make a new page. Call it something meaningful such as “Archives page” (this is what the reader will see for the page name) Dont add any text to the body of the page.

6. Apply the template. On the right hand sidebar ‘attributes’ you should see Template. Under that drop down you should now see your “martins archive page” or whatever you called it earlier. Select this and then click publish. Youre done!

Navigate to the page to see how it looks. If you get a page which looks nothing like your other pages (i.e. background gone) or an error line at the top and nothing else, then something went wrong. I have found the error lines quite helpful as it tells you the line number to check. Turns out my initial code had spaces in <?php…  so it was  <? php…  and that crashed it.Just try to re-upload a fixed file until you get what you want. There is no irreversible damage here as you are using your own file and not wrecking anything else in the theme. Even if you do accidentally damage a critical theme file, you can just re-install the theme and restore.

I hope this is of use to you, It makes navigation much easier for your blog posts and articles so I would highly recommend it, even if you dont regard yourself as a programmer or it seems a little messy. Let me know how you get on and post links to your own sites’ archive pages here!

Tags: archive page, archive page code, easy, helpful, php, useful, wordpress, wordpress code