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.

• Please read How do I reuse chunks of HTML?. It explains how to link include bits of static content in your pages.
• 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 my way of doing things and that there may well be better ways of doing it. If you should find a more efficiant way to do something then, please, do it and post about it!
• So we don’t risk confusion we’ll be using the updated version of my basic HTML theme which you can download here.
• Paste the styles into the style portion of the presentation section beforehand.
• The .txt files that contain the code have names that are prefaced with txptheme_form_filename.txt, to prevent confusion please only refer to the filename.txt portion of the file!
• I’ve used an XHTML 1.0 Strict DOCTYPE!, however, by removing a few ending slashes from various tags you can use any version of HTML you want.
• A basic understanding of HTML and CSS is assumed. I’m only teaching you the basics of customizing Textpattern’s templates.

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.

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" />

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:

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:

The form that it’s calling is this:

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.

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

• Sideblogs are easy to create and require no plugin. Check out the tutorial Textpattern Sideblog for more information.
• There are other ways of doing the things that I’ve mentioned here, I’m sure. Please, please experiment and fiddle with things and come up with your own ways of doing it. Who knows, it might be better!
• You might also be interested in Pimp your Textpattern: Part 1 and part 2

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

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

• txp_theme_form_defaultexcerpts.txt
• txp_theme_form_default.txt
• txp_theme_form_footer.txt
• txp_theme_form_header.txt
• txp_theme_form_secondary_page.txt
• txp_theme_form_sidebar.txt
• txp_theme_page_archive.txt
• txp_theme_page_default.txt

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

• archive_page.txt
• default_page.txt
• form_comment_form.txt
• form_comments.txt
• form_default.txt
• form_footer.txt
• form_header.txt
• form_secondary_page.txt
• form_sidebar.txt
• reference-style.css
• style.css
• sidebar.jpg

The Plain Theme

No Textpattern required for this one.

Files Included

• index.html
• reference-style.css
• style.css
• sidebar.jpg

But I'm so cool! | Pay Per Post and the like

Tags: for-you, textpattern, theme, tutorial

Comments on this post are closed. If you need assistance or just want your opinion heard then contact me.

Add this article to del.icio.us, digg or ma.gnolia.

If you liked this article then why not subscribe to the feed?

• Contact
• Subscribe to RSS
• Disclaimer
• Powered by Textpattern
• Back to the Top