My Archives ­ Articles ­ the bombsite

I’ve spent some time recently looking at my site construction from the point-of-view of reducing my dependence on plug-ins. I have nothing against them but as Textpattern evolves new TXP tags become available and I figure that if I can do something without a plug-in then that’s the way to go. I used to use rss_suparchive_bycat to produce my archive by category listing but have now replaced it with a listing that only uses TXP tags and a bit of hand-coding. Nothing difficult I should add so anyone can do it.

The first thing you can see in my archive is the category list. These are all links but they link to anchors so this bit has to be done manually. It looks like this:-

<a name="menu" id="menu"></a><p class="menutitle">Menu</p>
<ul class="categorymenu">
<li><a href="#computer">Computer</a></li>
<li><a href="#funandgames">Fun and Games</a></li>
<li><a href="#guestblock">Guest Block</a></li>
<li><a href="#health">Health</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#personal">Personal</a></li>
<li><a href="#security">Security</a></li>
<li><a href="#serious">Serious</a></li>
<li><a href="#textpattern">Textpattern</a></li>
<li><a href="#website">Website</a></li>
<li><a href="#wordpress">WordPress</a></li>
</ul>

At the very top you can see an anchor tag. This is linked to all the *Back to Top” buttons further down the page. Then comes the menu title followed by a simple unordered list of all the categories linked to the anchors further down the page.

The next piece of code shows how the actual category listing is constructed. This needs to be repeated for each of your categories but once you have done one you can simply copy/paste it as many times as needed changing the category references as you go. Here it is:-

<a name="computer" id="computer"></a><div class="cattitle"><a href="/index.php?c=Computer">Computer</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Computer" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>

The first block is the anchor followed by the category title, which in my case includes a link for a full category listing though you can ignore that if you wish.

The second block is surrounded by ul tags because I’m producing an unordered list, and uses the txp:article_custom tag. This is an extremely flexible tag with a whole host of attributes that can be used to filter your output.

The very last block is the Back to Top link I mentioned earlier.

The txp:article_custom tag above references a form which is where I tell TXP which bits of information I want in the list. Here it is:-

<li class="catarticle"><txp:permlink><txp:title /></txp:permlink><txp:posted /></li>

This is an article type form. This will give you the flexibility of including anything to do with articles such as article images and custom fields etc. If you have a photo blog and use your excerpts for thumbnails you could include excerpts here and produce a thumbnail category listing. There are many possibilities. It’s up to you what you want to include. Note that the whole code is wrapped in li tags to fit in with my requirement for an unordered list

That is basically it! As I mentioned you need to repeat the code that includes the txp:article_custom block for each of your categories. The complete page template will look something like this:-

<div id="category">
<a name="menu" id="menu"></a><p class="menutitle">Menu</p>
<ul class="categorymenu">
<li><a href="#computer">Computer</a></li>
<li><a href="#funandgames">Fun and Games</a></li>
<li><a href="#guestblock">Guest Block</a></li>
<li><a href="#health">Health</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#personal">Personal</a></li>
<li><a href="#security">Security</a></li>
<li><a href="#serious">Serious</a></li>
<li><a href="#textpattern">Textpattern</a></li>
<li><a href="#website">Website</a></li>
<li><a href="#wordpress">WordPress</a></li>
</ul>
<div id="categorylisting">
<a name="computer" id="computer"></a><div class="cattitle"><a href="/index.php?c=Computer">Computer</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Computer" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="funandgames" id="funandgames"></a><div class="cattitle"><a href="/index.php?c=Fun and Games">Fun and Games</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Fun and Games" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="guestblock" id="guestblock"></a><div class="cattitle"><a href="/index.php?c=Guest Block">Guest Block</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Guest Block" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="health" id="health"></a><div class="cattitle"><a href="/index.php?c=Health">Health</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Health" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="music" id="music"></a><div class="cattitle"><a href="/index.php?c=Music">Music</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Music" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="personal" id="personal"></a><div class="cattitle"><a href="/index.php?c=Personal">Personal</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Personal" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="security" id="security"></a><div class="cattitle"><a href="/index.php?c=Security">Security</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Security" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="serious" id="serious"></a><div class="cattitle"><a href="/index.php?c=Serious">Serious</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Serious" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="textpattern" id="textpattern"></a><div class="cattitle"><a href="/index.php?c=Textpattern">Textpattern</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Textpattern" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="website" id="website"></a><div class="cattitle"><a href="/index.php?c=Website">Website</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="Website" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
<a name="wordpress" id="wordpress"><div class="cattitle"><a href="/index.php?c=WordPress">WordPress</a></div>
<ul>
<txp:article_custom form="archivelist" limit="99" section="article" category="WordPress" sortby="Posted" sortdir="desc" excerpted="n" listform="archivelist" />
</ul>
<div class="topjump"><a href="#menu">Back to Top</a></div>
</div>
</div>

As you can see I have thrown a couple of div tags in there plus there are plenty of classes and ids mixed in to give plenty of scope for styling. Have fun and if you can improve on it do let me know.