Textpattern tips, tutorials and code snippets

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.

4 Comments Comment feed

but if you have a lot of articles you have to scroll a long time ;-):
limit=99999, so I use a plugin

Yes, that is a downside. I will post a newer archive version that limits the output based on years, using categories. Perhaps you could submit or leave a comment with your method…

o.k. I send it to you

Susanne kindly sent in this variation:

First, download the rss_suparchive plugin.

Code for the archive template:

<div class="blubb">
<h2>Das Archiv</h2>
<txp:rss_suparchive section=",blog" limit="100" form="tools-archivliste" />
</div>

The tools-archivliste form:

<txp:if_different>
<h3><txp:posted format="%B %Y" /></h3>
</txp:if_different>
<p class="archiv"><span class="adate"><txp:posted format="%d." /></span>
<span class="a"><txp:permlink><txp:title /></txp:permlink></span></p>

Add a comment

Use Textile help to style your comments