Deprecated: Optional parameter $pophelp declared before required parameter $event is implicitly treated as a required parameter in /home/tomfadial/textplates.com/textpattern/lib/txplib_html.php on line 1389
How To: Templating with Textpattern | Textplates '07 - Textpattern Template Competition

Proudly sponsored by:

  • Textpattern Hosting
    SiteGround

    Professional TextPattern web hosting services: FREE TextPattern installation, FREE domain name, 24/7 support and more!

  • Westciv

    Westciv develops Style Master, the Mac and Windows CSS Editor that takes the head aches out of working with CSS.

How To: Templating with Textpattern

Templating in Textpattern is almost painfully easy, so this tutorial is for all of you who used “I don’t know how” as an excuse:

Go about making your layout as you usually do whether you code it from the ground up or have another approach. It is important to accommodate all aspects of the layout so that certain items such as comments and blogrolls are a part of the design and not an afterthought.

Once you have completed your design, connecting it to the CMS is a cinch. Let us take a look at some areas of a typical template that might need to be integrated.

The Header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/.../xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Template</title>
<link rel="stylesheet" type="text/css" href="base.css" />
<link rel="alternate" href="http://feeds.feedburner.com/philosophy" type="application/rss+xml" title="RSS 2.0"/>
<link rel="alternate" href="http://feeds.feedburner.com/philosophy" type="application/atom+xml" title="Atom 0.3" />
</head>

The typical template header would need to be a little more like this to attach it to the CMS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/.../xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><txp:page_title /></title>
<link rel="stylesheet" href="<txp:css />" type="text/css" media="screen" />
<link rel="alternate" href="<txp:feed_link flavor="rss" />" type="application/rss+xml" title="RSS 2.0"/>
<link rel="alternate" href="<txp:feed_link label="XML" flavor="atom" />" type="application/atom+xml" title="Atom 0.3" />
</head>

The Page Title

<div id="header">
	<h1><a href="/">My Template</a></h1>
</div>

Would become:

<div id="header">
	<h1><txp:link_to_home><txp:sitename /></txp:link_to_home></h1>
</div>

The Posts

<div id="content">
	<h2><a href="#">Lorem Ipsum Dolor</a></h2>
	<p class="postmeta">Posted Jan 4th to the "Sample" Category ~ Leave a Comment</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

The posts would require two changes to work properly. First, we would replace their location in the page template with an article output tag like this:

<div id="content">
	<txp:article />
</div>

Then, we would modify the “default” article form to match our template:

<h2><txp:permlink><txp:title /></txp:permlink></h2>
<p class="postmeta">Posted <txp:posted /> to the "<txp:category1 link="y" />" Category ~ <txp:comments_invite /></p>
<txp:body />

The Sidebar

The tags for basic blog functions such as a recent articles list or search form can all be found inside the administration panel. For example: 

<div id="sidebar">
<h3>Recent Articles</h3>
<ul>
	<li>Sample</li>
	<li>Sample</li>
	<li>Sample</li>
	<li>Sample</li>
</ul>
<h3>Search</h3>
<form>
	<input type="text" name="search" />
</form>
</div>

Would become: 

<div id="sidebar">
	<txp:recent_articles break="li" label="Recent Articles" labeltag="h3" limit="5" wraptag="ul" />
	<h3>Search</h3>
	<txp:search_input label="Search" button="Search" size="15" />
</div>

Presto, you now have a finished Textpattern template, now submit it already!

Comment

Textile help