How to Create a PHP Website Template from Scratch

Posted in , , , • 1135 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
  • mark

    Monday, October 3rd, 2011 21:54

    176

    Love this post, took me a while to realise I had to change the index file html to php, to get it working on my localserver. But I learned a lot about CSS and php. Never coded my own CSS before, but managed to tweak it to suit my needs! Had at least one lightbulb moment!

    Thanks for posting it.

    0
  • thilie

    Saturday, September 3rd, 2011 06:16

    164

    it is very good….. thanks very musch… i lern some thing from this..

    0
  • Ashish Kumar

    Friday, August 26th, 2011 08:39

    153

    thanks for such a great tutorial…

    0
  • Dips

    Monday, August 22nd, 2011 18:16

    150

    thank u …. i am fresher in design, your site help me lot to design web site…..

    0
    • Dips

      Monday, August 22nd, 2011 18:22

      151

      my husband also a good web designer he also works in one of Government IT company in India He also refers yours site.Thank u for solving ours problems and supporting and help…

      0
  • john

    Saturday, August 20th, 2011 20:28

    148

    I am looking to have my site converted to php with cms so i can edit it easily by myself. I think your tutorial was great but I don`t have the expertise time to build the whole site. email me if you can help

    0
  • Jonas

    Sunday, August 21st, 2011 12:38

    149

    First things first, great tutorial since i’m very new to php. i just have a few blank spots i hope you can help out with.

    i’m just curious about the placement of the sidebar and other objects, i can’t seem to find any values that indicate the placement of the side bar, for example if i want to move it to the left side how is this done. Thanks in advance

    0
    • Jordan

      Thursday, August 25th, 2011 20:20

      152

      The placement of the different sections is taken care of in style.css. If you look at #sidebar in style.css, you’ll notice a line: float: right;
      For items on the left, float: left;

      My first source for learning css styling was:
      http://www.w3schools.com/css/default.asp

      0
  • N.Suresh Kumar

    Saturday, August 27th, 2011 11:59

    154

    Hi good tutorials i have found,
    it helped me a lot, to get an idea of creating website using php…This is my first attempt to do it so…
    thanks, keep it up…

    0
  • sjhart

    Saturday, August 27th, 2011 14:28

    155

    Thanks for the breakdown. It really helped me to better wrap my brain around it.

    0
  • Eka Wibawa

    Tuesday, August 30th, 2011 03:13

    161

    This is very usefull for me, thanks Kevin… keep up to share :)

    0
  • Eka Wibawa

    Tuesday, August 30th, 2011 04:05

    162

    What about if I want to put the content into a file (let we called it intro.html and about.html). How to call them from index.php?

    Thanks

    0
    • Rean John Uehara

      Tuesday, August 30th, 2011 10:19

      163

      If I’m not mistaken, it would be

      < ? php include ( ” yourfile.html ” ) ;

      0
  • Sara

    Saturday, August 27th, 2011 15:05

    156

    I have not interest in making website but after this tutorial it created interest in me to develop a website.

    0
  • Oleg

    Monday, August 29th, 2011 08:48

    157

    This is simply super just what I needed. I have got a website with lots of pages and with a multiple drop-down menu, which is tones of links to be edited on lots of pages,
    I thank God Almighty you put is tutorial up and thank you for sharing it with everybody, Oleg

    0
  • Oleg

    Monday, August 29th, 2011 12:10

    158

    I have got a question with the “Step Five” where it says:

    “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”

    The problem is I could not create the same php file with notepad as shown in the picture. The same icon does not show up. a blank page shows instead. Do I have to download anything and install?

    0
    • Rean John Uehara

      Monday, August 29th, 2011 12:23

      159

      Hi, first you need to properly setup your local machine to support PHP files. Google and download and install XAMPP. Then place your files under Xampp’s htdocs folder. For the php file, it doesn’t really need to be the same icon as long as it’s a “.php” file. Under Notepad, Save it as “Filename.php” and be sure to select the filetype as “All file types” or you can simply download a new editor: Notepad++

      0
      • Oleg

        Tuesday, August 30th, 2011 06:27

        160

        Thanks mate, I will try it.

        0
  • Danny

    Saturday, October 15th, 2011 01:38

    181

    Thanks for the tutorial.It was very informative.
    Have one question,what is the best way to design a template or theme for php driven website.Is it best to use a cms like wordpress,drupal etc whats the best way to go about it?

    0
  • Thomas

    Saturday, October 15th, 2011 20:28

    182

    Thank you so much! This is an awesome right-to-the-point guide.
    I was struggeling to find a solution to my problem (loading time…), and now I have!
    Didn’t know PHP was so ease of use.

    Again: THANK YOU VERY MUCH!

    0
  • Sathish

    Tuesday, December 20th, 2011 13:54

    207

    Really I Thank To PHP Tutorial of This Web Site.Because Very Useful and Easy to Understand The Step by Step Process

    0
  • Jacob Storkey

    Tuesday, December 20th, 2011 15:09

    208

    Thank you so much for making review submission a little less painful along the way… These look great, will definitely take a look at some of those tutorials. Thanks for sharing these!

    0
  • Siddharth

    Friday, December 16th, 2011 14:00

    206

    Awesome Tutorial. PHP is something I was still missing, thanks to you I’ll learn it soon.

    0
  • sam

    Friday, December 16th, 2011 18:51

    205

    hey, i have almost done every thing and thank you, you have explained it a lot.
    i got a problem at the time i finish..
    initially when created the index.html file , i chckd that in the browser, it was displayin everything like a page should.
    once we put that in the seperate files.. the hading is vanished and page comes like a simple text page. NO links are defined. I hope you would assist me with this also..
    thank you

    0
  • Jessica

    Tuesday, December 13th, 2011 06:03

    202

    This was great! I’ve wanted to learn php for a long time now… just been doing the html&css thing. I bought a ‘learn php’ book, but the examples are all so simple (read: hello world!) or far to complex for me. This one was perfect because it was something I could easily implement on an existing site I am working on that is starting to be tedious to update (over 10 pages, not so fun to change menu items).

    Thanks again! Bookmarking this for future reference :)

    0
  • Christopher

    Wednesday, December 14th, 2011 13:52

    203

    Damn, who new PHP could be so simple and straightforward? Thanks bro.

    0
  • richard

    Thursday, December 15th, 2011 16:53

    204

    very detailed and explained.

    thx bro.

    0
  • Aroop

    Thursday, December 22nd, 2011 06:08

    209

    Thank you for this wonderful tutorial. i liked it very much.

    0
  • Jony

    Thursday, December 22nd, 2011 07:50

    210

    thanks. The best i have found searching over internet

    0
  • Maglads

    Monday, January 9th, 2012 15:13

    216

    The tutorial is wauh!
    It has helped me reshape my development skills,thanks a lot.

    0
  • Upender Singh

    Tuesday, December 7th, 2010 21:34

    64

    thank you!

    0
  • Demmo

    Friday, December 3rd, 2010 19:20

    63

    Excellent tutorial , finally I understood how to link php to html

    Thank you

    0
  • Brett Widmann

    Friday, December 3rd, 2010 03:40

    62

    This is a really helpful tutorial! Thanks for sharing.

    0
  • Kjliu

    Monday, November 29th, 2010 05:05

    61

    Thanks a lot for this great tutorial. This really helped me in grasping how to create a web page in php.

    0
  • Mandy

    Friday, November 12th, 2010 04:27

    60

    I was working on a site and my internet connection went out just as I was saving a page so the bottom of the page got deleted. How, I don’t know but of course this was my first time working on php. My quesiton is how does a header.php, end. What are the normal components to end the file. The pages look fine it is just that the header is causing the pages to look off. Thanks so much.

    0
  • Sonia

    Saturday, October 30th, 2010 07:01

    59

    Great tips,thanks a lot,I was searching that,they are very informative

    0
  • Justin

    Friday, October 22nd, 2010 15:20

    58

    Kevin this was an incredible article. My site was so convoluted and I could not figure out how to separate my design from my content. Thank you SO much!

    0
  • Nasara

    Monday, October 18th, 2010 07:18

    57

    Hi,
    this is just what I was looking for…how to connect bits of code (header, footer, navigation…) together, and not having to copy-paste them each time (and correct it in every single file!). Actually I knew about the include ‘technique’, my problem was where the bits appear – with this tutorial i found that out…in css actually.
    I’m also learning to do web pages on my own and information like this, for me, is priceless.
    Great tutorial! I think I can finally do something useful. Thanks a lot!

    0
  • Mwasamani

    Wednesday, October 13th, 2010 14:32

    56

    Great Tutorial, actually very recently I came to like WordPress very much to an extent that it gives me good view to change my CS3 experience in creating website to WordPress.
    Concerning PHP, This is my new playground as my websites need to interact, I also need to store data in database as the web grows.
    Thank you friend.
    Bye

    0
  • Capsi

    Friday, October 8th, 2010 06:46

    55

    Hey Kevin

    I am a newbie for PHP. Your tut really helped me to make my first step. Thanks.
    But I am having a problem with pictures. I did exactly what you have mentioned. I added a logo and a another small pic (a gif and a png) on my nav.php. Actually I want the logo to have a link to home page. I see all navigation btns on my home page php, but it seems, links to those two images are broken. How could it happen? I can’t see images. please advice

    Thank you in advance
    Capsi

    0
  • Swapnil Gondkar

    Thursday, October 7th, 2010 10:05

    54

    great tutorial on how to manage a website from scratch….
    begginers have a all at once place for templates…
    But for every folder we create we have to copy the include folder I think that can be made efficient by some way….?
    i tried using constants for directories but when i called resources it gave 404…
    please suggest a generic more methodology
    like we create one template create n number of directories and should be successfully able to import that….

    0
  • Mark

    Tuesday, October 5th, 2010 18:00

    52

    Superb Tutorial man. it has really helped me to get a grasp on what php is all about. Thank you very much.
    However, i wonder if there is a small error in this section;

    variables.php

    1

    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=

    should;
    $footer=’Copyright © 2010 1stWebDesigner PHP Template’;

    actually read ;
    $footer=’Copyright © 2010 Website Name‘;

    i’m not sure coz i’m a total noob but as the code is written, the comment afterwards about regular quotes after a href= makes no sense to me. not trying to criticise in any way, just looking for clarification :)

    0
    • mark

      Tuesday, October 5th, 2010 18:08

      53

      oops! this comment box has made a link out of ‘website name’ instead of allowing the link code to be written! hope this doesnt confuse things too much Kevin :)

      0
  • Kevin Stanley

    Saturday, October 2nd, 2010 04:30

    51

    Thanks Ram! I do have plenty of those other functions I have created already. I kept this tutorial straight forward and aimed at the basic PHP, but I have done much of the login, registration, and so on… Let me know if you want some help with any of it! I would be more than glad to help you with it.

    0
  • Korena

    Tuesday, September 28th, 2010 21:25

    48

    A really good tutorial. You wouldn’t happen to have any ideas on how I can code a blog for my website would you?

    0
    • Kevin Stanley

      Saturday, October 2nd, 2010 04:27

      49

      Sure I would. Let me know if you want some help with it, I would be more than glad to help you.

      0
  • Aram Kurdi

    Sunday, September 19th, 2010 12:00

    47

    very good tutorial very useful. thank you for doing this please continue publshing these kind of tutorials the way you presented is very simple and easy to understand i hope to see more of this from you .

    your time and effort is appreciated very much i wish you a success.

    0
  • Mac Goel

    Saturday, September 18th, 2010 14:23

    46

    It’s Really Very Good Tutorial For Beginners and will be useful to learn Basic Concept Behind PHP.Thanks For give us Such a benefitial Knowledge about Html, Css and PHP.

    0
  • Daniel

    Sunday, September 12th, 2010 23:22

    45

    I have an existing php website that is almost completed question is. How do I add a blank php page with no function to it and keeping the same layout structure?

    0
    • Kevin Stanley

      Saturday, October 2nd, 2010 04:28

      50

      Just include your same stylesheet (Your .CSS file) which controls the layout of your site. Linking it in your head section of your blank page will ensure it looks the same as the rest of your site. What else you add as far as functions is up to you for each page.

      0
  • Andre

    Sunday, September 12th, 2010 21:58

    44

    This is an excellent tutorial which takes all the fear out of php and makes the techniques of CMS like wordpress far more obvious. Thanks.

    0
  • Rashmi R

    Tuesday, August 24th, 2010 10:13

    43

    Thanks a ton Kevin!
    Very useful tutorial in simple way. Hope to get more such tips.

    0
  • Ernie Hodge

    Sunday, August 15th, 2010 14:26

    42

    Kevin,

    I just found your tutorial and it saved me some headaches. I had been trying to find what I had done wrong on one of my sites and your tutorial helped me get it right.

    I did notice one typo that popped up when I loaded your test index.php page.

    In step eight in the code: the single quotes are missing around includes/nav.php.

    I just thought I would let you know so you can add them in.

    Thanks for the great tutorial,

    Ernie Hodge

    0
  • azha

    Wednesday, August 11th, 2010 06:17

    41

    It was good and learned something,thank u

    0
  • R.Chandrasekaran

    Tuesday, August 3rd, 2010 08:16

    40

    Hi, Lot of thanks! This tutorial is very useful for me. Could you please give an another tutorial using mysql database?

    Thanks!
    Chandru.

    0
  • sara

    Friday, July 30th, 2010 11:47

    39

    Thank you very much for this tutorial. I think it is very helpful, especially for begginers. I would like sth like this, but by using a database as a source.

    I think you have very good explanation skills ;)

    Thank you!

    0
  • Russ

    Thursday, July 15th, 2010 21:33

    38

    Great Tutorial. The only thing missing is to use the variables, is to include the variables.php file. That gave me an issue for a few minutes. Wonderful again, though. Thank you.

    0
  • Philip

    Monday, July 12th, 2010 15:38

    37

    Thank You! Thank You! Thank You!

    I Googled this topic and spent a lot of time going through the search results.
    I mean, I spent a Lot of time going through the search results.
    I am so glad I found you TUT. It is very Newbie Friendly. Others T found were to long, to short. or just plain difficult, like Goldilocks said; “This one is just right”.

    Thank you again!

    Phil

    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 - US