Textpattern : Example Website

Textpattern logo

Now that you know how Textpattern articles and sections work, let’s see how to create a dynamic website with Textpattern, by using a couple of very simple examples. The intention is to concentrate on showing how the Textpattern tags fit together, so we will deliberately omit much of the HTML that you would use in a proper website.

Static Material

We’ll assume for the sake of simplicity that the doctype and head meta data, like the navigation menu and the footer, will be the same on every page. In practice, of course, the HTML title at least will be unique to each page. We’ll deal with this minor complication later.

For now, we will place each group of static material into a miscellaneous form. We insert these forms into the Textpattern page using these tags:

  • <txp:output_form form="meta_data" />
  • <txp:output_form form="nav" />
  • <txp:output_form form="footer" />

Creating the Template

Then we add the Textpattern tags that allow the template to function. There are two ways to do this. Both achieve exactly the same effect.

Incidentally, the standard Textpattern page field is quite narrow, so it may be a good idea to create the code for the page using a text editor, then paste it into the page.

Method 1: Separation

You could keep the miscellaneous forms separate from the article list and individual article tags:

<txp:output_form form="meta_data" />

<body>

<txp:if_article_list>
  <!-- code for the landing page goes here -->
</txp:if_article_list>

<txp:if_individual_article>
  <!-- code for the individual article page goes here -->
</txp:if_individual_article>

<txp:output_form form="nav" />

<txp:output_form form="footer" />

</body>

</html>

Method 2: Integration

Or you could integrate the miscellaneous forms into the article list and individual article tags:

<txp:if_article_list>
  <txp:output_form form="meta_data" />
  <body>
  <!-- code for the landing page goes here -->
  <txp:output_form form="nav" />
  <txp:output_form form="footer" />
  </body>
  </html>
</txp:if_article_list>

<txp:if_individual_article>
  <txp:output_form form="meta_data" />
  <body>
  <!-- code for the individual article page goes here -->
  <txp:output_form form="nav" />
  <txp:output_form form="footer" />
  </body>
  </html>
</txp:if_individual_article>

You can use these conditional statements any number of times on each Textpattern page. Choose whatever arrangement makes the code easiest for you to follow.

Creating the Landing Page

Let’s assume that you want the landing page to display:

  • an excerpt from the most recent article, with a heading and a link to the full article;
  • and a linked list of all the articles in that section.

The Most Recent Article

This is how you might display the heading, excerpt and link:
<h2><txp:title /></h2>
<txp:excerpt />
<p class="more"><txp:permlink>Read more</txp:permlink></p>

Of course, the choice of HTML tags is up to you.

Add any other HTML mark–up you may require, and place all of this inside an article form called, say, ‘latest’. Insert the following article tag into the Textpattern page:
<txp:article limit="1" form="latest" />

This is what the tag means:

  • <txp:article />
    This means: take all the articles from this section and insert them at this place in this page.
  • limit="1"
    This means: insert only the most recent article.
  • form="latest"
    This means: insert only those parts of the article that are specified in the form called latest.

A List of All Articles

Let’s assume that you want to display the list of articles like this:
<h2>All Articles</h2>
<ul>
  <li><a href=″article01″>Article 1</a></li>
  <li><a href=″article02″>Article 2</a></li>
  <li><a href=″article03″>Article 3</a></li>
  <li>and so on</li>
</ul>

The default behaviour of a Textpattern landing page is to display a complete list of articles, starting with the most recent. Whenever you create a new article, it will be automatically added to this list.

The usual way to display a linked list of articles is simply to enclose each article’s title in a link tag:
<txp:permlink><txp:title /></txp:permlink>

The HTML list item tags will need to be repeated for each article, and so will need to be included in the code for each article, like this:
<li><txp:permlink><txp:title /></txp:permlink></li>

Place this code inside an article form called, say, ‘list’.

Now insert the following code into the Textpattern page:
<h2>All Articles</h2>
<ul>
  <txp:article form="list" />
</ul>

Textpattern is very flexible: all sorts of other options are available. For example, if you wanted the list to include every article except the most recent, you could use this code instead:
<h2>Other Articles</h2>
<ul>
  <txp:article offset="1" form="list" />
</ul>

See the Textpattern website for a full list of Textpattern tags.

The Landing Page Code

This is how the complete code for the landing page might look:

<txp:if_article_list>
  <txp:output_form form="meta_data" />
  <body>
  <txp:article limit="1" form="latest" />
  <h2>All Articles</h2>
  <ul>
    <txp:article form="list" />
  </ul>
  <txp:output_form form="nav" />
  <txp:output_form form="footer" />
  </body>
  </html>
</txp:if_article_list>

In practice, of course, you will probably want to add more HTML mark–up to these bare bones. But this is all you need to make a landing page work.

Creating the Individual Article Page

A straightforward individual article page might contain the following parts of a Textpattern article:

  • the title, presented as, say, a second–level heading;
  • the body of the article, which will normally incorporate a number of HTML tags.

This is the code you would need:
<h2><txp:title /></h2>
<txp:body />

Place this code inside an article form called, say, ‘whatever’.

Now insert the following article tag into the Textpattern page:
<txp:article form="whatever" />

The Individual Article Page Code

This is the complete code for the individual article page:

<txp:if_individual_article>
  <txp:output_form form="meta_data" />
  <body>
  <txp:article form="whatever" />
  <txp:output_form form="nav" />
  <txp:output_form form="footer" />
  </body>
  </html>
</txp:if_individual_article>

The Finished Template

The entire code for the Textpattern page might look like this:

<txp:output_form form="meta_data" />
<body>
<txp:if_article_list>
  <txp:article limit="1" form="latest" />
  <h2>All Articles</h2>
  <ul>
    <txp:article form="list" />
  </ul>
</txp:if_article_list>
<txp:if_individual_article>
  <txp:article form="whatever" />
</txp:if_individual_article>
<txp:output_form form="nav" />
<txp:output_form form="footer" />
</body>
</html>

A More Complex Example

You can of course include more than this if you like. To return to an earlier example, let’s suppose that the section in question deals with the various departments within a company. The landing page lists all the departments, and each department has its own HTML page, which displays specific pieces of information about each department: a contact name, a phone number, and a fax number (well, some companies may still use them).

These three pieces of information may be included in the body of the article. If, however, they are to be displayed separately from the rest of the body text, it may make more sense to place the information in custom fields. Go to Admin then Preferences, and give appropriate names to the custom fields.

The code you need might be something like this:

<h1>Acme Megacorp: <txp:title /> Department</h1>
<txp:body />
<h2>Contact the <txp:title /> Department</h2>
<dl id="contactinfo">
  <dt>Name</dt>
  <dd><txp:custom_field name="contact_name"></dd>
  <dt>Phone</dt>
  <dd><txp:custom_field name="contact_phone"></dd>
  <dt>Fax</dt>
  <dd><txp:custom_field name="contact_fax"></dd>
</dl>

Place this code inside an article form called, say, ‘department’.

Now insert the following article tag into the Textpattern page:
<txp:article form="department" />

The Individual Article Page Code

This is the complete code for the individual article page:

<txp:if_individual_article>
  <txp:output_form form="meta_data" />
  <body>
  <txp:article form="department" />
  <txp:output_form form="nav" />
  <txp:output_form form="footer" />
  </body>
  </html>
</txp:if_individual_article>

In practice, as with the earlier example, you will no doubt want to include more HTML code than this.

One More Article Form

In addition to this code for the Textpattern page, we also require the following Textpattern forms:

  • three miscellaneous forms for the static material: the meta data, the navigation menu, and the footer;
  • and as many article forms as are necessary to display the various elements of the articles, depending on the context.

The Head Section With Static Meta Data

In the above examples, we assumed that the doctype and meta data would be the same on every page, so we moved it all into one miscellaneous form for convenience.

This is what a simple “meta_data” form might look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD … >
<head>
  <meta http-equiv="content-type" content="text/html; … />
  <title>Page Title</title>
  <meta name="description" content="page description goes here" />
  <link href="/layout.css" rel="stylesheet" … />
  <link href="/favicon.ico" rel="shortcut icon" … />
</head>

The Head Section With Changing Meta Data

In practice, some of the meta data will change from page to page. This can be automated by using conditional statements.

Let’s start by dividing the meta data into three areas:

  1. The doctype and the beginning of the head section:
    <!DOCTYPE html PUBLIC "-//W3C//DTD … >
    <head>
      <meta http-equiv="content-type" content="text/html; … />
  2. The parts that are specific to the HTML page in question:
      <title></title>
      <meta name="description" content=" … " />
  3. The rest of the static meta data:
      <link href="/layout.css" rel="stylesheet" … />
      <link href="/favicon.ico" rel="shortcut icon" … />
    </head>

Areas 1 and 3, which will be the same for every HTML page, can be moved into two miscellaneous forms. The title and meta description of the individual article page, on the other hand, will contain information specific to each article, and can be dealt with by using conditional statements and an article form.

The meta title can be taken from the Textpattern page title. The meta description can be taken from whichever spare article field you care to set aside for it. Usually a custom field would be suitable, so create one called ‘meta_description’.

Create an article form called, say, ‘meta_article’, and insert this into it:
<title><txp:title /> : Website Name</title>
<meta name="description" content="
  <txp:custom_field name='meta_description' />
" />

Now insert the following article tag into the Textpattern page:
<txp:article form="meta_article" />

The Complete Head Section and Meta Data

This is how the top area of the Textpattern page might look:

<txp:output_form form="meta_data_1" />

<txp:if_article_list>
  <title>Section Name : Website Name</title>
  <meta name="description" content="landing page description" />
</txp:if_article_list>

<txp:if_individual_article>
  <txp:article form="meta_article">
</txp:if_individual_article>

<txp:output_form form="meta_data_2" />

Or it could look like this:

<txp:if_article_list>
  <txp:output_form form="meta_data_1" />
  <title>Section Name : Website Name</title>
  <meta name="description" content="landing page description" />
  <txp:output_form form="meta_data_2" />
</txp:if_article_list>

<txp:if_individual_article>
  <txp:output_form form="meta_data_1" />
  <txp:article form="meta_article">
  <txp:output_form form="meta_data_2" />
</txp:if_individual_article>

Both methods will produce exactly the same result.

The Finished Textpattern Page

Simply add the meta data code to the rest of the Textpattern page code:

Textpattern page screen

And there we have it: everything you need to create a fully–functioning database website!

There is one final ingredient in the Textpattern recipe: categories. We’ll deal with them next.

Next …

Continue with the next article: Textpattern : Categories.

[This tutorial is part 6 of a series intended to introduce the Textpattern content management system to web designers who have no knowledge of PHP or databases.]