Organize your Templates with MTInclude

03/27/2005

You can have full control over Movable Type creating the HTML for your website. For making this happen, Movable Type can be configured by a couple of templates.

The templates define the style and the contents of the created pages. In the beginning you should best leave those templates untouched. After you have mastered the Movable Type basics, you can change any template for styling the website according to your wishes.

In the Beginning there is a Mess

If you study the templates, you will very soon realize that the templates are not perfectly organized. Rather often identical parts can be found in different templates. Regarding good structure and easy maintenance the templates will not win a first prize. If you want to change a website's detail, you have to perform those changes at numerous places.

Fortunately there is the »MTInclude« tag. It can help us with structuring this mess.

An Example

In all HTML-templates there is an area, where a page's banner is defined. This is the area, where the weblog's name and its description are given. Often you will also see pictures or photos in this area. On my website it is the dark blue area on top of each page.

Near the beginning of most templates (e.g. Main Index, Category Archive, Date-Based Archive, Individual Entry Archive, Comment Listing, Comment Preview, Comment Error, Comment Pending) you will find the following lines.

<div id="banner">
 <h1>
  <a href="<$MTBlogURL$>" accesskey="1">
   <$MTBlogName encode_html="1"$>
  </a>
 </h1>
 <h2><$MTBlogDescription$></h2>
</div>

With this code the weblog's name (variable »MTBlogName«) and its description (variable »MTBlogDescription«) are inserted into the banner area. Additionally the weblog's name is made a link for returning to the start page.

These lines can be found near the beginning of many templates. They are responsible for inserting the banner into the start page, into an archive page for a category, into an archive page for a month, and also into an entry's individual archive page. However, if you want to change the banner, you have to perform identical steps at several places. This is time consuming and error prone.

MTInclude

In Movable Type you can use a technique that is also very common in other disciplines - for example in programming languages. You are able to isolate a certain function and save it inside a separate component. If you later need this function, you can easily reference it.

The MTInclude tag allows just this. It is very easy, just perform the following steps.

  • First you should create a new template, a so-called »module template«. For doing so choose the menu item »templates« from the left menu.
  • Next a list of known templates, which is grouped by type, will appear. Scroll down until you reach the »Templates Modules« and choose »create new template module«.
  • A dialog for the new template appears. First give the template a name. I might name the template »module-banner«. You might give it another name. The textbox for connecting the template to a file can be left empty. However, enter the above div-tag as the module body.
  • After having saved the input, Movable Type now knows a new template. You can use this template by referencing its name.

After having defined the template, we now have to use it. Simply open all templates, where the banner appears, and replace the above lines by the following.

<$MTInclude module="module-banner"$>

This will include the contents of the prepared template. If you now want to change your banner, you just have to edit a single location. You will modify the template »module-banner« and then initiate a »rebuild site«, and all HTML-pages will show the new banner afterwards.

With some work you will be able to structure your templates. Afterwards, the templates can be understood more easily, and the effort for making a design change is minimized.

Over the time I changed all templates, and inserted lots of includes. The templates for my Movable Type Weblog are now clearly structured. There are about 50 templates. Some of them are very short, sometimes only a couple of lines long.

Supplemental

In the dialog for creating a template you can also connect the template to an external file in the server's filesystem. If you do so, Movable Type takes care of synchronizing the internally stored template with the external file. This enables modifying the templates outside of Movable Type with an editor of your choice.

The MTInclude tag allows two different types of inclusion. Either a template is included by its logical name that must be known to Movable Type (our steps from above). As an alternative you can also include a file by specifying its file system path. One or the other variant is identified by slightly different syntax.

<$MTInclude module="module-banner"$>

<$MTInclude file="D:\DATA\IIS\module-banner.html"$>

mgs | 03/27/2005

Feedback is welcome!

What do you think about this entry? Was it interesting or boring? I would like to hear your comments. If the text was helpful, please consider setting a link to http://www.movable-type-weblog.com/.

No spam please!

For protecting this weblog I have installed the MT-Approval Plugin. You have to view a new comment in preview mode, before it is saved on the server. Moreover, I will view your comment manually, before it is published. You can find more information on the subject in the entry Weblog Spamming Basics.

With an active TypeKey session, your comment will be published immediately.

Post a new comment

TypeKey has temporarily been disabled at this location. Please create your comment without using TypeKey or log in from the preview dialog.




Remember Me?


Comment

Tony Stubblebine | July 20, 2005 05:43 AM

Your instructions worked great. Thanks!

Comment

Alfred | November 17, 2005 05:29 AM

Very useful. Truly save time function. Great!

Comment

EZHelp [TypeKey Profile Page] | April 12, 2006 10:58 AM

I must send you a quick thanks for posting the idea about using the "MTinclude" statement to organize templates in MT. I read, read, read and did more more reading about how to add my banner image to other pages other than the home page and none of them worked until I utilized your advice. Although the MT Blog isn't ready for general viewing, you can see it http://ezhelp.org/blogger.

Thanx
BOB