When was the last time you made a design adjustment to every page of your website? When was the last time you wanted to make a design adjustment to every page of your site? If the two dates aren't the same, I'm guessing that you're not making optimum use of website templates. Today, I'll discuss the whys and hows of using templates for fast website redesign.

Let me start off by saying that the two dates aren't the same for me. I've been wanting to add my photo to some of my blogs, put a nice photo into the header of others, and completely rearrange the layout of still others. Why do I keep putting it off? Because, although my blog pages are all template based, if I want a template change to be reflected on all of the pages of the blog, I have to republish the entire blog. Today, beginning with Extreme Website Makeover, I'm switching to a modularized blog template so that most of the design elements will be updatable across the entire site by modifying and uploading a single document. So, let's get to the details.

On my non-blog websites--sites that I build by editing and uploading each page, as opposed to using blogging software (Blogger, to be specific)--a consistent layout and quick updatability are achieved by creating two documents for each page, and using a template to hold it all together. The hierarchy of my website dirctory looks something like this:

/www-root
   /website-a
      /index.php
      /document1.php
   /website-b
      /index.php
      /document1.php
   /tmplts
      /website-a
         /layout.php
         /content
            /index.php
            /document1.php
...

Reader Comment:
Anonymous said:
Manila from Userland is a great templating blog/website system - the original "Edit This Page" technology and you can try it out at http://clubhause.com
(join the conversation below)

When a web browser requests www.website-a.com/document1.php, it gets /www-root/website-a/document1.php. The contents of document1.php look something like this:

<html><head>
<title>This is document 1</title>
...
<?php
$content='document1.php';
include '/www-root/tmplts/website-a/layout.php';
?>

As you can see, not much is happening here. Let's look at layout.php, which is responsible for the overall look and feel of the site:

<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/menu.css">
<script src="/js/menu.js"></script>
</head><body>
<div style="position:absolute;top:17px;width:770px;padding:8px;">
<?php include "/www-root/tmplts/website-a/content/$content"; ?>
</div>
<?php include "/www-root/tmplts/website-a/menu.php"; ?>
</body></html>

This is a fairly simple example of a layout template. It imports the site's main stylesheet; loads a stylesheet for the menu; loads a JavaScript that runs the menu (side note: the JavaScript for the menus I use on some of my sites is only used by certain browsers, like Internet Explorer, which aren't able to use pure CSS menus. More on that some other time); loads the content of the page (/www-root/tmplts/website-a/content/document1.php) in a div that's 17 pixels from the top of the page, 770 pixels wide, and has 8 pixels padding; and loads the menu itself (which positions itself in that 17 pixel gap at the top of the page).

One question that might arise, which will help to illustrate the power of site templates, is why the menu is in its own file rather than in the layout file. I do that partly because it keeps things cleaner and simpler. But the main reason is that I use the same menu in conjuction with a variety of layouts for various websites. So while I can change the layout of one entire website by modifying layout.php, I can update the menus for multiple entire websites by modifying menu.php.

So, if I decide that I want to put a photograph below the menu on all of my webapges, what do I have to do? I change layout.php to look like this:

<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/menu.css">
<script src="/js/menu.js"></script>
</head><body>
<div style="position:absolute;top:57px;width:770px;padding:8px;">
<img src="/img/sitebanner.jpeg" alt="..." style="top:17px;width:770px;height:40px;" />
<?php include "/www-root/tmplts/website-a/content/$content"; ?>
</div>
<?php include "/www-root/tmplts/website-a/menu.php"; ?>
</body></html>

Easy! Just move the content div down and position the image in the space that just got opened up.

Like I said, this is a pretty simple layout template. A more complex layout might have a header, a navigation bar running down the left side, some links and a copyright statement at the bottom, etc. However simple or complex it is, it makes it very easy to update the layout of every page on the site without having to repeat the same changes over and over and re-upload every page.

In the case of a Blogger-powered blog, things look a little bit different because Blogger doesn't support the splitting of a page into two documents (one in /www-root/website-a and one in /www-root/tmplts/website-a/content). The way to handle that case is to move everything but some of the document header, links to the archives, and the blog posts out of the template that you upload to Blogger, and put those parts into a few different documents that sit in your templates directory. Your Blogger template ends up looking something like this:

<html><head>
<title><$BlogTitle$><Blogger><ItemPage> - <$BlogItemTitle$></ItemPage></Blogger></title>
<BlogSiteFeed><link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" /></BlogSiteFeed>
<$BlogRSDUrl$>
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<?php
$blogsubdir='extreme';
include_once "/www-root/tmplts/blogs/$blogsubdir/first.php";
?>
<Blogger>
<BlogDateHeader>
<h3><$BlogDateHeaderDate$></h3>
</BlogDateHeader>

<BlogItemTitle><h2><$BlogItemTitle$><a name="<$BlogItemNumber$>"> </a></h2></BlogItemTitle>
<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline">
// posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a>
</div>
</div>
</Blogger>

<p id="bloggerBug"><a href="http://www.blogger.com"><img width="88" height="31" src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" alt="This page is powered by Blogger. Isn't yours?" /></a></p>
<?php include_once "/www-root/tmplts/blogs/$blogsubdir/second.php"; ?>
<h6>ARCHIVES</h6>
<ul>
<BloggerArchives><li><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></li></BloggerArchives>
<ArchivePage><li><b><a href="<$BlogURL$>">Current Posts</a></b></li></ArchivePage>
<ItemPage><li><b><a href="<$BlogURL$>">Current Posts</a></b></li></ItemPage>
</ul>
<?php include_once "/www-root/tmplts/blogs/$blogsubdir/third.php"; ?>

As you can see, everything on the page except that parts that Blogger needs control of has moved out into first.php, second.php and third.php. Thus, the blog's layout and appearance can be modified by editing those three documents without having to republish anything from Blogger.

Two important notes if you're going to do this with a Blogger-based blog! First, you'll need to change the filename extension of your blog filename (in Settings > Publishing) to whatever is appropriate for your system to enable server-side processing--".php" in my case. Second, if you enable server-side processing of you blog pages, do not enable comments! Doing so would enable visitors to your blog to insert code into your pages which would be executed by your web server--a serious security risk! (I reported this to Blogger a few months ago with suggestions for helping their users to stay safe--hopefully they'll take action on it soon).

Expect some changes to the layout of this blog soon.