Your first Textpattern theme

It is no secret that I am a Textpattern fangirl, I have been a Textpattern fangirl since, oh well since August. I love it for its easy to grasp tags and template system. That said, Textpattern is not for everyone, particularly if you do not design your own blog and prefer to download themes.

Installing a Textpattern theme is easy enough to do, but it is a far cry from the upload’n’activate it system Wordpress uses. However, if you are like me and enjoy installing blogging platforms just to modify them then you might actually like Textpattern, particularly if you dislike Wordpress.

I switched to Textpattern after becoming frustrated with EECore and disgusted by Wordpress, I have not looked back since. I cannot imagine being without pages and forms, nor without Textile.

It is a lovely system that is simple to use and geared more towards people who want a hands on experience, whereas Wordpress holds your hand and throws bloated bits and pieces at you in an attempt to make your website as effortless as they possibly can.

This is geared towards newbies. The Alphabetical Tag Listing was quite helpful and I picked it up quickly just tinkering. But there are some people who need to see real time examples before they go about reading up on everything, so if that is you then this is for you.

Before we start

Presentation > Pages – Go ahead and delete everything in the default template, either make backups or bookmark the default Textpattern theme for future reference.

The forms

Create two new misc. forms as per the instructions on the Textpattern site (remember, I told you to read them). In the first form put everything from the header and name it header, repeat it with the footer and name it, well, footer.

<txp:page_title /> calls the title (pause here for a “duh!” moment), you can add in a separator by using this instead: <txp:page_title separator=" &#187; " /> which outputs babblative.com » tester.

header

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<title><txp:page_title /></title>
<meta HTTP-equiv="Content-Type" content="text/html;charset=utf-8">
<txp:CSS format="link" n="default" />
</head>
<div id="container">
<div id="header"></div>

footer

<div id="footer"><a href="http://babblative.com">Created by Becky of Babblative.com</a></div>
</div>
</body>
</html>

If you have used PHP Includes before then this probably looks familiar to you. You can use it to insert sidebars, extra content and whatnot. To call the forms simply use <txp:output_form form="form_name" />.

Since I do not want to have to update four or five different pages every time I need to add something to my sidebar I will also call it as I did with the header and footer. Again, misc. form and txp:output_form.

<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Visitor</a></li>
<li><a href="#">Domain</a></li>
</ul>

<h4>About me</h4>
<p>I'm really bubbly, perky and all around a great person! I love paragraph tags, semantically correct markup and validation!!</p>

<h4>Categories</h4>
<txp:category_list break="li" type="article" wraptag="ul" />
</div>

The pages

Now we can create on the content, put the DIV for the content right under the header tag. The next TXP tag we will use is the txp:article tag for this we are keeping it simple and are adding only an article limit.

Something that I previously forgot to mention is that your comments page is controlled by the “archives page” and everything else, assuming you haven’t set up secondary templates for your subpages, is controlled by the “default page”. Edit both pages so that your comments page looks exactly like your front page.

<txp:output_form form="header" />
<div id="content">
<txp:article limit="1"/>
</div>
<txp:output_form form="sidebar" />
<txp:output_form form="footer" />

Excerpts and other fun stuff

Excerpts can be accomplished rather easily by using the txp_if_article_list, txp:if_excerpt and txp:else tags.

<txp:if_article_list>
<h1><txp:permlink><txp:title/></txp:permlink></h1>
<txp:if_excerpt>
<txp:excerpt/>
<p><txp:permlink>Read more...</txp:permlink></p>
<txp:else/>
<txp:body/>
</txp:if_excerpt>
<txp:else/>
<h1><txp:permlink><txp:title/></txp:permlink></h1>
<txp:body/>
</txp:if_article_list>

Basically it is saying this: If article list then display excerpt and permanent link to entry (that is, the full entry). If there is no excerpt then display body. If there is an excerpt then display the excerpt and then the body when permanent link is clicked.

I prefer to keep this in a secondary form as opposed to a regular form. To use it on a per article basis all you have to do is click on Advanced Options1 and select the excerpt form.

Want a sideblog? Easy! To keep this short I have made it its own article, you can read it here: Textpattern Sideblog

Secondary Pages and forms

So you have content but you want your sidebar to change when you are viewing subpages, or you want to use current navigation. Whatever the reason there are advantages and disadvantages to having more than one page. Having to deal with more than one template can be troublesome, but you can make it easier by using txp:output_form.

First off we need a new page. At the bottom of the page textarea you will see “…or, copy page as”, enter in a unique name, we will use secondary, and hit copy2.

Since I want to use a different form for the headings (article title, permalink, comments, etc.) in the place of txp:article I will use <txp:article form="secondary"/>.

Now go ahead to the forms page and copy the default form into a new form (make it an article), also name it secondary (or change the name in the code pasted above). Instead of having a permalink I just want the title, I do not want any comments, dates or category links so those have to go too. After you strip it down it should look something like this:

<h1><txp:title /></h1>
<txp:body />

Now to apply it to the subpages. If you have not already then create a section with the following settings:

Now just post an article to the new section and you should see the difference from the front page (blogs).

A few last things

You can download the finished version of this theme here and view it here.

Tags used

You might also be interested in Pimp your Textpattern: Part 1 and part 2

1 Advanced options is the the left of the textarea in the write tab.

2 Click on copy with your mouse button, hitting enter will only refresh the page.

#1 Hanna Apr 24, 03:06 permalink

Excatly what I have been looking for ^^. Now I have to go school but after that.

#2 Stephanie Apr 26, 19:27 permalink

How useful! Thank you!

Personal Information

Textile Help

  • Don’t click the button marked preview and browse away because it’s to preview the comment, after you preview the comment you may click the submit button and browse away once the page finishes loading.
  • Fields marked in this colour are required.
  • Comments using fake email addresses (i.e fake) will be deleted.
  • Comments that consist of “lol nice site”, or the like, will be not be removed, but your URL will be removed.
  • If you posted a comment on here then I most likely posted a response to it, so keep checking back.
  • If you leave an anonymous comment and I discover your real identity I will edit the comment and replace any fake information with your real information.
  • Comments that look suspicious (bad keywords or too many URL’s) will be placed in moderation. If you comment doesn’t appear after you’ve submitted it then please wait for a bit before you resubmit. It’s most likely just been placed in moderation and I will approve it.

Sideblog

Testtube | Comment

Lorem ipsum dolor sit amet…

Recent Posts

Categories

Links

Other

Skip over navigation, Archives, Site Map, Updates, RSS, Contact

Sitemap