How to Create a Web Page Template Using PHP Includes
These instructions will guide you through the process of setting up a template Web page that is constructed with PHP include files. We will use a very simple example Web page to demonstrate how this is done.
Step 1 - Create your Web page template
1.1) Create your Web page template as you normally would, forgetting about includes. Your template should, of course, include all the "common elements" — that is, all items that will appear the same on every page of your site, such as your navigation links, logo, copyright info, etc.
1.2) If you wish to use PHP to display an environment variable on all your pages (for example, to show the page's last modified date, as done in the sample code below), place the appropriate code in your page.
1.3) In the place where your content would appear, place the words "CONTENT HERE".
1.4) Save this page, naming it "wholepage.php".
Step 2 - Group the common elements together in the code
2.1) Within the head section, you will probably have some code that will be the same on each page (a link to a style sheet, a meta tag specifying the character set, etc.) and some code that will be unique to each page (the title, meta keywords, etc.). To the degree possible, group the common and unique elements together in the code, as done below.
In this example, the common code that will be identical on every page is in red, and the code that will be different on every page is in brown. (Note that in this example we are assuming that the content of all the pages of the site will be written by the same person.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="Author" content="YOUR NAME HERE">
<meta name="Keywords" content="KEYWORD1, KEYWORD2,
KEYWORD3">
<meta name="Description" content="BRIEF DESCRIPTION OF PAGE
HERE.">
<title>TITLE HERE</title>
</head>
<body>
<div id="banner">
<img src="images/xyzlogo.gif"
alt="XYZ, Inc. logo">
</div>
<div id="menu">
<a href="index.php">Home</a> |
<a href="sitemap.php">Sitemap</a> |
<a href="products.php">Products</a> |
<a href="contact.php">Contact Us</a>
</div>
<div id="content">
CONTENT HERE
</div>
<div id="footer">
Last revised:
<?php
putenv("TZ=America/Los_Angeles");
echo date("m/d/y", filemtime($_SERVER["SCRIPT_FILENAME"]));
?>
</div>
</body>
</html>
2.2) Your logo and navigation links (your "menu") would also normally be considered common elements, as shown in the body section.
2.3) At the bottom of this page you will see some PHP code to show the last time the page was changed. Eventually this PHP code will be placed in another PHP include file, demonstrating a simple PHP script "nested" inside of a PHP include.
Step 3 - Validate this page
3.1) Upload this page to the Web server.
3.2) Validate this page. See How to Use the W3C HTML and CSS Validators.
3.3) If there are any errors, correct them, re-upload the page, and validate it again. Remember that all of your pages will eventually contain this code, so it is extremely important that this page contains no errors at all!
Step 4 - Turn the common elements into PHP includes
4.1) Let's start at the top of the page's code and work our way down. In your text editor, select the first block of common code and under the Edit menu choose "Cut."
4.2) Open a new blank document and "Paste" the block of code into it.
4.3) Name this new file "top.php". Close this file.
4.4) Going back to "wholepage.php", at the very top, where this block of code used to be, place the following code:
<?php
include("includes/top.php");
?>
4.5) Now select the next block of common code and under the Edit menu choose "Cut."
4.6) Open a new blank document and "Paste" the block of code into it.
4.7) Name this new file "middle.php". Close this file.
4.8) Going back to "wholepage.php", where this block of code used to be, place the following code:
<?php
include("includes/middle.php");
?>
4.9) Now select the last block of common code and under the Edit menu choose "Cut."
4.10) Open a new blank document and "Paste" the block of code into it.
4.11) Name this new file "bottom.php". Close this file.
4.12) Going back to "wholepage.php", at the very bottom, where this block of code used to be, place the following code:
<?php
include("includes/bottom.php");
?>
4.13) Now this "wholepage.php" file is no longer whole; it is now built with includes. So save this modified template with a different name. Name it "template.php". (You should keep the original, uncut "wholepage.php" the way it is. If you make major changes to your template in the future, you may find it less confusing to edit the "wholepage.php" template and split off the includes again, rather than edit the separate include files.)
4.14) Now you should have five documents: "wholepage.php", "template.php", "top.php", "middle.php", and "bottom.php". The "wholepage.php" should look something like the code above in step 2. The other four files should look something like this:
top.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="Author" content="YOUR NAME HERE">
middle.php
</head>
<body>
<div id="banner">
<img src="xyzlogo.gif" alt="XYZ, Inc. logo">
</div>
<div id="menu">
<a href="index.php">Home</a> |
<a href="sitemap.php">Sitemap</a> |
<a href="products.php">Products</a> |
<a href="contact.php">Contact Us</a>
</div>
bottom.php
<div id="footer">
Last revised:
<?php
putenv("TZ=America/Los_Angeles");
echo date("m/d/y", filemtime($_SERVER["SCRIPT_FILENAME"]));
?>
</div>
</body>
</html>
template.php
<?php
include("includes/top.php");
?>
<meta name="Keywords" content="KEYWORD1, KEYWORD2,
KEYWORD3">
<meta name="Description" content="BRIEF DESCRIPTION OF PAGE
HERE.">
<title>Title here</title>
<?php
include("includes/middle.php");
?>
<div id="content">
CONTENT HERE
</div>
<?php
include("includes/bottom.php");
?>
Step 5 - Upload the files and test the template
3.1) Upload these four files to the Web server. (The paths we used in this example indicate that three include files should be uploaded to the "includes" directory.)
3.2) View the "template.php" Web page in a browser. It should look exactly like the "wholepage.php" page. Congratulations!
3.3) Now you can use this new template as the starting point for all your pages, without worrying about the code in the three PHP include files. Of course you will need to change the title in each new page you create, and, if you use the meta tags above, don't forget to customize the sections as indicated in purple below:
<meta name="Keywords" content="KEYWORD1,
KEYWORD2, KEYWORD3">
<meta name="Description" content="BRIEF
DESCRIPTION OF PAGE HERE.">
<title>TITLE HERE</title>
Here's a link to the template created in this exercise.