Create Simple Templates Using PHP

Create Simple Templates Using PHP

Create Simple Templates Using PHP

There are multiple ways you can create a template for your site so you can control the individual sections with one global file. Before I got into WordPress, I was using the php include method which I found very simple and easy to maintain. For those who choose not to use WordPress or possibly intimidated by it (just as I was), this is a much simpler route.

PHP Support With Your Hosting

While most hosting companies support PHP, if you run into issues, double check with your hosting company to make sure PHP is supported.

Step 1.
HTML Template

The first thing you should do, is simply create your page as you normally would in html. Once you have a finished product, identify each section in your html that is repeated throughout each page. Commenting out each section may help you visualize this better.
Example

  1. Content in your <head> tag
  2. Header/Navigation
  3. Footer

Source Code

<!--start head-tag.php-->
<!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=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
<!--end header.php-->
	<meta name="description" content="Your Description Here" />
	<meta name="keywords" content="Your Keywords Here" />
	<title>Your Page Title</title>
</head>

<body id="homepage">

<!--start header.php-->
<div>
	<div></div>
</div>
<!--end header.php-->

<div>
	Content
</div>

<!--start footer.php-->
<div>
	Footer
</div>

</body>
</html>
<!--end footer.php-->

Each of these sections of the site will be in its own ‘include’ file.

Step 2.
Splitting the HTML into Include Files

Now that we have an outline of each section, we will now be cutting and pasting each section into its own php file. Taking the example above, this is how we will split each section:

head-tag.php
Open a new php file and save it as head-tag.php. Copy and Paste the head-tag section into this new file.

<!--start head-tag.php-->
<!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=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
<!--end header.php-->

header.php
Open a new php file and save it as header.php. Copy and Paste the header section into this new file.

<!--start header.php-->
<div>
	<div></div>
</div>
<!--end header.php-->

footer.php
Open a new php file and save it as footer.php. Copy and Paste the footer section into this new file.

<!--start footer.php-->
<div>
	Footer
</div>

</body>
</html>
<!--end footer.php-->

Step 3.
Including the Files Into the Page

index.php
Open a new file and save it as index.php. What we will do now, is call the other include files into this page.
Source Code

<?php include("head-tag.php"); ?>
	<meta name="description" content="Your Description Here" />
	<meta name="keywords" content="Your Keywords Here" />
	<title>Your Page Title</title>
</head>

<body id="homepage">

<?php include("header.php"); ?>

<div>
	Content
</div>

<?php include("footer.php"); ?>

Use can now use the index.php file as a template and make the rest of your pages by copying this file and modifying its content.

*Note – I left the <meta> tags, <title> tag, and <body> tag in the file so you can modify these specifically for each page. As we all know, the <meta> tags and <title> tag are important in SEO. I left the <body> tag so you are still able specify each page ID using the Style sheet.

If you have any questions, comments, or a better solution, please let me know!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>