UltraMega Tech.
7Dec/084

Simple PHP Page Template System

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!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>
1
2
3
4
5

</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:

1
2
3
4
5
6
7
8
9
10

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

See it in action.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!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:

1
2
3
4
5
6
7
8

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

See it in action.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?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...

5

   $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

   $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.

7

   $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.

See it in action.

Anyway, I hope this provides some useful tools.

Posted by Steve

Tagged as: , Leave a comment
Comments (4) Trackbacks (1)
  1. Don
    August 5th, 2009 - 06:42

    this tut helped me out alot thanks

    ( REPLY )
  2. Max
    September 14th, 2009 - 03:38

    Many thanks! I am a designer so I don’t know too much php, but this helped me a lot with my new website, on which I wanted easy layout modification in the future.. THANKS A LOT!

    ( REPLY )
  3. Ian.J.Gough
    January 27th, 2011 - 03:24

    Great stuff!
    I’ve searched the Internet for this and will be using it for my new site design.
    Many Thanks,
    Ian

    ( REPLY )
  4. AARON.Das
    February 8th, 2011 - 07:23

    Hello,

    I’m a newbie. I have a db that has award winners in it. so it will be Award, year, name and bio. I was wondering how can I use a template to generate a new page for each person.

    so it would look like this

    http://www.mysite.com/winner-2009.php
    http://www.mysite.com/winner-2010.php
    http://www.mysite.com/winner-2011.php

    Thanks,

    Aaron

    ( REPLY )

Leave a comment

(required)

Simple PHP Page Template System | PHP-Blog.com
» «

Categories

Archives

  • [+]2011 (3)
  • [+]2010 (12)
  • [+]2009 (46)
  • [+]2008 (15)

Links

Meta

Add to Technorati Favorites