Textpattern : Example Website

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 an actual 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, you may find it useful to create the code for the page using a text editor, then paste it into the Textpattern page code field.

Method 1: Separation

You could keep the miscellaneous forms separate from the pairs of conditional article tags:

<txp:output_form form="meta_data" />
<body>
   <txp:output_form form="nav" />

   <txp:if_article_list>
      
   </txp:if_article_list>

   <txp:if_individual_article>
      
   </txp:if_individual_article>

   <txp:output_form form="footer" />
</body>
</html>

Method 2: Integration

Or you could place the forms between each pair of conditional tags:

<txp:if_article_list>
   <txp:output_form form="meta_data" />
   <body>
      <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>
      <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. In practice, you should choose whatever arrangement makes the code easiest for you to follow, depending on the specific needs of the project you are working on.

Creating the Landing Page

As an example, let’s assume that you want the landing page to display:

an excerpt from that section’s 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:
<h1><txp:title /></h1>
<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: stop after you have inserted one article. By default, this will be the most recent article.
form="latest"
This means: insert only those parts of the article that are specified in the form named 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 every article that has been assigned to that page’s section, starting with the most recent article. Whenever you create a new article, it will be automatically added to the top of this list.

The usual way to display a linked list of articles is simply to enclose each article’s title in a Textpattern permlink 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 line of 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>

As with almost every aspect of Textpattern, the default behaviour can be changed. 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>

Numerous optional attributes are available to the txp:article tag. For details, see: https://docs.textpattern.com/tags/article.

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:output_form form="nav" />
      <txp:article limit="1" form="latest" />
      <h2>All Articles</h2>
      <ul>
        <txp:article form="list" />
      </ul>
      <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 first-level heading;
the body of the article, which will typically incorporate a number of HTML tags.

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

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

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

N.B. Because this form will apply only to an individual article, there is no need to limit the number of articles as we did just now for the landing page.

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:output_form form="nav" />
      <txp:article form="whatever" />
      <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:output_form form="nav" />
   <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="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.

All the departments will be listed on the HTML landing page, and each department will have its own HTML page. The individual departmental HTML pages will display some general information about each department as well as three specific pieces of information about each department: a contact name, a phone number, and an email address.

These three pieces of information may be included in the body of the article. If, however, you prefer them 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 for the individual department pages might be something like this:

<h1>Acme Megacorp: <txp:title /> Department</h1>
<h2>About the <txp:title /> Department</h2>
<txp:body />
<h2>Contact the <txp:title /> Department</h2>
<dl id="contact_info">
   <dt>Name</dt>
   <dd><txp:custom_field name="contact_name" /></dd>
   <dt>Phone</dt>
   <dd><txp:custom_field name="contact_phone" /></dd>
   <dt>Email</dt>
   <dd><a href="mailto:<txp:custom_field name='contact_email' />"><txp:custom_field name="contact_email" /></a></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:output_form form="nav" />
      <txp:article form="department" />
      <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 simplified ‘meta_data’ form might look like:

<!DOCTYPE html>
<html lang="en">
<head>
   <name="viewport" content="width=device-width, initial-scale=1">
   <title>Page Title</title>
   <meta name="description" content=" … " />
   <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:

The doctype and the beginning of the head section, which will be the same on every individual-article page:
<!DOCTYPE html>
<html lang="en">
<head>
<name="viewport" content="width=device-width, initial-scale=1">
The parts that are specific to the HTML page in question:
<title> … </title>
<meta name="description" content=" … " />
The rest of the meta data, which will be the same on every individual-article page:
<link href="/layout.css" rel="stylesheet" … />
<link href="/favicon.ico" rel="shortcut icon" … />
</head>

Areas 1 and 3 will contain no references to Textpattern articles, and 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 title of the Textpattern article.
As for the meta description, recent versions of Textpattern have a dedicated field for the meta description text within the meta area of each article:

The Textpattern <txp:meta_description /> tag will create the necessary HTML meta description code, incorporating the text from the description field in the relevant Textpattern article (see https://docs.textpattern.com/tags/meta_description for more about this tag).

Create an article form called, say, ‘meta_article’, and insert this into it:
<title><txp:title /> : Website Name</title>
<txp:meta_description />

Here is an alternative version, which uses the information within the Site name field (click on Admin then Preferences):
<title><txp:title /> : <txp:site_name /></title>
<txp:meta_description />

Textpattern admin screen: site name field

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 goes here" />
</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 goes here" />
   <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.

Because the landing page in this example only applies to one section, the landing page’s section title and meta description have been filled in manually. But in certain other situations you may find it helpful to automate a section’s title and meta description. You can do so by using:

the Textpattern <txp:section /> tag (see https://docs.textpattern.com/tags/section; and
the description field in the section page and the same Textpattern <txp:meta_description /> tag that we have just used in an article form.

The Finished Textpattern Page

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

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.]