Create Simple Templates Using PHP
Blog » CSS/XHTML » Create Simple Templates Using PHPCreate Simple Templates Using PHP
November 3rd, 2008
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
This entry was posted on Monday, November 3rd, 2008 at 1:53 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
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