How to Make a Template System in PHP
Basic websites that use only HTML and sometimes JavaScript contain many pages that repeat the same code. The homepage and an “About Us” page will have different content but the same header and footer code, for example. When you need to update such a site, every page needs its code updated, and this becomes difficult if the website is large. Such websites benefit from PHP templates, which you can create yourself. By chopping up HTML code into reusable parts and using a single PHP file to call those parts, save yourself the trouble of editing the header or footer of every page on your site.
Other People Are Reading
Instructions
-
-
1
Code a basic, skeletal HTML page as your base for the template system. Your base needs everything that you would find in the code for an entire Web page, though you can start out simple:
<!doctype HTML>
<html>
<head>
<meta charset=”utf-8”>
<title>Your Page Title Here</title>
<link rel=”stylesheet” href=”path/to/style.css”>
</head>
<body>
<!-- Body of Web page goes here -->
</body>
</html>This is only an example of a very simple, base Web page. You will cut this up into various PHP files to create the template system.
-
2
Save your base HTML file in a new folder on your computer. Save all parts of the template system inside this folder. You can further organize your files into sub-folders depending on preference, and doing so is recommended if your system will include many files.
-
-
3
Copy the HTML code, starting at the doctype declaration and ending at the opening “<body>” tag. Paste this chunk of code inside a new file and save it as “header.php”. This will become the header template, to which you should add HTML for a page title, navigation bar and any heading images.
-
4
Copy the code starting at the next line down from “<body>” and ending at the HTML for your footer. The HTML for the footer might be a div or a pair of “<footer>” tags. If you did not code a footer in the base file yet, then copy code up to but not including the closing “</body>” tag. Paste this code in a blank file and save it as “body.php.” You can also further chop the body into two or more parts, such as “content.php” and “sidebar.php” for a two-column layout.
-
5
Copy and paste the remaining HTML code into a blank file and save it as “footer.php.” The footer template should include both the HTML code for the footer as well as closing tags for the body and HTML. If your base placed JavaScript in the footer, make sure the footer template includes that code as well.
-
6
Create a new PHP file and save it as “index.php.” Write the following code:
<?php
require_once('path/to/header.php');
require_once('path/to/body.php');
require_once('path/to/footer.php');
?>This file will call all templates into one file and, out of those parts, it will build a full page of HTML. When you load the index in a browser, right-click and select to view the source code, you will see only HTML and JavaScript. That is because PHP executes on the server before the page is sent to a browser.
-
7
Copy and paste the contents of “index.php” into a new file and save it as “homepage.php.” Create another new file and paste in the contents of “body.php,” then change that file's code to match what you want for your home page. Save the new page as “homepage-body.php.” Go back to “homepage.php” and change “body.php” to “homepage-body.php.” This is the basic method for reusing templates and creating new ones.
-
1
Tips & Warnings
If you need a good, ready-made HTML base file, download the HTML5 Boilerplate. This boilerplate contains many best practices for HTML and JavaScript coding and will get you started more quickly.
