How to Create a PHP Website Template from Scratch

Posted in , , , • 1138 days ago • Written by • 289 Comments

This is a tutorial on creating a PHP website template starting with HTML and CSS. We will start with the basics and you can also download the final product. Please remember that I am using very basic CSS styling in this example just for you to get the idea, and not so much to make it look pretty. The download will contain both the styled example as well as a complete blank template that you can use for your own starting point for any project personal or commercial. The demo files are released under GPL V2.

This tutorial assumes you have basic understanding of html and css. At the end of this tutorial you should have a basic understanding of using php and converting an html site to php.You can also download the demo files here.

The actual template will be created in 10 easy steps. I will then take it a step further to show you how to add variables to your template.

Setting up the File structure and Folders

Step One

Let’s start by creating a new folder. I have named this folder php_site

Inside of this folder we are now going to create two new files. One is index.html and the other file is going to be named style.css

Step Two

Now we are going to create two more folders inside of our main folder. The first folder is going to be named includes, and the second folder will be named variables.

We should now have a setup that looks like the following:

How to Create a PHP Website Template from Scratch

Step Three

Now, using your favorite html editor open the index.html file. We are going to to create a basic html website document. This is the code I am using:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

<div id="header">

</div> <!-- end #header -->

<div id="nav">

</div> <!-- end #nav -->

<div id="content">

</div> <!-- end #content -->

<div id="sidebar">

</div> <!-- end #sidebar -->

<div id="footer">

</div> <!-- end #footer -->

		</div> <!-- End #wrapper -->

	</body>

</html>

Step Four

Now I am going to open up the style.css file and add the divs we will be using. I have added very basic styling so you can see the site and get the idea of what we are doing. Remember that you can use your own styling when creating your website to suit your needs.

This is the CSS I am adding to the stylesheet:


body {
background-color:#f1f1f1;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

#header {
width:960px;
height:135px;
margin:0 auto;
margin-bottom:25px;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}

#header h2 {
padding:10px;
}

#nav {
width:960px;
height:40px;
border-bottom:1px solid #ccc;
}

#nav a {
display:inline;
padding:10px;
text-decoration:none;
background-color:#f1f1f1;
}

#nav a:hover {
background-color:#bababa;
height:80px;
}

#content {
width:675px;
float:left;
padding:10px;
}

#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}

#sidebar a {
text-decoration:none;
}

#sidebar li {
list-style:none;
}

#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ccc;
}

#footer p {
padding:10px;
}

Step Five

Next we will create some more files that we will be using when we start converting our template to php.

Open up the folder we created inside of our main folder called variables. Next, create a blank file called variables.php

How to Create a PHP Website Template from Scratch

Then go into the other folder we created called includes and create the following files:

header.php
nav.php
sidebar.php
footer.php

Step Six

Now we will need to add some content to our index.html file. I have filled in the header area with an H2 tag for the website header title. I will also be adding the links in the nav area, as well as some text in the content area, sidebar, and footer. The final index.html file now looks like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

<div id="header">

	<h2>1stWebDesigner PHP Template</h2>

</div> <!-- end #header -->

<div id="nav">

	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Portfolio</a>
	<a href="#">Contact</a>

</div> <!-- end #nav -->

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>

<h3>Box Two</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
	<p>Copyright &copy 2010 <a href="http://www.1stwebdesigner.com">1stWebDesigner.com PHP Template</a></p>
</div> <!-- end #footer -->

		</div> <!-- End #wrapper -->

	</body>

</html>

Step Seven

Now we will start converting our template to PHP. We will need to take a brief look at the html code we have and decide which areas will be sliced. We will be removing specific areas from the index.html file and placing them into the php files we have created inside the includes folder.

Let’s start with the top of the html document on the header. Copy the header div and cut it from the document. Then open your includes folder, and the header.php file we created and add the code to the header.php

header.php


<div id="header">

	<h2>1stWebDesigner PHP Template</h2>

</div> <!-- end #header -->

Make sure this area has now been removed completely from the index.html file and placed into the header.php file. In place of this code, we will now add the following to the index.html file.


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

Now our index.html should look like this: (Make a note that the header area has now been replaced with our php include function that is calling our external header.php file)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

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

<div id="nav">

	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Portfolio</a>
	<a href="#">Contact</a>

</div> <!-- end #nav -->

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>

<h3>Box Two</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

		</div> <!-- End #wrapper -->

	</body>

</html>

Step Eight

Now we will continue to slice the html document and place the code in the proper php files we made.

Next let’s move to the nav div. The same as above, we are going to copy and cut that piece of code and place it into our nav.php file that is located inside of the includes folder.

This is what we are adding to the nav.php file:


<div id="nav">

	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Portfolio</a>
	<a href="#">Contact</a>

</div> <!-- end #nav -->

Again we will replace the code removed from the html document with the following:


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

Now our index.html document will look like this: (Again note that both the header, and the nav area are now replaced with php includes)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

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

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

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>

<h3>Box Two</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

		</div> <!-- End #wrapper -->

	</body>

</html>

Step Nine

Now it is time to do the sidebar. Copy and cut the sidebar div and place it into the sidebar.php file we created that is located inside the includes folder.

This is the code we are adding:

sidebar.php


<div id="sidebar">

<h3>Navigation</h3>
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>

<h3>Box Two</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

We will again do the same thing for the footer area. Copy and cut the footer div and place it into the footer.php file we created in the same includes folder.

Here is the footer.php code:


<div id="footer">
	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

Now with all of our elements taken from the index.html file and added to the different php files, the final index.html should look like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

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

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

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

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

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

		</div> <!-- End #wrapper -->

	</body>

</html>

Step Ten

Now that our index.html is properly sliced, we can rename the index.html file to index.php

Now that we have created this template, as long as the php includes are on any page we only have to modify the one single file to make it visible accross your entire website. This again is good for anyone with a lot of content and pages. Instead of having to edit the sidebar on every page of your site you can now just edit the sidebar.php file and it will reflect on all of your pages. This makes it a lot easier to keep up with large portions of website material.

Our folder should now look like this:

Creating PHP Variables for the template

Now we will make it a little more dynamic and even easier to be able to modify when needed. Lets take a look at the header.php file inside the includes folder.


<div id="header">

	<h2>1stWebDesigner PHP Template</h2>

</div> <!-- end #header -->

We are going to modify this a little bit to change the H2 heading from a different file using a variable. Creating a variable is good for areas on your website that may change more than others. It may also be a good way to allow clients to edit a single file to change certain items on their website.

Now let’s replace the text within the H2 heading to this:


<h2><?php echo $heading ?></h2>

Now our header.php file will look like this: Notice we placed the echo php command within the H2 brackets. This will give our variable output the H2 heading we want.


<div id="header">

	<h2><?php echo $heading ?></h2>

</div> <!-- end #header -->

Next we are going to open up the file inside of the variables folder that we created named variables.php

We will add the variable that we are going to echo on the website heading. I have named this variable heading.

variables.php


<?php

$heading='1stWebDesigner PHP Template';

?>

Now, at any time we want to change what is titled on the heading of our template, we can simply open our variables.php file and modify what is between the quotes. This will always be the output on our header.php file where we placed the echo command.

One step Further

Now we will do the same thing to our footer.php file. Open the footer.php that we have in our includes folder and let’s take a look at it:


<div id="footer">
	<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->

Let’s change this like we did the header file, and add a variable to use.

We will place our echo command within the paragraph brackets. You should now have the following in your footer.php:


<div id="footer">
	<p><?php echo $footer ?></p>
</div> <!-- end #footer -->

And again we will visit our variables.php file located in the variables folder we made and we will now update it with our new variable. The final should now look like this:

variables.php


<?php

$heading='1stWebDesigner PHP Template';

$footer='Copyright &copy; 2010 1stWebDesigner PHP Template';

?>

Make note of the above. When using PHP variables we cannot use a regular quote. They should be replaced as you see above directly after the a href=

This is to ensure the code is read properly by browsers. If you use a regular quote it will not work.

Making it all work

The last thing we need to do in order to make our variables work is to do one last php include within our template to call the variables file.

Let’s open up our header.php file and add the following:


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

This will tell our template to use the variables file we have created.

The header.php file should now look like this:


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

<div id="header">

	<h2><?php echo $heading ?></h2>

</div> <!-- end #header -->

Next we will need to do the same to our footer.php file. Add the same include at the top. The footer.php should now look like this:


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

<div id="footer">
	<p><?php echo $footer ?></p>
</div> <!-- end #footer -->

Now that these two files are calling the variables, you will see the reflected results in the final template. You can always create new variables, and create any type of php files you want. You can even change the folder directory in any way you wish as long as your php include function displays the correct path to the files.

Playing with the PHP template

To test it a bit further let’s duplicate the index.html file and make a second page that will also call the external php files. This way we will be able to see more exactly how this works.

Make a copy of your index.php file and rename the new file to about.php

Inside of this file you can change anything you want within the #content div inside of the website #wrapper

I have created the following for testing purposes:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>1stWebDesigner PHP Template About Page</title>

</head>

	<body>

		<div id="wrapper">

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

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

<div id="content">

<h3>About Me Page</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Notice The Include Files</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<h3>Another Heading Starting Point</h3>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

<p>

Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque volutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sed elit a purus ultrices iaculis eget sit amet dolor. Praesent ac libero dolor, id viverra libero. Mauris aliquam nibh vitae eros sodales fermentum. Fusce cursus est varius ante vehicula eget ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

</p>

</div> <!-- end #content -->

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

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

		</div> <!-- End #wrapper -->

	</body>

</html>

Now make sure that we go inside of our nav.php file as well as the sidebar.php file and link the new page we have just created. Again using your html editor of choice, first open up your nav.php file.

Updating the links should make your file now look like this example below:

nav.php


<div id="nav">

	<a href="index.php">Home</a>
	<a href="about.php">About</a>
	<a href="#">Portfolio</a>
	<a href="#">Contact</a>

</div> <!-- end #nav -->

Next we will need to do the same thing to our sidebar.php file to make sure the links now work.

sidebar.php


<div id="sidebar">

<h3>Navigation</h3>
	<li><a href="index.php">Home</a></li>
	<li><a href="about.php">About Us</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>

<h3>Box Two</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

Now we are complete. We have created a two page PHP website template that we can expand on more to make a completed project. We have learned how to use basic php includes and variables to be able to edit content accross many different pages at one time. I really hope you have enjoyed this post and learned something from it as well.

Just to take a final look at the new file structure with the added page you can view the image below for reference:

This tutorial was created to give you some basic knowledge on php and creating a php website template.

If you have any questions I will do my best to answer them in the comments below.

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

10 Written Articles

My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.

289 Comments Best Comments First
  • Sreenivas

    Thursday, May 12th, 2011 08:41

    100

    I don’t have basic knowledge on php once I read this tutorial I got more stuff.
    IT s very helpful for me.

    +2
  • Benjamin

    Wednesday, February 16th, 2011 16:04

    75

    This is quite possibly the best tutorial on php based templates I’ve come across so far. Very useful. Thanks

    +2
  • Mgidado

    Monday, March 14th, 2011 10:51

    82

    I really find this tutorial very helpfu. Thank you. I recetly had php course but with this that you gave me, I learn alot and I’m grateful. My only problem now is how to do I change the background of the wrappe and tags to be different with the body background?

    Once gain thank you.

    +1
  • Muhammad

    Monday, May 30th, 2011 06:27

    103

    excellent tutorial.

    Thanks

    +1
  • piksman

    Tuesday, May 10th, 2011 15:14

    98

    This is a great help for beginners, especially in PHP templating…. hope you can post new tutorials.

    +1
  • Vivek

    Sunday, February 27th, 2011 20:24

    78

    Thanks a lot Kevin! I was really in high need of learning this. Your tutorial is literally awesome! Cheers Mate!

    +1
  • Ruben

    Monday, May 9th, 2011 11:23

    95

    Hey,

    First of all: thank you for this very clear tutorial. I am picking up webdesign after a couple of years and I find this very interesting and helpful.

    I have two remarks however:

    1. A detail, perhaps: the document doesn’t validate as xhtml1.0 strict because of a missing or tag in the sidebar div.
    The links there have the tag as markup but there is no tag so it doesn’t validate. If you ad the tag it valdates perfectly though.

    - More complicated: In this demo there is a lot of (textual) content in the index.php and about.php pages. However, if you cut for instance most of the text in the about page and leave the index as it is, you get a remarkable “jump” from the entire page each time you switch between the inex and about page. It’s like the entire page switches a few pixels to the right and back to the left.

    I will try to demonstrate this by setting up a test server.

    But, again, thanks you for a very helpful tutorial here!

    Ruben

    0
  • Nikesh

    Tuesday, May 10th, 2011 10:06

    96

    Hi ,
    I have Been Having a problem ,I’m not able to Upload the PHP files to my server, I am currently using The Coffeecup HTML editor , Help Me…

    0
    • Rean John Uehara

      Tuesday, May 10th, 2011 12:33

      97

      Hi Nikesh, can you tell us what the error message says?

      0
  • Benx

    Thursday, May 12th, 2011 06:21

    99

    One of the best tutoriales I have read in a long time. Congratulations! It’s so well explained!

    0
  • sanal

    Thursday, May 26th, 2011 11:42

    102

    thanks bro. the session was really helpful. but i am looking for a solution for my problem and it is that i would like to add a login page and a authentication page including sessions in my site. i have to design the site so that it supports video streaming including uploading downloading and broadcasting. anyone pls give me a guidance. thanks for the help..

    0
  • gabriel

    Tuesday, May 17th, 2011 18:48

    101

    Good job bro’ best post ever on web-it works;i learn very much

    0
  • Cherry

    Thursday, June 2nd, 2011 10:52

    107

    Thanks for the tutorial :D Im looking forward on a tutorial on how to design the template with an image or color :)

    0
  • Mohit

    Monday, June 13th, 2011 08:55

    108

    Can you please create another similar tutorial focusing in php sites using different kind of body templates in different pages…

    0
  • Kallu

    Wednesday, June 1st, 2011 20:18

    106

    Excellent… very well written for a novice. Is there any specific editor I use or will notepad do?

    0
  • hajkhan

    Wednesday, June 1st, 2011 18:59

    105

    it is the best tutorial for new developer…….
    thanks

    0
  • anees

    Monday, May 30th, 2011 15:36

    104

    very easy way to create a php website
    THANKX!

    0
  • Radu

    Saturday, May 7th, 2011 10:34

    92

    Hey, a question for you, I hope you can reply.

    I have done exactly as described here, yet my header, footer, nav and sidebar are not being displayed at all. I have tried it with three different browsers, same result. Folder is copied in the localhost folder, of course. Any ideas ??

    0
    • Rean John Uehara

      Sunday, May 8th, 2011 08:03

      94

      Hi, do you have Xampp or Wamp installed? You need one of these to make PHP work on your machine.

      0
  • Felix K

    Saturday, May 7th, 2011 12:40

    93

    I have always been overwhelmed by some kind of tedium whilst going through PHP manuals/tutorials and I have never grasped anything due to the boring way the authors present their know how. This author is different and reading this once made the concept of how PHP works fall neatly into place the first time. It’s been explained ever so well and so simply. Please write a book or let me know if you have one. Thank you for enlightening us.

    0
  • Mgidado

    Monday, March 14th, 2011 10:19

    81

    I really find this tutorial helpful. And I don’t have any word to thank you. I had a course on PHP recently but I find your tutorial far better than the course. My only question is how do I change the bacground of the tag to be different with the body background.

    Once again thank you.

    0
  • SD

    Tuesday, March 15th, 2011 11:46

    83

    Thank you for this extremely clear and precise tut! Working with HTML and CSS for several years, I have always hesitated in diving into PHP. Several peers have noted the simplicity of it, however, your tut is the first to walk through, step by step, start to finish, as well as showing the interoperability between each form.
    Hats off and much thanks! This will save me a ton in aspirin cost ;)

    0
  • Mayukh

    Sunday, March 13th, 2011 08:44

    80

    Very Nice and clean and step by step process…

    I am learning php to build by company website in php basis. hope i will find other tutorial as well…

    0
  • Ramzan

    Saturday, March 12th, 2011 21:18

    79

    My first PhP learnt story. nice

    0
  • Avril

    Saturday, May 12th, 2012 09:39

    288

    After days and days of searching for a basic structure for a .php website, I found this. You’ve made it so simple to understand what goes where!! I’m going to use .php more often to build my websites. A million thanks!!

    0
    • Dainis Graveris

      Saturday, May 12th, 2012 16:50

      289

      Hello Avril, thanks for the kind comment! That’s what we do :)

      0
  • Antonio Martinez

    Saturday, May 12th, 2012 00:22

    286

    Thank you, it was very helpful. However, I have an issue working like this. I have created another folder for example:
    /php_site/admin/dashboard.php

    If I include the line I have to change it to:

    The problem is that the style.css refers to some images and because we have to change the path, they don’t appear. How can I resolve this issue?

    Thank you

    0
    • Rean John Uehara

      Saturday, May 12th, 2012 09:29

      287

      Hi Antonio, I’m not sure if you placed the whole code in there. Can you post it again? In any case, when you change the location of the images you should also update the path on the style.css.

      0
  • Ashutosh

    Friday, May 11th, 2012 00:33

    285

    I’m really thankful to you for Easiest tutorial about designing. I recently started working with PHP. Was confused where to start. your tutorial have gave me boost working with open source. :)

    0
  • biruk

    Sunday, May 6th, 2012 07:57

    284

    i don’t have words to express my filling after reading this tutorial ,the easiest way i found is, just to say thank you very much

    0
  • CJ

    Friday, May 4th, 2012 15:31

    283

    Thank you so much for this tutorial!! This should be the first result for how to create a website with php. I went to several different results and none of them made the steps truly easy to understand.

    Thank you for taking the time to create this page!!

    0
  • Richard

    Thursday, May 3rd, 2012 11:59

    282

    Brilliant! Finally I feel like PHP is my friend.

    0
  • David

    Tuesday, April 24th, 2012 17:59

    281

    Hey Kevin, just wanted to add my thanks for such an informative and easy to read tutorial! It really helped me in my first steps to learning PHP. Keep up the good work :)

    0
  • Adnan Shabbir

    Monday, April 23rd, 2012 07:57

    280

    thanks alot Kevin you are really awesome. great tutorial present in the great way thanks allot once again
    you really rocks
    regards
    Adnan Shabbir

    0
  • Mistry Hardik

    Sunday, April 22nd, 2012 12:31

    279

    Well I am web developer since years but recently started to build php based web apps, this simplified tutorial helped me a lot understanding a basic, easy-to-follow and easy-to-implement structure of a php web-site.

    Thank you for a helpful tutorial.

    Regards,
    Mistry Hardik

    0
  • suresh

    Friday, April 20th, 2012 17:05

    278

    you are really great. the explanation is just awesome…. I was waiting with php installed, for a nice template to work on and you offered one… thanks a lot….. god bless you..

    0
  • jarrod

    Tuesday, April 17th, 2012 21:26

    276

    This tutorial is the BEST! Thank you so much for making this easy to understand and for breaking it down! I have 16 websites and I’m maxing out on databases and files and this tutorial is making it so I can create my sites without a CMS, saving tremendous space. Thank You.. .this site should be #1 in search engines for searches for “how to create a website without a content management system”… (hope that helps with your serp ranking!)

    0
    • Dainis Graveris

      Wednesday, April 18th, 2012 07:05

      277

      Thanks Jarrod, really appreciate your comment! Glad it was helpful and even better that you could find this post even if it’s not #1 in search engines :)

      0
  • stanley

    Friday, April 13th, 2012 20:56

    275

    Thanks a million, this is what i called a tutorial.

    0
  • ali

    Friday, April 13th, 2012 11:37

    274

    nice article, i will apply on my website

    0
  • Ian

    Thursday, April 12th, 2012 17:32

    273

    Brilliant! A must read for beginners.

    0
  • shyam

    Thursday, April 12th, 2012 02:09

    271

    thanks Kevin.. rally helped a loads…
    kudoos… :)

    0
  • vicky

    Wednesday, April 11th, 2012 00:05

    270

    Hi Kevin! I have found the tutorial useful but i have a few issues to do with my website? Its created using PHP, MySQL in Dreamwever. I want my website to shortlist candidates who meet the requirements of the job vacancy they are applying for in my website………do i have to use javascript or can i just make a table from my database?the website is for employers to post jobs and jobseekers to apply and they should be notified if they are shortlisted.I need your help, please Kevin.

    0
  • sanae

    Tuesday, April 10th, 2012 20:17

    269

    thank u 4 this site!!!!!!!!!!!!!!!!!!!!!!!!!!!

    0
  • Nilesh

    Tuesday, April 10th, 2012 16:20

    268

    Can you explain how to include drop down menu, and floating pictures (like if i have 3 picture and i want them to display one by one, rotating in a manner).
    I will be very thankful for same.

    0
    • shyam

      Thursday, April 12th, 2012 02:11

      272

      same here..pls explainn.. thanks in advanc…
      also send me the url if u already explained…

      0
  • Sachin Sharma

    Sunday, April 8th, 2012 01:01

    267

    Excellent and must read for PHP Beginners.

    0
  • Fatih

    Friday, April 6th, 2012 16:30

    265

    Thank you very much, it was definitely educating.

    0
  • ekat

    Tuesday, April 3rd, 2012 00:24

    264

    Other php tutorials I have looked at have left me mostly befuddled.

    Your presentation was so clear and simple that even a half-computer-literate savage like me “gets” it.

    Many Thanks.

    0
  • chhaya

    Monday, April 2nd, 2012 16:06

    263

    thanx a lot for giving this brilliant website creating knowledge……!

    0

Comments are closed.

x

Do You Know How To Freelance And Get More Clients?

E-Book

If not, then it's time to learn how to:

  • Start as web design freelancer for dream lifestyle!
  • Design beautiful designs your clients will love!
  • Get your first clients and get more clients!

You can trust 1stWebDesigner to help you become a better web designer!

- Jacob Cass | Just Creative

Just enter your name and email below and click Get Updates!

unknown - unknown - US