Your first Textpattern theme - Apr 21, 02:17
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
- I would highly recommend you read: How do I reuse chunks of HTML?.
- Keep forms, style and pages (all under presentation) open in tabs or windows as we will be going back and forth quite a bit.
- Keep in mind that this is only my way of doing things, there may very well be better ways to go about it and I encourage you to experiment. On a similar note, if you find an error feel free to kick me in the butt (alternatively you can just comment).
- So we don’t risk confusion we will be using my template, if you are reasonably sure you can follow the directions with your own layout then by all means do so. If you are not comfortable implementing your own just yet just use mine.
- Paste the styles into the style portion of the presentation section beforehand.
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=" » " /> 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>
<body>
<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:
- Selected by default? No
- On front page? No
- Syndicate? No
- Include in site search? Yes
- Uses page: Secondary
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
- txp:article
- txp:category_list
- txp:CSS
- txp:else
- txp:if_article_list
- txp:if_excerpt
- txp:output_form
- txp:page_title
- txp:permlink
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.
How-To and Textpattern
Hi I'm Becky, often referred to as The Knitting Hillbilly and Pussybear, owner of this site and general nuisance. I'm a knitter, serial complainer, known whistle blower and I run the ever popular