Archive page with some style

Creating an archive page is outlined in the excellent tutorial written by Alex Shiels (zem) in the Textpattern FAQ.

This article takes the concept a little further by adding date formatting to the <txp:posted /> tag and some CSS styling hooks.

Create a form called archive_list

<!-- show the year and month -->
<h3 class="archivelist"><txp:posted format="%B %Y" /></h3>
<!-- article title and link -->
<div class="postdate"><h4><txp:posted format="%b %e" /></h4></div>
<p><txp:permlink><txp:title /></txp:permlink></p>

Paste the above code into the new form and save as type misc.

The code is commented to make it easy to follow, but let’s take a quick look at the changes from the FAQ article:

  • Date formats adjusted for more control over output
  • Adds <div class="postdate">, h4 and p tags which will allow us to style the article title and the post date

Place the archive code in the page template

<txp:if_section name="archive">
<txp:article limit="1" />
<h2>My journal archive</h2>
<div class="archives">
<txp:article_custom limit=99999 form="archive_list" section="archive" />

That goes in my archive page, which I share with other sections hence the <txp:if_section name="archive">. You can remove the conditional tag if you don’t need it. The important part is this:

<div class="archives">
<txp:article_custom limit=99999 form="archive_list" section="archive" />

Add some style

The <div class="archives"> offers us some further styling options should we want them. Here are some example CSS styles:

h3.archivelist {
	margin-top: 2em;
	margin-bottom: 0.5em;
.postdate {	
        width: 80px;
	float: left;
	margin: 0 15px 0 0;}
.postdate h4 {
	font-weight: normal;
	font-size: 0.9em;
	margin: 0;
	text-align: right;
	clear: left;
.archives p {
	margin: 0 0 5px 100px;

An example of this exact code is on my personal site. You will note that I have not styled the archive very much, but you will be able to should you so choose, thanks to the style hooks.

comments powered by Disqus