Your First Textpattern Theme

Posted by Becky on Apr 21, 04:17 AM

After the rush of traffic I got from the Smashing Magazine article Textpattern Developer’s Toolbox I took a good long look at my tutorial and decided that it was time to rewrite it. I procrastinated for a bit, but it’s finally done! This isn’t new content per se, but hopefully it’s clearer and easier to use than the old one. This time around I’ll be using the second version of my theme which you can preview here.

For your convenience this time around I’ve included a table of contents.

Contents

  1. Before We Start
  2. The Forms
  3. The Pages
  4. Excerpts and Other Fun Stuff
  5. Secondary Pages and Forms
  6. A Few Last Things
  7. Tags Used
  8. Download the Finished Theme Files

Before We Start

There are a few things that you need to do before we begin; they aren’t difficult things, just a few crucial tidbits that you’ll need for later.

Keep in mind that this is geared towards novice Textpattern users who need examples to learn. I quickly picked things up just tinkering and checking things out on the Alphabetical Tag Listing, which I highly recommend for experienced and novice users alike. If you have any questions about the content within this tutorial you are more than welcome to contact me with your questions, I’ll be glad to help. If you should notice an error that I’ve overlooked then an email would be appreciated.

The Forms

Remember that the code is included below the instructions, download the files to your computer.

  1. Create three new miscellaneous forms. Remember I told you to read How do I reuse chunks of HTML? before you started.
  2. In the first form put everything from txptheme_form_header.txt into it, name it header and then save it.
  3. Repeat as for above with the second form, this time using txptheme_form_footer.txt.
  4. Repeat as for above with the third form, this time using txptheme_form_sidebar.txt.

Listing: txptheme_form_header
#Code
0001<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0002<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
0003<head>
0004<title><txp:page_title /></title>
0005<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
0006<txp:css format="link" n="default" />
0007</head>
0008 
0009<body>
0010<div id="container">
0011<ul id="nav">
0012<li><a href="#" class="current">Home</a></li>
0013<li><a href="#">About Me</a></li>
0014<li><a href="#">Visitor</a></li>
0015<li><a href="#">Domain</a></li>
0016</ul>
0017<div id="header"></div>

Download this code

Aside from <txp:page_title /> and <txp:CSS format="link" n="default" /> it shouldn’t look very different from the header that you’re used to. This is where the Alphabetical Tag Listing comes in handy.

txp:page_title does exactly what it says it does, display the page title. Unfortunately it is very rigid in how it displays it and there are few options to customize it, which is why I use the plugin ob1_title instead. That way the page title comes before the site name, which, in the age of tabbed browsing, makes more sense. It’s completely up to you whether you use the default page_title tag or install ob1_title, but if you’d like to use ob1_title then here’s how I use it: <txp:ob1_title order="article,section,sitename" />

Listing: txptheme_form_sidebar
#Code
0001<div id="sidebar">
0002<h4>About me</h4>
0003<p>I'm really bubbly, perky and all around a great person! I love paragraph tags, semantically correct markup and validation!!</p>
0004 
0005<h3>Search</h3>
0006<txp:search_input button="" label="" />
0007 
0008<h4>Categories</h4>
0009<txp:category_list label="" />
0010</div>

Download this code

Last, but certainly not least, is the sidebar. I have a more advanced tutorial on how to use a custom sidebar on different pages called How I Use Sections, Pages and Forms.

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.

Now that we’ve got our forms sorted out we can start work on our Pages. Pages control the appearance of our site, without them we’d have no where to call our forms. Into the default Page we’re going to put this:

Listing: txp_theme_page_default
#Code
0001<txp:output_form form="header_default"/>
0002<div id="content">
0003<txp:article />
0004</div>
0005<txp:output_form form="sidebar"/>
0006<txp:output_form form="footer"/>

Download this code

You’ll notice that we’ve called the forms we made earlier (header, footer and sidebar) just as we would if we were inserting PHP includes into a static .php page. The new tag is txp:article and it calls your blog posts. Again, there’s a more advanced explanation on how I use it on my site in the tutorial How I Use Sections, Pages and Forms. For right now a vanilla version of it will suffice. Check out the wiki entry linked above for attributes you can use with it.

The archive Page styles your comments page, you can use the same template as you did in the default Page, or you can customize it as I’ve done below:

Listing: txp_theme_page_archive
#Code
0001<txp:output_form form="header_default"/>
0002<div id="content">
0003<txp:article form="secondary_page" />
0004</div>
0005<txp:output_form form="sidebar"/>
0006<txp:output_form form="footer"/>

Download this code

The form that it’s calling is this:

Listing: txptheme_form_secondary_page
#Code
0001<h1><txp:title /></h1>
0002<p class="date-and-comment"><txp:posted /> &#45; <txp:category2 link="1" /> and <txp:category2 link="1" /></p>
0003 
0004<txp:body />

Download this code

I stripped the permalinks from the title and moved the categories up, but the possibilities for customization are endless, if you want to get creative.

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.

Listing: txp_theme_form_defaultexcerpts
#Code
0001<txp:if_article_list>
0002<h1><txp:permlink><txp:title/></txp:permlink></h1>
0003<txp:if_excerpt>
0004<txp:excerpt/>
0005<p><txp:permlink>Read more...</txp:permlink></p>
0006<txp:else/>
0007<txp:body/>
0008</txp:if_excerpt>

Download this code

Essentially all that is saying is that if_article_list then display excerpt and a permanent link to the full entry. If, however, there is no excerpt then display the body with no permanent link to full entry. (Other than the one in the title, of course.)

If you would prefer to you may keep this in a secondary form as opposed to the default form, just name it something like “excerpted_entry”. To use it on a per article basis just click on Advanced Options in the left hand sidebar of the Write tab, click down the menu for Override Form and select your form.

Secondary Pages and Forms

The content that was previously here has been updated and reposted in the tutorial How I Use Sections, Pages and Forms.

A Few Last Things

Tags Used

Download the Finished Theme Files

The files mentioned in this post in one easy archive. Not included: reference-style.css, style.css or sidebar.jpg you’ll want to download the version below to get the complete theme.

Files Included

The complete theme, if you don’t want to use the stylesheets or image included in this archive then download the one above.

Files included

The Plain Theme

No Textpattern required for this one.

Files Included

Hanna

April 24, 2007

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

Stephanie

April 26, 2007

How useful! Thank you!

Han

July 07, 2007

The only thing stopping me from switching from WP to textpattern is the lack of plugins! Plus I need to spend some time getting my head around the templates :)

(and the stupid preview comments thing!)

Sumaiya

July 12, 2007

Oy, Becky, how could you forget the opening body tag in your header file? D: Shame on you, woman. Shame.

Alex

August 12, 2007

This tutorial helped me so much in the process of converting my website from Wordpress to Textpattern. Thank you so much. :)

Ingela H.

June 18, 2008

I’m in the process of changing my review website to TXP but I was having a hard time getting the front page to show excerpts only. I searched the Textpattern support forum, and still couldn’t wrap my head around it. But this article helped me get it all straight. Thank you!

Monica

July 06, 2008

I was just trying to follow your tutorial, but I realize the link to the Template goes to a 404 Error Page. If you could fix it, thanks.

Becky

July 06, 2008

All fixed now!