Atomized (PHP) Templates

According to Dictionary.com, one of the definitions of ‘atomized’ is to break into small fragments. It’s also to subject to bombardment with atomic weapons, but that’s not what I mean here.

The nice thing about small fragments (of code) is that you can reuse them and end up with a pretty nice templated site. Now why would that be pretty OR nice, you ask?

Well, the great thing about templates is that you can use them to make updating your site a cinch. Why update a common header or footer on every page, when you could just change it in one place and all of the updating would be done on all those pages?

So let’s say we have a common header and footer. All together now, “we…have…a…common…header…and…footer” (and yes, I do think I’m funny). This same header and footer are used on every page of our site. Excellent. If we want to make a change, though (fix a missspelling, for example), we have to go and do it on every page of the site. That could be quite a few pages, resulting in a mindless, arduous, time-consuming, and frustrating task, especially when we want to get back to more important things.

We want to get to the place where we have one file for our header and one file for our footer. We then pull the contents of each of these files onto each page of our site (without our visitors even knowing it).

Let’s look at how PHP can help us to accomplish that.

The workhorse that’s going to get us there is this little PHP function:

include()

You could also use require(), but that will throw an error when the required file is not there (or is referenced incorrectly). Usually, we want to avoid showing users those types of errors to our users.

Anyway, when putting include() into a page that is mixed with (X)HTML, we have to tell the PHP parser to process it not as regular (X)HTML, but as PHP code. We do that by wrapping it like so:

<?php include(); ?>

Then, of course, we have to stick an actual file name in there, like this:

<?php include('footer.php'); ?>

Keep in mind that if you are not in the same directory as your includes, you will have to make sure that you are referencing the same include file. For example, since my footer is at /footer.php, on my /contact/ page, my include reference will have to look like this:

<?php include('../footer.php'); ?>

There are dynamic ways to do this, but I won’t get into those right now (if you are interested, look into $PHP_SELF and Reserved Variables).

You can also reference it using the full path, like this:

<?php include('http://nathanlogan.com/footer.php'); ?>

But DON’T!

The problem there is that it takes a LOT longer to pull that file (since it is going “out” to your own site to get it, rather than just realizing it’s only a directory or 2 away). Avoid it altogether, or you may end up with a whole other slew of problems.

So with that, here’s an adaptation of what I do on my site (and a place where you can get started on your own):

<div id="maincontainer">
<?php include('header.php'); ?>
<?php include('leftbar.php'); ?>
<div id="content">
<div class="entry">
<h2>Crazy Sample Title</h2>
<p>Lorem ipsum and all of that other random text that goes on a page to show where the actual content would be, even though, techincally, lorem ipsum IS content. Now that will blow your mind...</p>
</div>
</div>
<?php include("footer.php"); ?>
</div>

Slightly edited (for readability, mostly), here’s what you’ll find in my footer include (footer.php, as referenced above):

<div id="footer">
<span style="float:left;">XHTML | CSS | TxP || Blogwise</span>
<span style="float:right;">Copyright &copy; 2004 : Nathan Logan.</span>
</div>

Now I can update my copyright notice in one place and it will change on all my pages! Excellent!

This works especially well with publishing systems like Textpattern because by doing it this way, you can edit CSS, header, footer, left nav, or anything else externally. You have a templated system you can modify using your editor of choice (like Dreamweaver), where you get colored code, code completion, nice indentation, and the like (things you usually don’t get in CMSes).

Yummy.

(And sorry about the length of this article – I was trying to be thorough!)

  1. Yeah, that is by far the way to design. Editing one footer instead of 20 of the same footers, make’s it much easier. No problem about the article, better to explain it and be a little longer than for it to be short and have a lot of people going, huh?
    Jordon Brill is the author. Jan 13, 23:01 is the time. <
  2. Wow. I guess this article was written before I knew about $_SERVER[‘DOCUMENT_ROOT’]. Ouch.

    If you want to refer to root-relative includes (in an /includes folder, for example), you can do it like this:

    include($_SERVER[‘DOCUMENT_ROOT’] . ’/includes/footer.php’);

    And really, that’s the best way to go about it, as you can take that little snippet and throw it on any page in your site, regardless of its position in the directory tree. I hope that helps.
    Nathan Logan is the author. Jun 20, 12:28 is the time. <
  3. Another thought – should I update the article itself, or just leave that comment there??

    Hmm…
    Nathan Logan is the author. Jun 20, 12:29 is the time. <