How to create a simple template system using php

Post by **Neo** » Mon Mar 01, 2010 1:00 am

A common use for PHP is managing page templates. This makes is much easier to make changes to the layout on several pages by just editing one file. In this tutorial, I will explain some simple methods for managing templates in PHP. One involves using simple includes, and the others are slightly more advanced and flexible.

Let's start with the page template:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
<!--
body {
    background-color: #000033;
}
.wrapper {
    width: 800px;
    margin: 0px auto;
    background-color: #333333;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
.header {
    height: 100px;
    width: 100%;
    border: 2px inset #000000;
    background-color: #666666;
    color: #0000CC;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}
.footer {
    width: 100%;
    background-color: #000000;
    color: #CCCCCC;
    font-size: 10px;
    text-align: center;
}
-->
</style>
</head>
 
<body>
<div class="wrapper">
  <div class="header">Header</div>
  <div>Content</div>
  <div class="footer">Footer Text</div>
</div>
</body>
</html>

This is just a very basic example, but the methods are the same no matter how complex your layout is. Basically you want to place the page-specific content where the word "Content" is. There are two ways to do this that I will describe below.

Includes
The first method it the most basic, and it involves splitting the template into two pieces and including each half in the top and bottom.

First, you'll need to break your template into two files like this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
<!--
body {
    background-color: #000033;
}
.wrapper {
    width: 800px;
    margin: 0px auto;
    background-color: #333333;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
.header {
    height: 100px;
    width: 100%;
    border: 2px inset #000000;
    background-color: #666666;
    color: #0000CC;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}
.footer {
    width: 100%;
    background-color: #000000;
    color: #CCCCCC;
    font-size: 10px;
    text-align: center;
}
-->
</style>
</head>
 
<body>
<div class="wrapper">
  <div class="header">Header</div>
  <div>

Code: Select all

</div>
  <div class="footer">Footer Text</div>
</div>
</body>
</html>

You can see how I split it right where I want the content. We're basically making a sandwich here, with the template being sliced in half like bread and the content being added like the meat, cheese, etc.

Using this is very simple using the include function:

Code: Select all

<?php
// the top half
include('template_head.htm');
 
// content goes here
echo 'Content';
 
// the bottom half
include('template_foot.htm');
?>

The problem with this is that making multiple parts of the page editable becomes messy unless you use PHP within the template files.

Smarter Includes
Includes are actually designed to execute code from external files rather than including static files. This allows you to use PHP files as your template. Here is what that will look like:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<style type="text/css">
<!--
body {
    background-color: #000033;
}
.wrapper {
    width: 800px;
    margin: 0px auto;
    background-color: #333333;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
.header {
    height: 100px;
    width: 100%;
    border: 2px inset #000000;
    background-color: #666666;
    color: #0000CC;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}
.footer {
    width: 100%;
    background-color: #000000;
    color: #CCCCCC;
    font-size: 10px;
    text-align: center;
}
-->
</style>
</head>
 
<body>
<div class="wrapper">
  <div class="header">Header</div>
  <div><?php echo $content; ?></div>
  <div class="footer">Footer Text</div>
</div>
</body>
</html>

As you can see, I replaced the page title and content with PHP code that outputs variables. You can use code like this to set the variables and include the template:

Code: Select all

<?php
// set up content
$title = 'Custom Title';
$content = 'Page Content';
 
// output the template with variables set
include('template.php');
?>

This is great, but some may prefer to have the same advantages without using PHP in their template, and I'll explain how to do that next.

Template Keywords
This method is my preferred method. Instead of includes it uses string functions, which are slightly more complicated and useful at the same time. Here is what the template would look like:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{TITLE}</title>
<style type="text/css">
<!--
body {
    background-color: #000033;
}
.wrapper {
    width: 800px;
    margin: 0px auto;
    background-color: #333333;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
.header {
    height: 100px;
    width: 100%;
    border: 2px inset #000000;
    background-color: #666666;
    color: #0000CC;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}
.footer {
    width: 100%;
    background-color: #000000;
    color: #CCCCCC;
    font-size: 10px;
    text-align: center;
}
-->
</style>
</head>
 
<body>
<div class="wrapper">
  <div class="header">Header</div>
  <div>{CONTENT}</div>
  <div class="footer">Footer Text</div>
</div>
</body>
</html>

All I did here is added keywords wrapped in brackets. You can use any combination of characters for keywords, but I find this the most logical. Anyway, here is what the PHP code would look like:

Code: Select all

<?php
$page_title = "Home";
 
if(is_file("template.htm")){
   $template = file_get_contents("template.htm");
   $template = str_replace('{TITLE}', $page_title, $template);
   $template = explode('{CONTENT}', $template);
}
 
echo $template[0];
 
// content of page
echo 'Hello!';
 
echo $template[1];
?>

This sets the page title, opens the template file, replaces keywords, then outputs it in two halves. It's similar to the first "sandwich" method with some added control. Now to break down the important parts...

Code: Select all

$template = file_get_contents("template.htm");

This line opens the template file (located in the same directory) and loads its contents into a variable as a string.6

Code: Select all

$template = str_replace('{TITLE}', $page_title, $template);

This replaces the {TITLE} keyword with the $page_title variable. You can use this for as many keywords as you want just by repeating this line with a different keyword and variable.

Code: Select all

$template = explode('{CONTENT}', $template);

This is where our template is split in half. It will split the template wherever the text {CONTENT} is found, which should only be one place. The explode function breaks a string into an array of strings with an index starting at 0. So $template[0] is the first piece and $template[1] is the second piece.