Basic Template System in PHP

Posted on September 6th 2009 6:13pm Sunday, by Blaine

When developing a basic PHP template system I attach 3 layout files to my content file. The three layout files are html.php, head.php, and foot.php. For this example I am going to be creating a “downloads.php” page and attach the layout files using PHP includes. I teach how PHP includes work in my blog as well.

You may be wondering why I use 3 layout files when some developers only use head.php and foot.php. I split head.php into two files to make it easy to add page specific JavaScript, tags, and CSS in the <head> tag of the document without using PHP variables. This has sped up development and made it easier for PHP beginners since they only need to understand PHP includes.

html.php

This contains the Document Type and Content Type meta tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

head.php

The top portion of your website layout code. This and foot.php are the majority of your layout code. Most of your opening DIVs are here to wrap around the content. I use CSS so I linked the style sheet just before I close the <head> tag.

<link rel="stylesheet" type="text/css" href="inc/styles.css">
</head>
<div id="wrapper">
<ul>
 <li><a href="index.php">Home</a></li>
 <li><a href="downloads.php">Downloads</a></li>
</ul>
<div id="content">

foot.php

The bottom part of your layout code. Generally foot.php contains most of the closing tags for you layout. I put Google analytics code before the ending body tag so it is the last thing to load on the page.

</div>
</div>
</body>
</html>

These are all the files you will need for your layout. Next is the content file.

downloads.php

This file is mostly content with some mild includes. It is very clean and easy to edit. The code for the layout is included with PHP.

<?php include('inc/html.php'); ?>
<title>Downloads Page</title>
<!-- The reason there is html.php and head.php is so you can put stuff in the <head> of the page. Most importantly the page title but also keywords, descriptions, JavaScript, and etc. -->
<?php include('inc/head.php'); ?>
<h1>Downloads</h1>
Here is a list of all my downloads!
<ul>
 <li><a href="#">Download to Savage Lands</a></li>
</ul>
<?php include('inc/foot.php'); ?>

All my Includes are in an inc/ folder because when you separate your content from your template it makes the website easier to edit.

Finally, after uploading all the files you can open downloads.php in the browser and the source should look like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Downloads Page</title>
<!-- The reason there is html.php and head.php is so you can put stuff in the <head> of the page. Most importantly the page title but also keywords, descriptions, JavaScript, and etc. -->
<link rel="stylesheet" type="text/css" href="inc/styles.css">
</head>
<div id="wrapper">
<ul>
 <li><a href="index.php">Home</a></li>
 <li><a href="downloads.php">Downloads</a></li>
</ul>
<div id="content">
<h1>Downloads</h1>
Here is a list of all my downloads!
<ul>
 <li><a href="#">Download to Savage Lands</a></li>
</ul>
</div>
</div>
</body>
</html>

2 Responses to “Basic Template System in PHP”

  1. [...] you don’t know these things I wrote another blog explaining PHP includes and how php templates work so you can get [...]

  2. Site Skeleton Generator | Ajax and PHP Web Developer Blog on September 21st, 2009 at 11:07 am
  3. You own a very interesting blog covering lots of topics I am interested as well.I just added your site to my favorites

  4. Andria Furlough on May 14th, 2010 at 1:42 pm

Leave a Reply