How to Create a PHP Website Template from Scratch

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

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

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

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

Setting up the File structure and Folders

Step One

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

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

Step Two

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

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

How to Create a PHP Website Template from Scratch

Step Three

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


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

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

<head>

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

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

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

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

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

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

<div id="header">

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

<div id="nav">

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

<div id="content">

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

<div id="sidebar">

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

<div id="footer">

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

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

	</body>

</html>

Step Four

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

This is the CSS I am adding to the stylesheet:


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

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

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

#header h2 {
padding:10px;
}

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

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

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

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

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

#sidebar a {
text-decoration:none;
}

#sidebar li {
list-style:none;
}

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

#footer p {
padding:10px;
}

Step Five

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

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

How to Create a PHP Website Template from Scratch

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

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

Step Six

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


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

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

<head>

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

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

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

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

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

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

<div id="header">

	<h2>1stWebDesigner PHP Template</h2>

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

<div id="nav">

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

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

<div id="content">

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

<h3>Paragraph Element</h3>

<p>

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

</p>

<p>

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

</p>

<h3>Another Heading Starting Point</h3>

<p>

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

</p>

<p>

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

</p>

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

<div id="sidebar">

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

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

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

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

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

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

	</body>

</html>

Step Seven

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

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

header.php


<div id="header">

	<h2>1stWebDesigner PHP Template</h2>

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

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


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

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


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

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

<head>

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

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

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

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

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

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

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

<div id="nav">

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

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

<div id="content">

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

<h3>Paragraph Element</h3>

<p>

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

</p>

<p>

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

</p>

<h3>Another Heading Starting Point</h3>

<p>

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

</p>

<p>

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

</p>

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

<div id="sidebar">

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

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

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

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

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

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

	</body>

</html>

Step Eight

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

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

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


<div id="nav">

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

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

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


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

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


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

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

<head>

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

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

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

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

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

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

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

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

<div id="content">

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

<h3>Paragraph Element</h3>

<p>

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

</p>

<p>

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

</p>

<h3>Another Heading Starting Point</h3>

<p>

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

</p>

<p>

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

</p>

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

<div id="sidebar">

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

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

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

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

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

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

	</body>

</html>

Step Nine

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

This is the code we are adding:

sidebar.php


<div id="sidebar">

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

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

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

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

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

Here is the footer.php code:


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

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


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

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

<head>

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

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

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

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

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

<title>1stWebDesigner PHP Template</title>

</head>

	<body>

		<div id="wrapper">

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

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

<div id="content">

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

<h3>Paragraph Element</h3>

<p>

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

</p>

<p>

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

</p>

<h3>Another Heading Starting Point</h3>

<p>

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

</p>

<p>

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

</p>

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

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

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

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

	</body>

</html>

Step Ten

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

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

Our folder should now look like this:

Creating PHP Variables for the template

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


<div id="header">

	<h2>1stWebDesigner PHP Template</h2>

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

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

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


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

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


<div id="header">

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

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

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

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

variables.php


<?php

$heading='1stWebDesigner PHP Template';

?>

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

One step Further

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


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

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

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


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

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

variables.php


<?php

$heading='1stWebDesigner PHP Template';

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

?>

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

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

Making it all work

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

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


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

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

The header.php file should now look like this:


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

<div id="header">

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

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

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


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

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

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

Playing with the PHP template

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

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

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

I have created the following for testing purposes:


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

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

<head>

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

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

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

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

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

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

</head>

	<body>

		<div id="wrapper">

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

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

<div id="content">

<h3>About Me Page</h3>

<p>

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

</p>

<p>

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

</p>

<h3>Another Heading Starting Point</h3>

<p>

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

</p>

<p>

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

</p>

<h3>Notice The Include Files</h3>

<p>

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

</p>

<h3>Another Heading Starting Point</h3>

<p>

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

</p>

<p>

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

</p>

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

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

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

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

	</body>

</html>

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

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

nav.php


<div id="nav">

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

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

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

sidebar.php


<div id="sidebar">

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

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

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

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

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

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

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

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

Join over 55,891 Subscribers Today! FREE UPDATES!

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

10 Written Articles

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

289 Comments Best Comments First
  • Jorge

    Tuesday, January 10th, 2012 21:48

    217

    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)

    0
  • DrKENAN

    Saturday, January 7th, 2012 14:27

    215

    Thanks very much and wish to learn more

    0
  • sandeep

    Saturday, January 7th, 2012 06:54

    214

    it is very good to learn a website,
    thanks for providing this link to learn.

    0
  • Parth

    Tuesday, December 27th, 2011 16:46

    211

    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.

    0
  • Amber

    Thursday, December 29th, 2011 03:02

    212

    Thank you for so good tutorial!

    0
  • Huber

    Thursday, December 29th, 2011 13:48

    213

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

    0
  • Andy

    Monday, December 12th, 2011 22:10

    201

    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!

    0
  • Lisan

    Wednesday, December 7th, 2011 17:57

    200

    Awesome. Thank you so much for this article. Well written.

    0
  • Josue

    Friday, October 28th, 2011 20:08

    188

    wow this article help me alot!! thanks!

    0
  • Mohsin

    Saturday, October 29th, 2011 20:50

    189

    thanx dear this article help me too much…….

    0
  • bjbt

    Wednesday, October 26th, 2011 10:00

    187

    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.

    0
  • Daranivasan

    Wednesday, October 19th, 2011 17:04

    186

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

    0
  • Evan

    Sunday, October 16th, 2011 17:56

    183

    Such a great tutorial!! Thanks so much. Everything worked like a charm :)

    0
  • Raju Ahamed

    Monday, October 17th, 2011 13:28

    184

    Really very nice tutorial.I love this web site.

    0
  • Khanna

    Tuesday, October 18th, 2011 18:03

    185

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

    once again thanks & regards

    0
  • ansari husain

    Thursday, November 10th, 2011 15:21

    190

    thank you very much!!!!!!!!!!

    0
  • Nirmal

    Saturday, November 12th, 2011 15:31

    191

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

    0
  • Moof

    Saturday, December 3rd, 2011 18:20

    197

    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?

    0
  • Morato

    Sunday, December 4th, 2011 15:00

    198

    Very good,

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

    Thank you !

    0
  • Ervin

    Tuesday, December 6th, 2011 06:20

    199

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

    0
  • Kalen

    Thursday, December 1st, 2011 10:34

    196

    Thanks for this this tutorial. Relay this is very useful for php students.

    thanks

    0
  • Pankaj

    Thursday, November 24th, 2011 15:48

    195

    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

    0
  • james davidson

    Tuesday, November 15th, 2011 14:16

    192

    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

    0
  • sardar

    Thursday, November 17th, 2011 10:30

    193

    ery good knowledge

    0
  • Mohsin

    Friday, November 18th, 2011 08:46

    194

    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.

    0
  • Kris J

    Saturday, May 29th, 2010 18:35

    36

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

    0
  • Chris

    Monday, May 10th, 2010 17:40

    35

    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.

    0
  • Kieran

    Wednesday, April 28th, 2010 23:43

    33

    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

    0
    • Kevin

      Tuesday, May 4th, 2010 17:34

      34

      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?

      0
  • Santhos Drenthe

    Monday, April 26th, 2010 21:23

    32

    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!

    0
  • agungX2

    Saturday, April 17th, 2010 21:59

    31

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

    0
  • Emmei

    Thursday, April 15th, 2010 09:53

    30

    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,

    0
  • Steve Naegele

    Thursday, April 15th, 2010 02:22

    29

    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

    0
  • Steve Naegele

    Thursday, April 15th, 2010 02:07

    28

    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

    0
  • Saviour Six

    Wednesday, April 14th, 2010 17:21

    27

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

    0
  • Paul

    Wednesday, April 14th, 2010 11:21

    24

    Very nice and simple tutorial, thanks :-)

    0
  • jeroen

    Wednesday, April 14th, 2010 10:24

    23

    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.

    0
    • Kevin

      Wednesday, April 14th, 2010 13:43

      26

      Where is your tutorial?

      0
  • carlnunes

    Wednesday, April 14th, 2010 10:00

    22

    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!

    0
  • Josh Kohlbach

    Wednesday, April 14th, 2010 00:33

    21

    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.

    0
  • Steve Naegele

    Wednesday, April 14th, 2010 05:55

    20

    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 ( http://naegeledesign.com/emptypageblog/)

    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

    0
    • Kevin

      Wednesday, April 14th, 2010 13:41

      25

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

      0
  • Jason Bartholme

    Tuesday, April 13th, 2010 21:13

    19

    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.

    0
  • Lena Tailor

    Tuesday, April 13th, 2010 16:43

    18

    Thanks for the well explained tutorial. Very helpful for beginners..

    0
    • Kevin

      Tuesday, April 13th, 2010 17:08

      11

      No problem! Glad you liked it.

      0
  • Detlef

    Tuesday, April 13th, 2010 13:18

    14

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

    Greetings from Germany.

    0
    • Kevin

      Tuesday, April 13th, 2010 16:53

      8

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

      0
  • Susan

    Tuesday, April 13th, 2010 17:48

    13

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

    0
  • hannes

    Tuesday, April 13th, 2010 11:01

    9

    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

    0
    • Dainis Graveris

      Tuesday, April 13th, 2010 15:00

      4

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

      0
      • hannes

        Tuesday, April 13th, 2010 15:57

        15

        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.

        0
        • Saad Bassi

          Tuesday, April 13th, 2010 16:08

          16

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

          0
    • Armando

      Saturday, February 5th, 2011 01:30

      72

      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.

      0
  • Bob Tako

    Tuesday, April 13th, 2010 16:45

    7

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

    0
    • Kevin

      Tuesday, April 13th, 2010 17:07

      10

      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.

      0
  • hannes

    Tuesday, April 13th, 2010 10:10

    6

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

    0
    • Saad Bassi

      Tuesday, April 13th, 2010 16:12

      17

      Your comment went in to spam. Just found it and now it is approved.

      0
  • powL

    Tuesday, April 13th, 2010 15:13

    5

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

    0
  • tuur

    Tuesday, April 13th, 2010 11:37

    3

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

    0
  • Consa

    Tuesday, April 13th, 2010 10:37

    2

    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

    0
  • chandan

    Tuesday, April 13th, 2010 10:28

    1

    this is one of the great articles for newbies like me :)

    0
    • Kevin

      Tuesday, April 13th, 2010 17:09

      12

      Happy to see you liked it!

      0

Comments are closed.

x

Do You Know How To Freelance And Get More Clients?

E-Book

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

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

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

- Jacob Cass | Just Creative

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

unknown - unknown - US