How To Create A PHP Template

This tutorial teaches you how to create a PHP website template.

What Will You Learn?

To create a PHP template.
To use PHP Includes.
A little bit of HTML and CSS

Create a new folder on your computer and name it anything you want. In this example, I’ll name the folder, ‘Area51’ .

In the folder, create a new folder, named, ‘includes’ . Then, create a file in the folder, ‘Area51’ , named, ‘index.php’. If your website uses CSS, then you should create a CSS file in the folder, ‘Area51’.

Once all of the above has been completed, it’s time to look at the website’s source code. I’ve written up a quick source code to be used for this example. Warning! : The design is ugly and might hurt your eyes…

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"></p> <p><head></p> <p><title>iWebBuddy.com</title></p> <p><meta http-equiv="content-type" content="text/html; charset=utf-8" /></p> <link rel="stylesheet" type="text/css" href="style.css" /> <p></head></p> <p><body></p> <div id="header"> <h1>iWebBuddy.com</h1> </div> <div id="nav"> <ul> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> </ul> </div> <div class="content"> <p>Hello World! I’m new to iWebBuddy.com , are you?</p> </div> <div id="footer"> <div class="copyright">Copyright &copy year , SiteName</div> </div> <p><script>var rocket_lcp_data = {"ajax_url":"https:\/\/www.webhostingblog.co\/wp-admin\/admin-ajax.php","nonce":"cb08602259","url":"https:\/\/www.webhostingblog.co\/php-tutorials\/create-php-template","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='http://www.webhostingblog.co/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body></p> <p></html><br />

CSS :

body {<br /> font-family: Arial, Helvetica, sans-serif;<br /> background-color: white;<br /> }</p> <p>#header {<br /> width: 100%;<br /> height: 100px;<br /> background-color: #00FFFF;<br /> }</p> <p>#nav {<br /> height: 35px;<br /> background-color: #33FF00;<br /> text-align: center;<br /> }</p> <p>#nav ul {<br /> margin: 0px;<br /> color: #330066;<br /> text-decoration: none;<br /> padding-top: 0px;<br /> padding-left: 20px;<br /> padding-right: 0px;<br /> padding-bottom: 3px;<br /> }</p> <p>#nav ul li {<br /> display: inline;<br /> padding: 0px;<br /> text-align: center<br /> }</p> <p>.content {<br /> background-color: #66CC66;<br /> text-align: left;<br /> width: 100%;<br /> font-size: 0.9em;<br /> color: #99FF33;<br /> padding-top: 5px;<br /> padding-bottom:15px;<br /> }</p> <p>#footer {<br /> background-color: #33FF00;<br /> height: 100px;<br /> padding-top: 10px;<br /> width: 100%;<br /> }</p> <p>.copyright {<br /> text-align: center;<br /> color: #FFFF00;<br /> font-size : 0.8em;<br /> }

Create a new CSS File called, ‘style.css’ and add the above CSS to the style sheet.

Now, it’s time to separate pieces of the template and use PHP Includes.

In your ‘includes’ folder, create 3 new PHP files. I’ve listed these files below :

header.php
nav.php
footer.php

Now, it’s time to remove pieces of the template from ‘index.php’ and add them to separate files.

Find :

</p> <div id="header"> <h1>iWebBuddy.com</h1> </div> <p>

And add it to your ‘header.php’ file, in the ‘includes’ folder in the ‘Area51’ folder.

Find :

</p> <div id="nav"> <ul> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> <li><a href="http://www.example.com/">My Test Link</a></li> </ul> </div> <p>

And add it to your ‘nav.php’ file, in the ‘includes’ folder in the ‘Area51’ folder.

Find :

</p> <div id="footer"> <div class="copyright">Copyright &copy year , SiteName</div> </div> <p>

And add it to your ‘footer.php’ file, in the ‘includes’ folder in the ‘Area51’ folder.

Once you’re done, go back to the ‘Area51’ folder and open the ‘index.php’ file. Remember, you’ve removed a few codes from the file. Now, replace those parts with the code below :

<?php include('includes/???.php'); ?>

Replace the symbol ‘???’ with the file name of your PHP files from the ‘includes’ folder. Then add this code to the codes that you’ve removed from index.php and save your work.

Congratulations! You’ve created a PHP website template. Now, upload all of the files to your website.

Summary :

Basically, you’re making it easier to edit your files, instead of editing hundreds of files just to insert a link to one of your web pages that is seen on almost your whole website.

Troubleshooting :

Q: Why isn’t NotePad not opening .php files?
A: Upgrade to TextPad.

How To Create A PHP Template

Founder

Leave a Reply Cancel reply

Subscribe to stay updated

Hosting Resources

Founder

Reader Interactions

Leave a Reply Cancel reply

Footer

Subscribe to stay updated

Hosting Resources