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
- Content in your <head> tag
- Header/Navigation
- 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 class="header"> <div class="topnavigation"></div> </div> <!--end header.php--> <div class="content"> Content </div> <!--start footer.php--> <div class="footer"> 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 class="header"> <div class="topnavigation"></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 class="footer"> 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 class="content"> 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!
Resources for PHP Include File
- http://www.w3schools.com/PHP/php_includes.asp
- http://us2.php.net/include/
- http://www.tizag.com/phpT/include.php
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment27 Peeps Have Spoken Their Minds...
Sweet… this so simple. Thanks a million!
Nice Tutoo
Thank you so much ..you made this so simple for a beginner,like me, to understand so well :-)) With ur help i was able to create an include file.
how we create our own templates.
i want to include some javscript effects only on some pages(not all) of website , then what is the solution ?
Im glad some of you foud this useful :-) I still use this technique for simple sites~
I would call your javascript files either on the header.php or footer.php if its globally used. I believe they say that its best to add it at the end of the html for best practices so perhaps adding it at the bottom of your footer.php is the best way~
Thanks, this is very good.
in head-tag.php code should be
should be for head tag area
in head-tag end comment end header.php should be end head-tag.php and in head-tag.php we can’t use any comment line on the top of doctype other browse would go in quirk mode
Thank you so much!! You just saved me from a very big trouble (of editing 200+ of pages each time I need to update something)
So simple and very well explained.
Best regards,
MissANN
Awesome! Great tutorial.
I was trying to figure out how to separate the title tag and page meta data from the header.php file (duplicate titles/meta across whole site = bad) on my own site and was over complicating things…
Simply leave unclosed in the header.php and drop , , and in the content file…duh! So simple!
I still cannot get php to render the “” part of the XHTML strict doctype that will make it valid. However try and output it, it does not validate and affects the rendering. Any thoughts?
If I have a sub-directory and want to include my template from the main directory, I can’t get this to work.
What should I do with the code?
You can do it like this: <?php include ('../include/topnav.php') ?>
or you can put the absolute path as well if your having a hard time:
<?php include ('http://www.site.com/include/topnav.php') ?>
I have error in IE browsers! When i make it like here IE browsers see the page in different way. IE dont like that way :) i think its hard for IE to read the “head-tag.php” like that with this import. Some confusion is happen.
Will be happy to see fix for that.
this is the best way to do creat a template using php?
for example, to creat this site you use this method?
I am really amused about the passion you put in your website and in your work Soh!
Please receive my sincere RESPECT & admiration.
I has been a pleasure having found this site.
Best Regards!
jjyepez
@ Riggs
Or you can make a php file called “_dirinfo.php” in each directory on your site and define the path to the root of your site.
Example:
The root of your site is: home/your_page/public_html/
the directory of your file you want to include is: home/your_page/public_html/includes/
So your “_dirinfo.php” file located in home/your_page/public_html/includes/ should look like this:
“define(“PATH_TO_ROOT”, “../”);”
The only thing you have to do is include the file “_dirinfo.php” to your files which will be included anywhere on the server. So if you include a file “home/your_page/public_html/includes/my_include.php” from your ROOT directory or anywhere else it wont break the include, because the PATH_TO_ROOT constant will always point to ROOT. To include “my_include.php” in index.php write this:
include(PATH_TO_ROOT.”includes/my_include.php”)
NOTICE: this is only needed if you have some other includes in your “my_include.php” that should stay valid once you include the file “my_include.php” somewhere.
I have an issue.
my index.htm works great
and when I copy it and make it index.php and insert som php into a div – no problem. But when I move the entire section to a head.php and include it, there are issues with automargin for a div in the middle, and some links that have a static position simple ignore this. all other parts of the css works fine, such as background & colours..
Thank man..
it is soooo… nice , and easily i understood.
i want much more examples.
pls send web link to my id
thank
team tamilofun….
i learn a lot of thing on your site.. and your explanation is simple with powerfull result, thank you very much..
AWESOME TUTORIAL ! Great job and thanks a lot :)
y0, good stuff… this is the current method I’ve been using with all of the sites I’ve been making. I would like to share with everyone a great way of testing your php/mysql stuff on your local computer (aside from uploading to a server) is making your computer a server with a sweet program! Install WAMP or XXAMP on your local computer and it gives you the freedom of having your very own server on your local machine. Check it out:
WAMP (for windows)
http://www.wampserver.com/en/
XXAMP (for everything else)
http://www.apachefriends.org/en/xampp.html
peace!
Hi.
I had forgotten how to simply set up a PHP page while preparing to create some WordPress themes. This got me right back in the saddle.
thanks!
Great info for beginners that are managing hundreds of html files one by one.
Excellent for beginners! I’ve gotten tired of doing that and wanted a more dynamic layout system so I eventually moved on to a system like (haven’t tested this exact code but the overall idea works pretty well):
<?php
$file = "MyNewTheme.php"
$return = null;
$content = "[YOUR CUSTOM CONTENT HERE]";
$css = "<link rel="stylesheet" href="style.css" type="text/css" media="screen" />";
$title = "[INSERT TITLE HERE]";
ob_start();
if(exists($file))
echo $file;
else
exit;
$return = ob_get_contents();
ob_end_clean();
$patterns = array();
$patterns[0] = '/<e[\s] content[\s]*=[\s]*"(headers)"[\s]*[\/]>/i';
$patterns[1] = '/<e[\s] content[\s]*=[\s]*"(title)"[\s]*[\/]>/i';
$patterns[2] = '/<(content)(?(?=[\s]*[\/])[\s]*[\/]>|>[\s]*<[\/]content>)/i';
$return = preg_replace_callback($patterns, "replace", $return);
function replace($value){
global $css, $title, $content;
$m = "";
switch(strtolower($value[1]))
{
case 'css':
$m = $css;
break;
case 'title':
$m = $title;
break;
case 'content':
$m = $content;
break;
}
return $m;
}
?>
Speak Your Mind...