My Archives Weblog Articles The Bombsite

Weblog Articles Content

25 July 2005 at 08:44 PM.

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.

People have left 8 comments for "My Archives"

sekhu

25 July 2005 at 11:12 PM

holy mother gonna have to read that properly – site’s going a bit gray aint it? I’m guessing you don’t get much sun up there :)

Cheers for the lesson ;)

Now how about a follow up on those trolly pushers? – you know, the scurge of of society…

Stuart

26 July 2005 at 01:15 AM

I blame the people that go round collecting them all up and conveniently leaving them in long lines outside those big shops with car parks.

sekhu

29 July 2005 at 05:52 AM

ok had a proper look at this now – this is very good, and a sound way of doing it – but if the user simply wants to copy and paste the code, is there no way to autogenerate the anchors ahd the categories? Or do you include instructions for the user how to do that it in your themes?

The other question is, are putting a call to all of this in its own page called archives, or is this a different section? Assuming I already have two sections: default and archive, archiev already used by default to get the back page, where woould the call for this go – or are we going with if coditionals?

Stuart

29 July 2005 at 12:39 PM

As I started with rss_suparchive it has it’s own section and page template. It’s a lot easier to use the plug-in with it’s own section. As far as the template is concerned, what I have as a page could easily be done as a form, so 2 forms would be required. You could then use an if_section conditional to call the form and use an existing page template in the same way I do it for my TXP Systems. For me it was just that certain things already existed.

As far as automatically generating anchors is concerned I’m not aware of anything that does it but it would be defeating the point of the exercise, you would simply be replacing one plug-in with another when the objective is to reduce plug-in dependency.

Thomasso

1 August 2005 at 04:38 AM

Hey Stu,

Well, I came back and I had a look at your site after a long time away doing my College thing. You did a lot of remodeling around here? I should point out that I’m using my (brand-new) lap top: a HPdv1010ca, fully loaded with that 2.5Ghz celeron chipset in it. Anyway, I’m running XP home on it…. I know, sad eh? It came with the unit. So, I’m looking at your site through IE! I have not had time to install FireFox on it yet. Anyway, without plugging LINUX (which I would rather have) I noticed how diffrent your site looks? Some of your menu buttons at the top of the page are floating over top of each other. I wish I could give you a screenshot. But ya, grey…

Anyway, hope your doing fine and all is well. I have one more week left untill finals, then 2 weeks off before Sept. 6th, and the cycle starts all over again. Have fun!