TXP Tips

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 -->
<txp:if_different>
<h3 class="archivelist"><txp:posted format="%B %Y" /></h3>
</txp:if_different>
<!-- 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:if_individual_article>
<txp:article limit="1" />
<txp:else/>
<h2>My journal archive</h2>
<div class="archives">
<txp:article_custom limit=99999 form="archive_list" section="archive" />
</div>
</txp:if_individual_article>
</txp:if_section>

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" />
</div>

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.