How to Create a PHP Website Template from Scratch

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:

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

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.

Kevin Stanley

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.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Avril says

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

  2. says

    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

    • says

      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.

  3. Ashutosh says

    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. :)

  4. biruk says

    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

  5. says

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

  6. David says

    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 :)

  7. Adnan Shabbir says

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

  8. Mistry Hardik says

    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

  9. suresh says

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

  10. says

    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!)

    • says

      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 :)

  11. vicky says

    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.

  12. Nilesh says

    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.

    • shyam says

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

  13. says

    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.

  14. jan says

    hi very helpful indeed. but how do i proceed if i have changing elements in the header or footer that is for the rest static. for instance, i want to put articles online, so there are links in the header and footer pointing to the next and previous article, and there’s the date that changes at every page. so the q is: how can i create a php site without having to add the full header and footer, while being able to change certain elements at every page?

  15. gabriela says

    hello,
    I followed the steps..and while was the .html website was ok. when i changed the extension to .php the website is only showing the code. Can you please help me?
    thank you

    • leigh says

      Thank you so very much. You made it fun for me to add php to my knowledge of html and css. Hands on I love

  16. joakim says

    i didnt learn anything… it was too complicated! i did the same as you, but if i gonna make a site by myself, i gonna get stuck before i have wrote this was too complicated dude!

  17. Mukesh says

    I am getting lots of error….. Can you plz help me. I am using Wamp. I have copied these files in www folder of wamp. I index.php on localhst. Getting error with include functin.

  18. Munish says

    when i am download the demo zip file its ask username and password ?
    so plz tell me what is it.????

  19. mahesh says

    great tutorial….!!!
    But, can you explain how to use wordpress with this php web site and also how to add plugins and themes to the website…
    Thanks in advance..

  20. Andrew says

    hi there followed the steps and works nice in dreamweaver however how to i make it working on my website??

    guess i have to put the website name somewhere but no idea where. please help

  21. annu says

    Really great tutorial for all PHP beginners.
    I like your way of explanation. its simple to understand for all beginners who don’t know a lot in php.

    keep it up.

    best of luck

  22. Rohit says

    thanks for above imformation it is help ful to me please also tell me how to work with data base…..
    i waiting for you reply…………

  23. Vin says

    Thanks a lot.. very much appreciated… but can i ask?? what if i want to have a database? can i add in that site a database??

  24. John says

    This works for me up to and including Step 10. As soon as I introduce the variables, it stops working. I mean, I can see a heading when the header.php file in the includes folder has ‘1stWebDesigner PHP Template’, but when it has the php echo $heading code I see no heading. (I have set up the variables file and folder as instructed under ‘one step further’ and ‘making it all work’.)

    I notice that the WP themes I have on my site have includes folders but NOT variables folders. Are variables folders necessary?

    • tom says

      Hi John, I just had the same problem (twice). The first time I just hadn’t read further down the tutorial, where it says to ‘Making it all work’ and explains about putting the link to the variables.php file into each of the header and footer pages. The second thing I noticed was in the code – I was typing the code rather than just copy/pasting it, and misread the = to read – (so instead of $heading= I was typing $heading- ). After that mine worked perfectly. Hope that helps.

      Kevin – thanks for the fantastic tutorial!

  25. Angel Ryu says

    hi, I am setting up my first website, and your tutorial is outstanding the best I have seen on any site. Can you please email me and advice me how can I start my web development freelance carrier. I have learnt PHP tutorials but don’t know how to apply it on real world website development. I want to create dynamic websites as well as wordpress plugins and themes templates etcetra. Please advice. Thanks!

  26. lenny says

    Great tutorial! I am having an issue tho. I have everything set up just like the instructional however the header, nav, and sidebar are not showing up in the index.php site.

    Warning: include(includes/header.php): failed to open stream: No such file or directory in – on line 25 Warning: include(): Failed opening ‘includes/header.php’ for inclusion (include_path=’.:’) in – on line 25 Warning: include(includes/nav.php): failed to open stream: No such file or directory in – on line 27 Warning: include(): Failed opening ‘includes/nav.php’ for inclusion (include_path=’.:’)

    That is the error message I’m getting. Can you help me figure out why its doing this? Thank you in advance.

    Lenny

  27. Maruf says

    its really nice. I have a question. Do i make a wordpress template to apply this process

  28. Esteban Gambino says

    Greetings Kevin – thanks for sharing your knowledge with others who are just beginning to delve into creating their first php powered site. This is the most straight forward tutorial that I have viewed as of late. Whenever you have the time, would you mind adding the technique for displaying graphics in the header and footer files. I use Slackware if that makes a difference (the paths would be the only difference) in my humble opinion! Thanks again.

  29. shawn says

    Thanks a bunch, this was very helpful and easy to understand. Very good work, thanks a lot!

  30. says

    indeed good post i tried the same you posted and got the result my web page is in front of me thanks a lot .I am waiting for another good post for advance development in same sequence

  31. Susan says

    I’m just learning about templates & php, so this article came at an advantageous time for me. thank you!

    One question, when entering the info for the footer into the variable.php document, would you type instead:

    $footer=’Copyright © 2010 Website Name';

    Many thanks!

    • Susan says

      What I wanted to say, and the post wouldn’t allow it, was:
      $footer=’Copyright © 2010 Website Name';
      Let’s see if it’ll work this time!

      • Susan says

        Well, that didn’t work either!
        Never mind, then! I’ll just test it out with XAMPP.

  32. Richmond says

    Thanks for great work. For a people like me who are beginners in programming, you have set our feet on solid ground.
    This is a very great tutorial.

  33. DM says

    Excellent!! I have only used php includes in the past. Never used a variable before to alter some changes. Thanks heaps.

    CHEERS :)

  34. Rizwan says

    Great piece of Work !!!
    Bravo…. This tutorial is very comprehensive though very simple to understand.
    Great !!!!!…..
    I don’t have any words to express my emotions for this nice piece of tutorial

  35. SULTAN says

    thanks!
    this is amazing
    please tell me sir that how i can add search bar to my website.
    i try it but it don’t working.

  36. cristina says

    just a recommendation,please add a button for navigation to php files,so that user can know the flow of the code..thanks

  37. cristina says

    a very good tutorial for beginners like me.i love the way you created all codes in index.html then making each part a php file and calling it. you saved my time .great tutorial.will recommend this to my friends.Godbless!

  38. Tina Brooks says

    Until now, I’ve found the whole concept quite daunting. Running our website had been a source of great consternment until I started trying to figure out how to put the pages together. You managed in a few short lessons to concretize what I didn’t understand about the file hierarchies and how they go together.

    Now maybe I can actually create my own site without having to pay someone else to do the design work.

    Thanks!

  39. Samir Qayet, Jordan says

    fantastic, artistic, creative,The best tutorial i ever had in any subject!

    Thank very much

  40. Jorge says

    Your tutorial is very very good. It was useful to me because I’m a self learn designer and sometimes it’s hard.
    I want to ask you if there is a PHP web designer especilly wysiwyg type, because I constructed a web site by my own using the web designer that the webhosting (www.000webhost.com) provide to their users.
    But a recent incident related with a mistake that I did with emails (I do not send mass email) and the suspension period, wake me up and I realized that if I need to move my site to another web site hosting I will need a good PHP web designer to replace the actual. So Do you know o can you recomend a PHP web designer? I will be waiting for your answer. Best regards. (Sorry my english is not good)

  41. Maglads says

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

  42. Huber says

    I’m from Paraguay. Thank you very much! Your tutorial is so useful, one of the best I found on the internet!

  43. Parth says

    Why header and navigation is not shown on the index.php file while we open it in browser?

    It will only on the about.php.

  44. Jacob Storkey says

    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!

  45. Sathish says

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

  46. sam says

    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

  47. Siddharth says

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

  48. Jessica says

    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 :)

  49. Andy says

    Just did a practice using this tutorial. Very straight forward. I am a back-end guy and not so skillful with front-end stuffs. Your article is very helpful. Thanks Kevin. Great job!

  50. Ervin says

    Thanks for sharing this this tutorial. This tutorial is great for newbies that want to start with php website.

  51. Morato says

    Very good,

    In Brazil we say: “Do Caralho” it´s an expression for a very good job.

    Thank you !

  52. Moof says

    Thank you for the tutorial. I could follow it as you laid it out. I’m a newbie, so this is very helpful.
    Also, I’m interested in other features with php like email and comments. With php is there a way to automatically number additional pages that are added to the site as well as having them show up in the nav automatically?

  53. Pankaj says

    Thanks Kevin Sir,
    I am really grateful to you for your fundamental article. Its really helpful. I am just starting to learn to PHP scripting.
    Can you guide me for a complete web site development codes with (ex login, member login,and other inputs) on that page?please

  54. says

    Thank you very much, this article is really helpful for me as i am recently start creating PHP websites.

    Thanks again, this article really helps.

  55. james davidson says

    hi i keep getting this message:
    Notice: Use of undefined constant includes – assumed ‘includes’ in /var/www/vhosts/numyspace.co.uk/web_users/home/~unn_w10019262/public_html/phpExercises/php_site/index.php on line 27

    Notice: Use of undefined constant nav – assumed ‘nav’ in /var/www/vhosts/numyspace.co.uk/web_users/home/~unn_w10019262/public_html/phpExercises/php_site/index.php on line 27

    Warning: Division by zero in /var/www/vhosts/numyspace.co.uk/web_users/home/~unn_w10019262/public_html/phpExercises/php_site/index.php on line 27

    Notice: Use of undefined constant php – assumed ‘php’ in /var/www/vhosts/numyspace.co.uk/web_users/home/~unn_w10019262/public_html/phpExercises/php_site/index.php on line 27

    Warning: include(php) [function.include]: failed to open stream: No such file or directory in /var/www/vhosts/numyspace.co.uk/web_users/home/~unn_w10019262/public_html/phpExercises/php_site/index.php on line 27

    Warning: include() [function.include]: Failed opening ‘php’ for inclusion (include_path=’.:’) in /var/www/vhosts/numyspace.co.uk/web_users/home/~unn_w10019262/public_html/phpExercises/php_site/index.php on line 27

    numyspace is the server im using

  56. Nirmal says

    Name:*

    Email id:*

    Contact Number:*

    Country:*

    Select Country
    India
    England
    Brazil
    England
    Usa

    Company:*

    Designation:

    How Did You Find Us?

    —–
    Advertisememt
    Google
    Friend
    Naukri

    Requirement Description:*

    function validateform()
    {
    var username = document.form1.username.value;
    if(username==null || username==””)
    {
    alert(“Fill Username”);
    document.form1.username.focus();
    return false;
    }
    var regularemail=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
    var email = document.form1.email.value.search(regularemail);
    if(email==-1)
    {
    alert(“enter a valid email”);
    document.form1.email.focus();
    return false;
    }
    var regularcontact=/^\d{10}$/
    var contactno = document.form1.contactno.value.search(regularcontact);
    if(contactno==-1)
    {
    alert(“enter the valid contactno”);
    document.form1.contactno.focus();
    return false;
    }
    if(document.form1.country.selectedIndex==””)
    {
    alert(“select country”);
    document.form1.country.focus();
    return false;
    }

    var company = document.form1.company.value;
    if(company==null || company==””)
    {
    alert(“Fill company”);
    document.form1.company.focus();
    return false;
    }
    var designation = document.form1.designation.value;
    if(designation==null || designation==””)
    {
    alert(“Fill designation”);
    document.form1.designation.focus();
    return false;
    }
    if(document.form1.findus.selectedIndex==””)
    {
    alert(“select the following content”);
    document.form1.findus.focus();
    return false;
    }
    var description = document.form1.description.value;
    if(description==null || description==””)
    {
    alert(“Fill description”);
    document.form1.description.focus();
    return false;
    }
    }

  57. bjbt says

    That link from webinome is complete spam and opens a bunch of windows.

    It will take visitors from your site unless they use their history to come back.

  58. Daranivasan says

    Do you have a simple tutorials like this for javascript and jquery?

    No one can explain a person more better and practically than this :)

    Gr8 work n thnx..!

  59. Khanna says

    Thanks for the tutorial.
    It was very important for me.
    this is best post to learn step by step.

    once again thanks & regards

  60. Thomas says

    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!

  61. Danny says

    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?

  62. Bethel Williams says

    This is Awesome. I learnt a lot. God bless you brother…You have done marvelously well in this tutorial. I will like to connect with you on Facebook so we can do some stuff together.

  63. JOhn says

    Kudos, helped me a ton! I use expression web 4 and had a lot of trouble getting the PHP to work correctly but after a lot of googling and some downloads it works like a charm! thanks again!

  64. mark says

    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.

  65. Haogar5 says

    Well this made me understand some things, but also i don’t get what i did wrong, since i just keep getting just the “content” section when i open the page, no nav no sidebar, no footer, no header, or if they are there at least they are empty, but it also happened with the demo files, so i’m kind of lost

  66. Vincent says

    Its really very nice to read php website development.This is my first attempt to use php and i found this tutorial beneficial for new php developers

  67. Flinn says

    Thankyou very much! i just readed this tut. And it looks very clear and nice!

    Going to start soon and rebuild a html/css website into this version!

    Thnx alot!

  68. Jornes says

    I already know this. But i would like to know is there any solution to make the header text to be auto detect when the title is different?
    Can’t get what i mean, right? Ok! Let’s go here.

    /*—- Example —-*/
    When the time i visit index.php page, the title and the heading is “Welcome to Our website”
    And,
    when the time i visit about.php page, the title and the heading is “About Us”
    /*—- Example ends —-*/

    Something like put some php code between the php code goes here but auto detect the Title text. Kindly ask me again if you can’t get what i mean. Thanks! Hope you could! =)

  69. susheel singh says

    if u have copy pasted the code from here…then u might have the problem

    includes/sidebar.php
    it is in single codes….if u directly copy the symbol present here is not single code…so remove it and manually enter that part…
    and even hifen is some special character here even remove that and put it manually then ur problem is solved….or else ur dreamweaver u can understand where the error is

  70. Samuel G says

    Wow, I’ve implement this tutorial in my local server, all works great. Nice tutorial. Thank you :)

  71. Eka Wibawa says

    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

  72. says

    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?

    • says

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

  73. says

    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

  74. Sara says

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

  75. N.Suresh Kumar says

    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…

    • Dips says

      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…

  76. Jonas says

    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

  77. john says

    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

  78. Del Antonio says

    Any place I could download the source code? All the numbers come across when I copy and paste.

  79. ydkovsky says

    Hello good Sir,
    I was wondering if I could use CMSs like Joomla or WordPress to create a recruitment website with.. say something like this site “SoccerAgent.net”. Also would it be better to just create one from scratch..I’m quite new to php (only know HTML and CSS) and I am trying to make one for a project in one of my subject. This guide of yours is very very helpful for me to start with and it was explained in the way I can easily follow and understand.

    One other thing, which php framework and IDE out there you recommend for starters like myself?

  80. Rupesh says

    hello sir,
    i have interest in php web designing, i have no idea about php installation, so please guide me how to install php or other supporting softwares for run the php files

  81. Shahid says

    Wow…that was a wonderful explanation.
    Could you make a tutorial for visit counter and database driven sites?
    I have a page where i have put 5 files for downloading. I want to know what file has been viewed/downloaded
    how many times? How is it possible?
    Thanks in advance.

  82. Sarita says

    Dear Sir,
    This is sarita from India, ur article is really helpful for me as its the same article for which i was looking for. I knw nw how PHP website works . bt now I want to knw that How can i apply any css templet in php website as I’m working on a project on “free classified ads” and I’m going to use a free css template downloaded from the internet. I’m a student and learning PHP from last 3 months and I have project on creating website so I really need help or guidance to how i can work on my project. ur article is working bt further I need more help . kindly post an article abt how to apply templets and how to configure in website different tools like SMS tool, Blog, Forum and different Social networking plugins in my website. post any code from which i can get. Hoping for positive reply. Take care.

  83. MD MUNNA says

    Thank you for such a clear-cut explanation. It is very helpful for a fresher to learn how PHP actually works.

  84. Tiffany says

    This was very, VERY helpful. Dead simple, but I’ve always wondered how it worked together. Thanks for your detailed information.

  85. rksahu says

    very good training . thanks a lot. so kind of you , if you post an article on “div” tag.

  86. g.kavaskar says

    I really love this tutorial. i never see such a tutorial thank u thank u thank u thanks a lot………………..

  87. edsel says

    tnx for this site…but theres a problem when i copying the code…the numbers in the side will copy to………its a more process work..

  88. Manish Kumar says

    and sir one more question is ” can I include a php file to a index.html file” please reply sir….

  89. Manish Kumar says

    Dear Sir,
    I have Uploaded this example template to my homepage and its working, when i upload it to another folder …/M/About_Us/ then its not opening included files only text of index.php is showing and error is:
    Warning: include(/includes/header.php) [function.include]: failed to open stream: No such file or directory in /home/mysitecom/public_html/M/About_Us/index.php on line 25

    Warning: include() [function.include]: Failed opening ‘/includes/header.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/mysitecom/public_html/M/About_Us/index.php on line 25
    plz help me sir

    • says

      The header.php, footer.php, sidebar.php should be in the same directory as well. For example, if all files are originally saved at /root/yourfiles/ then you should transfer all those files to /root/newdirectory/ and change the code from <?php include('/root/yourfiles/includes/header.php’); ?> to <?php include('/root/newdirectory/includes/header.php’); ?>

      • Manish Kumar says

        Dear Sir,
        My Includes files are in this directory http://www.example.com/includes/
        And variables in this directory http://www.example.com/variables/
        When I upload index.php to /public_html directory its working all right, but
        When I upload the same index.php file to this directory http://www.example.com/Admin/About_Us/
        then it’s not working and showing this error for all includes and first time it was showing something like this “server is disable to parse or include the file” and now it is this –
        Warning: include(includes/header.php) [function.include]: failed to open stream: No such file or directory in /home/examplecom/public_html/Admin/About_Us/index.php on line 25

        Warning: include(includes/header.php) [function.include]: failed to open stream: No such file or directory in /home/examplecom/public_html/Admin/About_Us/index.php on line 25

        Warning: include() [function.include]: Failed opening ‘includes/header.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/examplecom/public_html/Admin/About_Us/index.php on line 25
        Please help me sir……..

        • says

          There are two ways to solve this.
          1. All of the files need to be placed where the index.php is.
          OR
          2. Open up your index.php file and look for line 25 or line 24, there should be a directory written there, change it to: /home/includes or wherever your includes and variables are located.

          This should solve the problem.

  90. renu says

    Hi,

    I’m a web developer. This code helps me a lot.

    Great Work Done!!!!!

    Thanks,

  91. says

    I really liked the php lesson, really easy to get an idea of how it works. It was alot easier than the perl lessons I did on another site.

  92. Glen says

    If you wanna see the page you have to install XAMPP. Inside XAMPP there’s a folder named htdocs. Put your site folder here. Start XAMPP and start Apache server then type in your browser http://localhost/site-name . Then you’ll see the page. PHP needs server to show.

  93. Rehman says

    Sorry. the code is not getting displayed.
    can u please help me how to make php work.
    it is only displaying the html pages but not php

  94. Rehman says

    I made a website following your same instruction but when i hosted it it saying “OOPs there appear to be a broken link. can u suggest me what to do ?
    thanx

    • says

      I’m assuming you have your website’s files in your local drive. You need to set up your localhost for the PHP to work. Go to apache friends and download XAMPP then after installing place your files under htdocs of your Xampp installation folder. Things should work fine then.

      • Rehman says

        Thanx for the reply. it is working now but….. the include function is not working

        this is how i gave the code:

        the browser is displaying all the contents i gave in the index.php file , but it is not displaying anything on navigation area and wherever i gave include function
        kindly help me
        thanx

  95. Putra says

    Hai…. its a good tutorials. Very useful for me….
    I’ll be waiting for next advance tutorials…….

  96. Rick says

    Maybe I missed it but all of your code contains numbers which make it very difficult to “copy and paste” your code into the site I want to build from this tutorial.

    • Putra says

      Hai…. its a good tutorials. Very useful for me….
      I’ll be waiting for next advance tutorials…….

  97. Sonia says

    good but it can be much better than it for new user who have no knowledge of about to create a website.

  98. says

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

  99. Cherry says

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

  100. Kallu says

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

  101. sanal says

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

  102. Sreenivas says

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

  103. Benx says

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

  104. piksman says

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

  105. Nikesh says

    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…

  106. Ruben says

    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

  107. Felix K says

    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.

  108. Radu says

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

  109. says

    This is really a tutorial that i searching for… Thanks dude…….thanks again … helpful for beginers..

  110. says

    Some guy commented about this being html ripped apart and mentioned a better way that would entail adding some code. I didn’t find a reply to this. Do you or anyone else out there agree with him?

  111. lrasan says

    This is so far the best php tutorial I have seen. It’s very well made, easy understand for a beginner, being a student learning php this was very helpful to understand the very basic scope of creating php files. Saved me a lot of time on referencing books. Thank you very much! I created my first project website at college just fine thanks to this fabulous tutorial! keep up the good work.. God bless!!!

  112. Tom M says

    Could you do another tutorial showing how to create log ins and show links that change depending on whether a user is logged in (if you know what i mean)

  113. Dominik S. says

    Hey Kevin!

    Thats a very nice Tutorial! But i have trouble with “including” the pages. He is didn t do that!
    Coould you help me please? Contact me to my Email please:)

    greetz

    Dommi

  114. Mark says

    Very useful tutorial for us with very basic knowledge of php, but with excellent knowledge of html and css. I’ve been trying to learn php and its going well, but if i had read this a few weeks ago, my fundamental understanding of php and how it works in relation to html and css would have gone alot smoother.

    The step between front and back end programming is hard to breach but this is a very good step! please continue on this tutorial! (eg.. what in your opinion would be the next step to take in understanding the dynamics of php.

    I am currently trying to collate a good collection of tutorials that focus on breaching this gap, that i will feature on my site in a few months.

  115. Sage says

    Awesome tutorial > I’ll be using this and modifying it (hopefully with tabbed navigation at the top) for my website to go around my blog.

    You are missing the single quotes on the nav.php file include in index.php btw..

  116. SD says

    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 ;)

  117. Mgidado says

    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.

  118. Mgidado says

    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.

  119. Mayukh says

    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…

  120. Vivek says

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

  121. matt squire says

    HI thre

    This looks like a superb tutorial and totally what I am looking for, but when I copy your code it is also copying the line numbers, how do I copy the code without the line numbers

    Sorry probably really stupid question but I am a bit of a novice

    Thanks

  122. Costas says

    I am a 73 years old senior, I went through your tutorial and understood every thing. It is an amazing step by step tutorial, thank you so much. I will spent the next few years learning php.
    My first problem to solve is how can I add a header picture as background in a page similar to your tutorial. If there is an easy solution, you will save me days of searching. I will definitely put a link to your website in more than one place.
    All the best to you
    Costas

  123. Benjamin says

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

  124. Fernando says

    Wow, this has been the most useful tutorial i have ever read!, i have been struggling designing each webpage purely on HTML/CSS (Completely new to web design and web coding :P) , now i can easily store static data on php variables and just make the call function wherever i need it! THIS IS FREAKING AWESOME! :D

    THanks a lot!

  125. Dee says

    Very helpful. For the first time, after staring at Php for awhile, I now understand how it all connects. Thank you!

  126. Barbara Alonge says

    In reference to the above questions, we were not shown how to make pages from the navigational links, so I was not sure what to include on them. But they are just showing in the middle and the title is hidden in that area so the index.php title, description and keywords is on every page. I need separate titles for every page, or at least that is what all the SEO articles are saying. It says not to have the same title for every page. Any suggestions? Your instructions are so knowledgable that I thought maybe you could help. I haven’t been able to find an answer to this anywhere. Thanks

  127. Barbara Alonge says

    Your information is very similar to a mini-course I took on PHP quite a while ago. I made a website using it but found that the title from my index.php page is the title used for all pages when a site map was created. How do you make titles show up from your linked pages from the navigation page? I did one of those online sitemap generators and all 36 pages had the same title as my index page. Also where do you put your description and keywords? This is kind of new for me.

  128. Kjliu says

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

  129. Mandy says

    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.

  130. Justin says

    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!

  131. Nasara says

    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!

  132. says

    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

  133. Capsi says

    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

  134. Swapnil Gondkar says

    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….

  135. Mark says

    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 :)

    • mark says

      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 :)

  136. Kevin Stanley says

    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.

  137. Korena says

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

    • Kevin Stanley says

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

  138. Aram Kurdi says

    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.

  139. Mac Goel says

    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.

  140. Daniel says

    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?

    • Kevin Stanley says

      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.

  141. Andre says

    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.

  142. Rashmi R says

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

  143. says

    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

  144. R.Chandrasekaran says

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

    Thanks!
    Chandru.

  145. sara says

    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!

  146. Russ says

    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.

  147. Philip says

    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

  148. Kris J says

    Hey Kevin, good tut for people wanting to step into creating a basic template. There is just two things I would change on your tut to make the template more workable and useable as a WordPress Template:

    1.) Instead of html navigation, use the wp_list_pages() function wraped in a unorderd-list (ul) with a css list style of none specified for the nav.

    2.) Use the wp_list_categories() for you sidebar instead of html links wraped in a unorderd-list (ul) too.

    It would make more sense to include those functions to ease to time spent manipulating your code when you add pages or cats to your site.
    Just a thought…….

  149. Chris says

    What great tutorial! Clear, concise and informative. Many thanks. I would just ignore some of the pendatic comments made earlier , I’m a beginner and found the tutorial very useful.

  150. Kieran says

    Hi Kevin,

    Great tutorial. I was really please to find it. I was wondering though if I wanted to define the content in the header file (Ive set it up differently to yours using tables) how would I go about doing that? Please email me or contact me.

    Many thanks, Kieran

    • Kevin says

      Easy, If I am understanding your question correctly you will simply create the content you want and place it in it’s own .php file. Then using the methods explained above you can include it into the template. This will be the same for modifying most anything to the template and using basic .php includes. Is that what you were asking?

  151. Santhos Drenthe says

    This is very well explained! Some explanation on storing the data in a mysql database would be an idea for the next step I guess. For now this is a great starting tutorial for beginners, well done! Keep it up!

  152. agungX2 says

    nice post dude,.. let me turn it into pdf and write else another tuts,. like this in my classroom soon,. btw thnks

  153. Emmei says

    Thank you very much for this- there aren’t enough easy-to-understand tutorials for beginners out there, especially regarding PHP and WordPress.

    …If there are, they’re awfully hard to find. (Mind, I feel that anything that doesn’t turn up in a Google search is hard to find.)

    I am looking forward to your next tutorial!

    Thanks,

  154. says

    Kevin,
    I figured out my mistake. When I made the index.php I also kept the index.html file in the directory. Once i got rid of that everything was fine.

    I am looking forward to the nextone on databases.

    This tutorial was simple enough to be a good first step.
    Thanks

    Steve

  155. says

    Kevin,
    Everything is fine, works great. When I changed the index.html to php.html I kept both files in the directory , so the broswer was opening the index.html and not the php.html.

    Once I got rid of the index.html everything works as its supposed to.
    Thanks. I look forward to working with databases.
    Steve

  156. Saviour Six says

    Thanks, this helped me understand php a little better, at least from an html guys standpoint.

  157. carlnunes says

    Ah man as soon as I saw it was on a Windows machine; I stopped reading.

    JK!

    I love making templates in PHP! I did one where a client wanted to show case vendors, in an iFrame, from within their site.

    To deal with multiple sized iFrames; I used includes like $iframeheight = 600 and $iframewidth = 800; before including the seperate iframe.php file.

    Saved me a lot of extra coding per page. I don’t recommend anyone do a site like this; as it’s not going to help your SEO; like the client thought. Sometimes you have to give them what they want.

    After this weeks WordPress hacks I hope to never see another iFrame again!

  158. says

    Kevin, I need some help.
    I am stilll earning this stuff
    I am on a mac, I have MAMP with php and mysql installed on my hard drive.
    I also have a wordpress blog on my server.

    I am up to step 10, with index.php.
    Everything is the same as you show.

    When I use my browser to go here
    http://localhost:8888/php_site/
    all I get is the content stuff, i.e.
    heading1
    heading 2
    etc and the latin
    Your example file , same thing

    so I upload the directory onto my server where
    http://naegeledesign.com/php_site/
    (NOTE: my wordpress blog works fine (

    same thing:
    heading1
    heading 2
    etc and the latin

    Now up to this point i have used text wrangler .
    So when I open the php.index file on my hard drive in dream weaver
    and look at in design mode I see the navigation, side bar and the footer.
    Why is it not working correctly in the browser?

    Thanks
    Steve

    • Kevin says

      Steve: Did you create the nav.php file? And is it included in your index.php ?

  159. says

    This is not a php template. This is ripping HTML apart. A good php template does not. With a little cache technique you can easily use 1 html template file and fill it with relevant code/data. Far better and more efficient.

  160. says

    Excellent tutorial. Your tutes on this site are always very comprehensive – I love it.

    Sometimes people rule out using just basic PHP, HTML, and CSS and instead go too complicated, installing WordPress with a bunch of plugins. Don’t get me wrong, WordPress is great. But for sheer speed and best load times coding it raw can’t be beat.

  161. Jason Bartholme says

    Nice and clean example. I agree that using this tutorial and making a follow-up with MySQL integration would be beneficial to newbies. Perhaps a third tutorial would be a simplified admin section to change the content.

  162. says

    These are good instructions for all beginners. I like that everything is described in detail. Everybody simply can comprehend it.

    Greetings from Germany.

    • Kevin says

      Very glad you liked the article! And happy I could provide you the information to learn from.

  163. Susan says

    This is great! Especially for PHP beginners like me.
    It´s very educative helping to understand how it all connects.
    Thank you!

  164. says

    lol, did you just deleted my comment because I said a demo link would have been nice and the structure of the headings could have been better? :D now that’s just silly…

    @Consa, yes it is, as long as your register_globals are turned off which they should be anyway

    • says

      Demo links is provided at beginning, Hannes! I don’t know maybe your comment fell somehow in spam filter, not sure.

      Yes, after redesign we will change heading structure to be much more observable, working on that..

      • says

        well, I meant a link to a working demo sorry for being unclear on that :) I just imagine the target audience for that article not to be the kind that can set up page so fast just to check how something “look&feels” like.

        Anyhow, I don’t see that as a reason to delete a comment – if some one misses an Information that was given in the article it would seem to make sense to direct that person to that Information – like you did now – but I guess that’s just my personal Opinion :)

        Anyhow its a pretty nice article, and if you continue it I guess it would make sense to talk about template engines and/or MVC Patterns.

        • Saad Bassi says

          The basic point of this tutorial is to teach how template engines of different CMS work. There is nothing in this article regarding design. Learn the techniques and then apply them in your projects. That’s what tutorials are for.:)

    • Armando says

      When someone gives ya a hand. Ya shouldn’t try to rip out their arm. Just saying, be thankful for the free info without such negativity.

  165. Bob Tako says

    With this template and variables, are all pages going to have the same heading text? That makes no sense. Good article nonetheless. Thanks.

    • Kevin says

      Yes, but it is just as an example. That variable can be changed to anything. The main point was just to show how it is done. That could be used as a tagline or something that may change from time to time that someone may want to change once, instead of 20 times on 20 different pages. It is all just an example.

  166. says

    I think you could have done better when it comes to the heading – also why not provide a demo link, I was kinda shocked that there isn’t one. Non the less, nice post :)

  167. says

    Good tutorial for beginners. Next step would be to work with databases. Go on and write a tut about that! :)

  168. says

    it might be a good idea to write an extension to this tutorial using a template system like smarty…

  169. says

    Nice tutorial!
    I’m new to PHP and I need something like this when designing and slicing into HTML pages.

    Does this kind of PHP template is secure from hacks?

    Thanks