Total Followers 132,503
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.
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
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:
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>
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;
}
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
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 © 2010 <a href="http://www.1stwebdesigner.com">1stWebDesigner.com PHP Template</a></p> </div> <!-- end #footer --> </div> <!-- End #wrapper --> </body> </html>
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
<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 © 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->
</div> <!-- End #wrapper -->
</body>
</html>
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 © 2010 <a href="#">Website Name</a></p>
</div> <!-- end #footer -->
</div> <!-- End #wrapper -->
</body>
</html>
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:
<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 © 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>
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:
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.
<?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.
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 © 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:
<?php $heading='1stWebDesigner PHP Template'; $footer='Copyright © 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.
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.
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:
<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.
<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.
Get The Only Freelancer crash course you will ever need to read!
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.
Monday, October 17th, 2011 13:28
Really very nice tutorial.I love this web site.
Sunday, October 16th, 2011 17:56
Such a great tutorial!! Thanks so much. Everything worked like a charm :)
Saturday, October 15th, 2011 20:28
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!
Saturday, October 15th, 2011 01:38
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?
Thursday, October 13th, 2011 16:24
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.
Friday, October 7th, 2011 10:32
great tutorial bro….please include more post like this….thank you
Thursday, October 6th, 2011 12:26
it didnt worked for me.. as i started to slice the code, it messes up the output..
Wednesday, October 5th, 2011 05:16
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!
Monday, October 3rd, 2011 21:54
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.
Monday, October 3rd, 2011 01:53
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
Sunday, October 2nd, 2011 13:26
wonderful tutorial for beginners…
Friday, September 30th, 2011 20:27
thanks for the help…
but i need to know more on this
Monday, September 26th, 2011 20:37
Thank you very much for this nice and simple tutorial ..
Sunday, September 25th, 2011 18:40
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
Thursday, September 22nd, 2011 11:52
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!
Wednesday, September 14th, 2011 11:35
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! =)
Wednesday, September 14th, 2011 10:37
thank u
Wednesday, September 14th, 2011 07:07
valuable tutorial !!! Great Work
Tuesday, September 6th, 2011 21:29
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
Saturday, September 3rd, 2011 19:32
Wow, I’ve implement this tutorial in my local server, all works great. Nice tutorial. Thank you :)
Saturday, September 3rd, 2011 06:16
it is very good….. thanks very musch… i lern some thing from this..
Tuesday, August 30th, 2011 04:05
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
Tuesday, August 30th, 2011 10:19
If I’m not mistaken, it would be
< ? php include ( ” yourfile.html ” ) ;
Tuesday, August 30th, 2011 03:13
This is very usefull for me, thanks Kevin… keep up to share :)
Monday, August 29th, 2011 12:10
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?
Monday, August 29th, 2011 12:23
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++
Monday, August 29th, 2011 08:48
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
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
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!
Barbara Alonge
Wednesday, January 12th, 2011 11:55
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
Dee
Tuesday, January 18th, 2011 18:03
Very helpful. For the first time, after staring at Php for awhile, I now understand how it all connects. Thank you!
Galina
Friday, January 28th, 2011 13:17
Thanks a lot for you clear and effective tutorial! :)
Mwasamani
Wednesday, October 13th, 2010 14:32
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
Capsi
Friday, October 8th, 2010 06:46
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
Rashmi R
Tuesday, August 24th, 2010 10:13
Thanks a ton Kevin!
Very useful tutorial in simple way. Hope to get more such tips.
Andre
Sunday, September 12th, 2010 21:58
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.
Ernie Hodge
Sunday, August 15th, 2010 14:26
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
azha
Wednesday, August 11th, 2010 06:17
It was good and learned something,thank u
Russ
Thursday, July 15th, 2010 21:33
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.
sara
Friday, July 30th, 2010 11:47
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!
R.Chandrasekaran
Tuesday, August 3rd, 2010 08:16
Hi, Lot of thanks! This tutorial is very useful for me. Could you please give an another tutorial using mysql database?
Thanks!
Chandru.
Daniel
Sunday, September 12th, 2010 23:22
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
Saturday, October 2nd, 2010 04:28
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.
Mac Goel
Saturday, September 18th, 2010 14:23
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.
Mark
Tuesday, October 5th, 2010 18:00
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
Tuesday, October 5th, 2010 18:08
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 :)
Swapnil Gondkar
Thursday, October 7th, 2010 10:05
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….
Kevin Stanley
Saturday, October 2nd, 2010 04:30
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.
Aram Kurdi
Sunday, September 19th, 2010 12:00
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.
Korena
Tuesday, September 28th, 2010 21:25
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
Saturday, October 2nd, 2010 04:27
Sure I would. Let me know if you want some help with it, I would be more than glad to help you.
Del Antonio
Sunday, August 14th, 2011 10:41
Any place I could download the source code? All the numbers come across when I copy and paste.
Ganesan K
Tuesday, August 16th, 2011 06:39
This was helped me to develop my site..
Thanks,
Ganesan K
Rekha Ram
Friday, August 19th, 2011 01:06
It helped me a lot in completing my assignment …thanks !!
John
Monday, February 13th, 2012 04:00
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
Wednesday, February 15th, 2012 08:48
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!
Angel Ryu
Saturday, February 11th, 2012 20:38
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!
lenny
Saturday, February 11th, 2012 19:32
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
Maruf
Wednesday, February 8th, 2012 22:19
its really nice. I have a question. Do i make a wordpress template to apply this process