How To Create A PHP Website Template From Scratch

Home
About Us
Archives
C ontact
1stwebdesigner 29.9K followers
20,997 Subscribers
C o ding
Fre e bie s
Inspira tio n
Tuto ria ls
We b De sign
Wo rdP re ss
How to Create a PHP Website Template from

Scratch
P o ste d in :
C o d in g
Tu t o ri a l s
W ri t t e n b y :
K e v in Sta n le y
Are You a F resher?
Jo in P la ce m e nt O rie nte d 4 Mo nth IT

C o urse De signe d fo r Fre sh Gra ds
NIIT.com/IT-Training
Interior designer
Find Lo ca l Inte rio r De signe rs In

Hyde ra ba d.Ge t Fre e Q uo te . Visit No w
Hyderabad.Yellow pages.co.in
Web Designing Courses
Find To p Institute s in India .Ge t Info

o n C o urse s,Adm issio n,Fe e s e tc.
w w w.Shiksha.com/Web-Designing
16
13
Like
152
reddit
his is a tutorial on c reating a P H P webs ite template s tarting with H T M L and C SS. We will s tart with
the bas ic s and you c an als o download the final produc t. P leas e remember that I am us ing very
bas ic C SS s tyling in this example jus t for you to get the idea, and not s o muc h to make it look
pretty. T he download will c ontain both the s tyled example as well as a c omplete blank template that you
c an us e for your own s tarting point for any projec t pers onal or c ommerc ial. T he demo files are releas ed
under G P L V 2 .
T his tutorial as s umes you have bas ic unders tanding of html and c s s . A t the end of this tutorial you
s hould have a bas ic unders tanding of us ing php and c onverting an html s ite to php.You c an als o
A dvert ise Here
download the demo files here.

T he ac tual template will be c reated in 1 0 eas y s teps . I will then take it a s tep further to s how you how to
add variables to your template.
Read more about other advertisment options
Setting up the File structure and Folders

Step One
L ets s tart by c reating a new folder. I have named this folder php_s ite
Get Ou r RSS Feed For Fr ee!
20,997 Subscribers
What Is RSS? Check other subscription options!
Find us on Facebook
Design Blog
I ns ide of this folder we are now going to c reate two new files . O ne is index.html and the other file is going
to be named s tyle.c s s
Like
11,634 people like Design Blog.
Step Two
N ow we are going to c reate two more folders ins ide of our main folder. T he firs t folder is going to be
named inc ludes , and the s ec ond folder will be named variables .
Blue
Canz
Jeny
Hamdy
Eber
Yasmin
Leigh
Santosh
Rifan
Sohail
Zerlatinatv
Maris
Ahmed
We s hould now have a s etup that looks like the following:
Facebook social plugin
Fol l ow Us On T wi t t er :
1stwebdesigner 29.9K followers
N ew at 1 WD : 1 0 T hings You Should Know

A bout Being A #Web_D es igner http://t.c o
/xc l6 5 C N 9
17 hours ago
* H ave you ever tought about this ? - M ake

an A pp to E ngage Your Blogs Readers
@ problogger http://t.c o/yy7 ReToi
1 day ago
Step Th ree
* So true, great writeup - H ow to M ake Your

Writing Real @ C opyblogger http://t.c o
/M qL 1 9 xtB
1 day ago
N ow, us ing your favorite html editor open the index.html file. We are going to to c reate a bas ic html
webs ite doc ument. T his is the c ode I am us ing:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.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" />
* Super ins piring - H ow to Write a

Super-Sized A utores ponder Series
http://t.c o/rM tnD SXr
1 day ago
@ mrblac k7 7 thank you, going to be fixed

now..had s erious talk and hope experienc e
with @ eleven2 will improve now!
1 day ago
<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">
@ kikolani ah, I jus t love when I am

s earc hing on G oogle about different
internet marketing topic s and I always run
into your artic les ! (y)
1 day ago
5 Simple Steps for I mproving Your

L inkedI n V is ibility @ s mexaminer
http://t.c o/rs 6 4 qV yV
1 day ago
<div id="header">
</div> 
<div id="nav">
</div> 
@ w3 edge C an you pleas e look in to this

is s ue? O ur dev has tried to s olve it but no
s uc c es s http://t.c o/U 1 7 E 6 jH T T hanks a
lot :)
1 day ago
<div id="content">
</div> 
<div id="sidebar">
* jQ uery domination: 1 1 jQ uery P lugins

T hat C an E nhanc e Your Typography
38
39
40
41
42
43
44
45
46
47
48
49
</div> 
@ s ixrevis ions http://t.c o/oY RFV L fz

1 day ago
<div id="footer">
</div> 
</div> 
</body>
* I love thes e T ime M anagement artic les !

Taking Stoc k of Your M os t P rec ious
C ommodity http://t.c o/4 WE hO mmW
1 day ago
</html>
Step Fou r
N ow I am going to open up the s tyle.c s s file and add the divs we will be us ing. I have added very bas ic
s tyling s o you c an s ee the s ite and get the idea of what we are doing. Remember that you c an us e your
own s tyling when c reating your webs ite to s uit your needs .
T his is the C SS I am adding to the s tyles heet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
body {
background-color:#f1f1f1;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}
#wrapper {
width:960px;
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;
}
#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
Hel p Us & Lea v e Feedba ck!

Do you have an excellent article idea you would like
to read about here? Share it!
Do you have some interesting tips how we could
improve our site?
Something missing here? Help us make this blog a
better place, leave feedback!
We would love to hear from you!

Be active! Write us now!
N ext we will c reate s ome more files that we will be us ing when we s tart c onverting our template to php.
O pen up the folder we c reated ins ide of our main folder c alled variables . N ext, c reate a blank file c alled
variables .php
T hen go into the other folder we c reated c alled inc ludes and c reate the following files :
header.php
nav.php
s idebar.php
footer.php
Step Six
N ow we will need to add s ome c ontent to our index.html file. I have filled in the header area with an H 2
tag for the webs ite header title. I will als o be adding the links in the nav area, as well as s ome text in the
c ontent area, s idebar, and footer. T he final index.html file now looks like this :
1
2
3
4
5
6
7
8
9
10
11
12

<head>
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

</head>
<body>
<div id="wrapper">
<div id="header">
<h2>1stWebDesigner PHP Template</h2>
<div id="nav">
<a
<a
<a
<a
href="#">Home</a>
href="#">About</a>
href="#">Portfolio</a>
href="#">Contact</a>
</div> 

<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>
</p>
<h3>Another Heading Starting Point</h3>
<p>
</p>
<p>
</p>
<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>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
<h3>Box Three</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>

<div id="footer">
<p>Copyright &copy 2010 <a href="http://www.1stwebdesigner.com">1stWebDesigner.com PHP
Template</a></p>
105
106
107
108
109
110
111

</body>
</html>
Step Seven
N ow we will s tart c onverting our template to P H P. We will need to take a brief look at the html c ode we
have and dec ide whic h areas will be s lic ed. We will be removing s pec ific areas from the index.html file
and plac ing them into the php files we have c reated ins ide the inc ludes folder.
L ets s tart with the top of the html doc ument on the header. C opy the header div and c ut it from the
doc ument. T hen open your inc ludes folder, and the header.php file we c reated and add the c ode to the
header.php
header.php
1
2
3
4
5
<div id="header">
M ake s ure this area has now been removed c ompletely from the index.html file and plac ed into the
header.php file. I n plac e of this c ode, we will now add the following to the index.html file.
1
<?php include('includes/header.php'); ?>
N ow our index.html s hould look like this : (M ake a note that the header area has now been replac ed with
our php inc lude func tion that is c alling our external header.php file)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<head>
</head>
<body>
<div id="wrapper">
<div id="nav">
<a
<a
<a
<a
href="#">Home</a>
href="#">About</a>
</div> 

<div id="content">
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<p>
</p>
<p>
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
</p>
<p>
</p>
<p>
</p>
<div id="sidebar">
<h3>Navigation</h3>
<h3>Box Two</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
<h3>Box Three</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>

<div id="footer">
<p>Copyright &copy 2010 <a href="#">Website Name</a></p>
</body>
</html>
Step Eigh t
N ow we will c ontinue to s lic e the html doc ument and plac e the c ode in the proper php files we made.
N ext lets move to the nav div. T he s ame as above, we are going to c opy and c ut that piec e of c ode and
plac e it into our nav.php file that is loc ated ins ide of the inc ludes folder.
T his is what we are adding to the nav.php file:
1
2
3
4
5
6
7
8
<div id="nav">
<a
<a
<a
<a
href="#">Home</a>
href="#">About</a>
</div> 
A gain we will replac e the c ode removed from the html doc ument with the following:
1
<?php include(includes/nav.php); ?>
N ow our index.html doc ument will look like this : (A gain note that both the header, and the nav area are
now replac ed with php inc ludes )
1
2
3
4
5
6
7
8
9
10

<head>
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

</head>
<body>
<div id="wrapper">
<?php include('includes/nav.php'); ?>
<div id="content">
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<div id="sidebar">
<h3>Navigation</h3>
<h3>Box Two</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
<h3>Box Three</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>

<div id="footer">
</body>
</html>
Step Nine
N ow it is time to do the s idebar. C opy and c ut the s idebar div and plac e it into the s idebar.php file we
c reated that is loc ated ins ide the inc ludes folder.
T his is the c ode we are adding:
sidebar.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="sidebar">
<h3>Navigation</h3>
<h3>Box Two</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
<h3>Box Three</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
We will again do the s ame thing for the footer area. C opy and c ut the footer div and plac e it into the
footer.php file we c reated in the s ame inc ludes folder.
H ere is the footer.php c ode:
1
2
3
<div id="footer">
N ow with all of our elements taken from the index.html file and added to the different php files , the final
index.html s hould look like this :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<head>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<p>
</p>
<p>
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
</p>
<p>
</p>
<p>
</p>
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</body>
</html>
Step Ten
N ow that our index.html is properly s lic ed, we c an rename the index.html file to index.php
N ow that we have c reated this template, as long as the php inc ludes are on any page we only have to
modify the one s ingle file to make it vis ible ac c ros s your entire webs ite. T his again is good for anyone
with a lot of c ontent and pages . I ns tead of having to edit the s idebar on every page of your s ite you c an
now jus t edit the s idebar.php file and it will reflec t on all of your pages . T his makes it a lot eas ier to keep
up with large portions of webs ite material.
O ur folder s hould now look like this :
Creating PHP Variables for the template

N ow we will make it a little more dynamic and even eas ier to be able to modify when needed. L ets take a
look at the header.php file ins ide the inc ludes folder.
1
2
3
4
<div id="header">
We are going to modify this a little bit to c hange the H 2 heading from a different file us ing a variable.
C reating a variable is good for areas on your webs ite that may c hange more than others . I t may als o be
a good way to allow c lients to edit a s ingle file to c hange c ertain items on their webs ite.
N ow lets replac e the text within the H 2 heading to this :
1
<h2><?php echo $heading ?></h2>
N ow our header.php file will look like this : N otic e we plac ed the ec ho php c ommand within the H 2
brac kets . T his will give our variable output the H 2 heading we want.
1
2
3
4
5
<div id="header">
N ext we are going to open up the file ins ide of the variables folder that we c reated named variables .php
We will add the variable that we are going to ec ho on the webs ite heading. I have named this variable
heading.
variables.php
1
2
3
4
5
<?php
$heading='1stWebDesigner PHP Template';
?>
N ow, at any time we want to c hange what is titled on the heading of our template, we c an s imply open our
variables .php file and modify what is between the quotes . T his will always be the output on our
header.php file where we plac ed the ec ho c ommand.
One step Fu rth er

N ow we will do the s ame thing to our footer.php file. O pen the footer.php that we have in our inc ludes
folder and lets take a look at it:
1
2
3
<div id="footer">
L ets c hange this like we did the header file, and add a variable to us e.
We will plac e our ec ho c ommand within the paragraph brac kets . You s hould now have the following in
your footer.php:
1
2
3
<div id="footer">
<p><?php echo $footer ?></p>
A nd again we will vis it our variables .php file loc ated in the variables folder we made and we will now
update it with our new variable. T he final s hould now look like this :
variables.php
1
2
3
4
5
6
7
<?php
$heading='1stWebDesigner PHP Template';
$footer='Copyright © 2010 1stWebDesigner PHP Template';
?>
M ake note of the above. When us ing P H P variables we c annot us e a regular quote. T hey s hould be
replac ed as you s ee above direc tly after the a href=
T his is to ens ure the c ode is read properly by brows ers . I f you us e a regular quote it will not work.
Making it all work

T he las t thing we need to do in order to make our variables work is to do one las t php inc lude within our
template to c all the variables file.
L ets open up our header.php file and add the following:

1
<?php include('variables/variables.php'); ?>
T his will tell our template to us e the variables file we have c reated.
T he header.php file s hould now look like this :
1
2
3
4
5
6
7

<div id="header">
N ext we will need to do the s ame to our footer.php file. A dd the s ame inc lude at the top. T he footer.php
s hould now look like this :
1
2
3
4
5

<div id="footer">
<p><?php echo $footer ?></p>
N ow that thes e two files are c alling the variables , you will s ee the reflec ted res ults in the final template.
You c an always c reate new variables , and c reate any type of php files you want. You c an even c hange the
folder direc tory in any way you wis h as long as your php inc lude func tion dis plays the c orrec t path to the
files .
Playing with th e PHP template

To tes t it a bit further lets duplic ate the index.html file and make a s ec ond page that will als o c all the
external php files . T his way we will be able to s ee more exac tly how this works .
M ake a c opy of your index.php file and rename the new file to about.php
I ns ide of this file you c an c hange anything you want within the #c ontent div ins ide of the webs ite
#wrapper
I have c reated the following for tes ting purpos es :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<head>
<title>1stWebDesigner PHP Template About Page</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<h3>About Me Page</h3>
<p>
</p>
<p>
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
</p>
<p>
</p>
<p>
</p>
<h3>Notice The Include Files</h3>
<p>
</p>
<p>
</p>
<p>
</p>
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</body>
</html>
N ow make s ure that we go ins ide of our nav.php file as well as the s idebar.php file and link the new page
we have jus t c reated. A gain us ing your html editor of c hoic e, firs t open up your nav.php file.
U pdating the links s hould make your file now look like this example below:
nav.php
1
2
3
4
5
6
7
8
<div id="nav">
<a
<a
<a
<a
href="index.php">Home</a>
href="about.php">About</a>
</div> 
N ext we will need to do the s ame thing to our s idebar.php file to make s ure the links now work.
sidebar.php
1
2
3
4
5
6
7
8
9
<div id="sidebar">
<h3>Navigation</h3>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h3>Box Two</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
<h3>Box Three</h3>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
Here</a></li>
N ow we are c omplete. We have c reated a two page P H P webs ite template that we c an expand on more to
make a c ompleted projec t. We have learned how to us e bas ic php inc ludes and variables to be able to
edit c ontent ac c ros s many different pages at one time. I really hope you have enjoyed this pos t and
learned s omething from it as well.
J us t to take a final look at the new file s truc ture with the added page you c an view the image below for
referenc e:
T his tutorial was c reated to give you s ome bas ic knowledge on php and c reating a php webs ite template.
I f you have any ques tions I will do my bes t to ans wer them in the c omments below.
For Further Reading:
A nc ient Web D es ign
A nc ient Webs ite
G et T he C ooles t
P ros A nd C ons O f
P rac tic es that

Beginners Should
A void P art 2
D es ign P rac tic es T hat

Beginners Should
A void P art 1
D omain N ame N ow
Bes t T ips , Tric ks A nd
Tools Youll N eed!
U s ing Frameworks
Did y ou enjoy this article and found it useful?

Ge t e ve n m o re fro m us:
332 people +1'd this
1stwebdesigner
Get Our RSS Feed
Article was created by Kevin Stanley
10
Visit Kevin Stanley's Website | Follow Kevin Stanley On Twitter
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.
203 Brilliant Comments - Join Discussion Now!

apk
i found error unres olve
Reply
Daranivasan
Reply
D o you have a s imple tutorials like this for javas c ript and jquery?
N o one c an explain a pers on more better and prac tic ally than this :)
G r8 work n thnx..!
SRINIVAS
T hanks for the tutorial.

I t was very important for me.
this is bes t pos t to learn s tep by s tep.
onc e again thanks & regards
S R I N I V A S
Reply
munduni
T he tutorial is very good
Reply
Raju Ahamed
Really very nic e tutorial.I love this web s ite.
Reply
Evan
Suc h a great tutorial! ! T hanks s o muc h. E verything worked like a c harm :)
Reply
T homas
T hank you s o muc h! T his is an awes ome right- to- the- point guide.
I was s truggeling to find a s olution to my problem (loading time), and now I have!
D idnt know P H P was s o eas e of us e.
A gain: T H A N K Y O U V E RY M U C H !
Reply
Danny
T hanks for the tutorial.I t was very informative.

H ave one ques tion,what is the bes t way to des ign a template or theme for php driven webs ite.I s it
bes t to us e a c ms like wordpres s ,drupal etc whats the bes t way to go about it?
Reply
Bethel Williams
T his is A wes ome. I learnt a lot. G od bles s you brotherYou have done marvelous ly well in this
tutorial. I will like to c onnec t with you on Fac ebook s o we c an do s ome s tuff together.
Reply
webinone
I als o c reate a php template and s hare as a tutorial here.
Reply
SURESH KUMAR
E ver Bes t tutorial in this type

T hanks
Reply
sabeer
great tutorial bro.pleas e inc lude more pos t like this .thank you
Reply
Jen
it didnt worked for me.. as i s tarted to s lic e the c ode, it mes s es up the output..
Reply
JOhn
Reply
Kudos , helped me a ton! I us e expres s ion web 4 and had a lot of trouble getting the P H P to work
c orrec tly but after a lot of googling and s ome downloads it works like a c harm! thanks again!
mark
L ove this pos t, took me a while to realis e I had to c hange the index file html to php, to get it working
on my loc als erver. But I learned a lot about C SS and php. N ever c oded my own C SS before, but
managed to tweak it to s uit my needs ! H ad at leas t one lightbulb moment!
T hanks for pos ting it.
Reply
Haogar5
Well this made me unders tand s ome things , but als o i dont get what i did wrong, s inc e i jus t keep
getting jus t the c ontent s ec tion when i open the page, no nav no s idebar, no footer, no header, or if
they are there at leas t they are empty, but it als o happened with the demo files , s o im kind of los t
Reply
meenakshi
wonderful tutorial for beginners
Reply
Add Your Own Brilliant Comment:
Name (required):
E-Mail (required):
Website:
C omment:
Tags allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime="">
<em> <i> <q cite=""> <strike> <strong>
S ub m it
G o T o T op
20 1 1 1 st w e b de si gn e r G r a p h i c a n d W e b De si gn Bl og . De si gn b y Da i n i s G r a v e r i s. W or dP r e ss Th e me b y Da n i e l Ku r dogh l i a n
Page loaded in 0.311 seconds.
H ow to C reate Your firs t WordP res s T heme: P art 1

I would like to s ee rec ommendations from this s ite
I would like to opt out of rec ommendations (if you c lear your c ookies you will have to opt- out again)
SAVE

How To Create A PHP Website Template From Scratch

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

How To Create A PHP Website Template From Scratch

Cargado por

Copyright:

Formatos disponibles

Home

1stwebdesigner 29.9K followers

How to Create a PHP Website Template from

Are You a F resher?

Jo in P la ce m e nt O rie nte d 4 Mo nth IT

Find Lo ca l Inte rio r De signe rs In

Web Designing Courses

Find To p Institute s in India .Ge t Info

A dvert ise Here

download the demo files here.

Read more about other advertisment options

Setting up the File structure and Folders

Get Ou r RSS Feed For Fr ee!

We s hould now have a s etup that looks like the following:

Facebook social plugin

N ew at 1 WD : 1 0 T hings You Should Know

* H ave you ever tought about this ? - M ake

* So true, great writeup - H ow to M ake Your

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

* Super ins piring - H ow to Write a

@ mrblac k7 7 thank you, going to be fixed

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

@ kikolani ah, I jus t love when I am

5 Simple Steps for I mproving Your

@ w3 edge C an you pleas e look in to this

* jQ uery domination: 1 1 jQ uery P lugins

</div>

@ s ixrevis ions http://t.c o/oY RFV L fz

* I love thes e T ime M anagement artic les !

Hel p Us & Lea v e Feedba ck!

We would love to hear from you!

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

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

</div>

</div>

</div>

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

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

</div>

</div>

</div>

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

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

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

</div>

</div>

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

Creating PHP Variables for the template

</div>

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

One step Fu rth er

Making it all work

L ets open up our header.php file and add the following:

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

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

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

Playing with th e PHP template

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

</div>

</div>

For Further Reading:

A nc ient Web D es ign

A nc ient Webs ite