How+to+Create+a+PHP+Website+Template+from+Scratch

Home About Us Archives Contact 20,997 Subscribers 1stwebdesigner 29.9K followers

Coding

Freebies

Inspiration

Tutoria ls

Web Design

WordPress

T

How to Create a PHP Website Template fromScratch

C o d ing Tu to ria ls Writ te n by : K e v in Sta n le y

1613

152Likereddit

his is a tutorial on c reating a PHP webs ite template s tarting with HTML and C SS. We will s tart withthe bas ics and you can also download the final produc t. P lease remember that I am us ing verybas ic C SS s tyling in this example jus t for you to get the idea, and not so much to make it look

pretty. The download will contain both the s tyled example as well as a complete blank template that youcan use for your own s tarting point for any projec t personal or commerc ial. The demo files are releasedunder GP L V 2.

This tutorial assumes you have bas ic unders tanding of html and css . A t the end of this tutorial youshould have a bas ic unders tanding of us ing php and converting an html s ite to php.You can alsodownload the demo files here.

The ac tual template will be c reated in 10 easy s teps . I will then take it a s tep further to show you how toadd variables to your template.

Po ste d in :

Are You a Fresher?Join Placement Oriented 4 Month ITCourse Designed for Fresh GradsNIIT.com/IT-Training

Interior designerFind Local Interior Designers InHyderabad.Get Free Quote. Visit NowHyderabad.Yellowpages.co.in

Web Designing CoursesFind Top Institutes in India.Get Infoon Courses,Admission,Fees etc.www.Shiksha.com/Web-Designing

Advertise Here

Read more about other advertisment options

Setting up the File structure and Folders

Step OneLets s tart by c reating a new folder. I have named this folder php_s ite

Ins ide of this folder we are now going to c reate two new files . O ne is index.html and the other file is goingto be named s tyle.css

Step TwoNow we are going to c reate two more folders ins ide of our main folder. The firs t folder is going to benamed inc ludes , and the second folder will be named variables .

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

Step ThreeNow, us ing your favorite html editor open the index.html file. We are going to to c reate a bas ic htmlwebs ite document. This is the code I am us ing:

1

2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 1stWebDesigner PHP Template18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

New at 1WD: 10 Things You Should KnowA bout Being A #Web_Des igner http://t.co/xc l65C N917 hours ago

*Have you ever tought about this? - Makean A pp to Engage Your Blogs Readers@problogger http://t.co/yy7ReToi1 day ago

*So true, great writeup - How to Make YourWriting Real @C opyblogger http://t.co/MqL19xtB1 day ago

*Super inspiring - How to Write aSuper-Sized A utoresponder Serieshttp://t.co/rM tnDSXr1 day ago

@mrblack77 thank you, going to be fixednow..had serious talk and hope experiencewith @eleven2 will improve now!1 day ago

@kikolani ah, I jus t love when I amsearching on Google about differentinternet marketing topics and I always runinto your artic les ! (y)1 day ago

5 Simple Steps for Improving YourLinkedIn V is ibility @smexaminerhttp://t.co/rs64qVyV1 day ago

@w3edge C an you please look in to thisis sue? O ur dev has tried to solve it but nosuccess http://t.co/U17E6jHT Thanks alot :)1 day ago

*jQ uery domination: 11 jQ uery P luginsThat C an Enhance Your Typography

Get Ou r RSS Feed For Free!20,997 Subscribers

What Is RSS? Check other subscription options!

Find us on Facebook

Blue Canz Jeny Hamdy Eber

Yasmin Leigh Santosh Rifan Sohail

Zerlatinatv Maris Ahmed

Design Blog

11,634 people like Design Blog.

Like

Facebook social plugin

Follow Us On T wit t er:

1stwebdesigner 29.9K followers

Step FourNow I am going to open up the s tyle.css file and add the divs we will be us ing. I have added very bas ics tyling so you can see the s ite and get the idea of what we are doing. Remember that you can use yourown s tyling when c reating your webs ite to suit your needs .

This is the C SS I am adding to the s tylesheet:

Step Five

38 39 40 41 42 43 44 45 46 47 48 49

1 body {2 background-color:#f1f1f1;3 font-family: georgia,sans-serif;4 color:#333;5 margin:0;6 padding:0;7 }8 9 #wrapper {

10 width:960px;11 background-color:#f8f8f8;12 margin:0 auto;13 border-left:1px solid #ccc;14 border-right:1px solid #ccc;15 }16 17 #header {18 width:960px;19 height:135px;20 margin:0 auto;21 margin-bottom:25px;22 border-bottom:1px solid #ccc;23 border-top:1px solid #ccc;24 }25 26 #header h2 {27 padding:10px;28 }29 30 #nav {31 width:960px;32 height:40px;33 border-bottom:1px solid #ccc;34 }35 36 #nav a {37 display:inline;38 padding:10px;39 text-decoration:none;40 background-color:#f1f1f1;41 }42 43 #nav a:hover {44 background-color:#bababa;45 height:80px;46 }47 48 #content {49 width:675px;50 float:left;51 padding:10px;52 }53 54 #sidebar {55 width:200px;56 float:right;57 margin-bottom:25px;58 }59 60 #sidebar a {61 text-decoration:none;62 }63 64 #sidebar li {65 list-style:none;66 }67 68 #footer {69 clear:both;70 width:960px;71 height:135px;72 border-top:1px solid #ccc;73 }74 75 #footer p {76 padding:10px;77 }

@sixrevis ions http://t.co/oYRFV Lfz1 day ago

*I love these T ime Management artic les !Taking Stock of Your Mos t P rec iousC ommodity http://t.co/4WEhO mmW1 day ago

Help Us & Lea v e Feedba ck!

Do you have an excellent article idea you would liketo read about here? Share it!

Do you have some interesting tips how we couldimprove our site?

Something missing here? Help us make this blog abetter place, leave feedback!

We would love to hear from you!Be active! Write us now!

Next we will c reate some more files that we will be us ing when we s tart converting our template to php.

O pen up the folder we c reated ins ide of our main folder called variables . Next, c reate a blank file calledvariables .php

Then go into the other folder we c reated called inc ludes and c reate the following files :

header.phpnav.phps idebar.phpfooter.php

Step SixNow we will need to add some content to our index.html file. I have filled in the header area with an H2tag for the webs ite header title. I will also be adding the links in the nav area, as well as some text in thecontent area, s idebar, and footer. The final index.html file now looks like this :

1

2 3 4 5 6 7 8 9

10 11 12

13 14 15 16 17 1stWebDesigner PHP Template18 19 20 21 22 23 24 25 26 27 1stWebDesigner PHP Template28 29 30 31 32 33 Home34 About35 Portfolio36 Contact37 38 39 40 41 42 Heading143 Heading244 Heading345 Heading446 Heading547 48 Paragraph Element49 50 51 52 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 sedelit 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 egetultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.

53 54 55 56 57 58 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque


59 60 61 62 Another Heading Starting Point63 64 65 66 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque




73 74 75 76 77 78 79 80 Navigation81 Home82 About Us83 Links84 Portfolio85 Contact86 87 Box Two88 Link Here89 Link Here90 Link Here91 Link Here92 Link Here93 94 Box Three95 Link Here96 Link Here97 Link Here98 Link Here99 Link Here

100 101 102 103 104 Copyright &copy 2010 1stWebDesigner.com PHP

Template

Step SevenNow we will s tart converting our template to PHP. We will need to take a brief look at the html code wehave and dec ide which areas will be s liced. We will be removing spec ific areas from the index.html fileand plac ing them into the php files we have c reated ins ide the inc ludes folder.

Lets s tart with the top of the html document on the header. C opy the header div and cut it from thedocument. Then open your inc ludes folder, and the header.php file we c reated and add the code to theheader.php

header.php

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

Now our index.html should look like this : (Make a note that the header area has now been replaced withour php inc lude func tion that is calling our external header.php file)

105 106 107 108 109 110 111

1 2 3 1stWebDesigner PHP Template4 5

1

1

2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 1stWebDesigner PHP Template18 19 20 21 22 23 24 25 26 27 28 29 Home30 About31 Portfolio32 Contact33 34 35 36 37 38 Heading139 Heading240 Heading341 Heading442 Heading543 44 Paragraph Element45 46 47 48 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 sedelit 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

Step EightNow we will continue to s lice the html document and place the code in the proper php files we made.

Next lets move to the nav div. The same as above, we are going to copy and cut that piece of code andplace it into our nav.php file that is located ins ide of the inc ludes folder.

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

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

Now our index.html document will look like this : (A gain note that both the header, and the nav area arenow replaced with php inc ludes)

ultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.55 56 57 58 Another Heading Starting Point59 60 61 62 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque




69 70 71 72 73 74 75 76 Navigation77 Home78 About Us79 Links80 Portfolio81 Contact82 83 Box Two84 Link Here85 Link Here86 Link Here87 Link Here88 Link Here89 90 Box Three91 Link Here92 Link Here93 Link Here94 Link Here95 Link Here96 97 98 99

100 Copyright &copy 2010 Website Name101 102 103 104 105 106 107

1 2 3 Home4 About5 Portfolio6 Contact7 8

1

1

2 3 4 5 6 7 8 9

10

11 12 13 14 15 16 17 1stWebDesigner PHP Template18 19 20 21 22 23 24 25 26 27 28 29 30 31 Heading132 Heading233 Heading334 Heading435 Heading536 37 Paragraph Element38 39 40 41 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque








62 63 64 65 66 67 68 69 Navigation70 Home71 About Us72 Links73 Portfolio74 Contact75 76 Box Two77 Link Here78 Link Here79 Link Here80 Link Here81 Link Here82 83 Box Three84 Link Here85 Link Here86 Link Here87 Link Here88 Link Here89 90 91 92 93 Copyright &copy 2010 Website Name94 95 96 97 98 99

100

Step NineNow it is time to do the s idebar. C opy and cut the s idebar div and place it into the s idebar.php file wecreated that is located ins ide the inc ludes folder.

This is the code we are adding:

sidebar.php

We will again do the same thing for the footer area. C opy and cut the footer div and place it into thefooter.php file we c reated in the same inc ludes folder.

Here is the footer.php code:

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

1 2 3 Navigation4 Home5 About Us6 Links7 Portfolio8 Contact9

10 Box Two11 Link Here12 Link Here13 Link Here14 Link Here15 Link Here16 17 Box Three18 Link Here19 Link Here20 Link Here21 Link Here22 Link Here23 24

1 2 Copyright &copy 2010 Website Name3

1

2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 1stWebDesigner PHP Template18 19 20 21 22 23 24 25 26 27 28 29 30 31 Heading132 Heading233 Heading334 Heading435 Heading536 37 Paragraph Element38 39 40 41 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque


42 43 44 45 46

Step TenNow that our index.html is properly s liced, we can rename the index.html file to index.php

Now that we have c reated this template, as long as the php inc ludes are on any page we only have tomodify the one s ingle file to make it vis ible acc ross your entire webs ite. This again is good for anyonewith a lot of content and pages . Ins tead of having to edit the s idebar on every page of your s ite you cannow jus t edit the s idebar.php file and it will reflec t on all of your pages . This makes it a lot eas ier to keepup with large portions of webs ite material.

O ur folder should now look like this :

Creating PHP Variables for the templateNow we will make it a little more dynamic and even eas ier to be able to modify when needed. Lets take alook at the header.php file ins ide the inc ludes folder.

47 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices nequevolutpat. Nam at nunc lectus, id vulputate purus. In et turpis ac mauris viverra iaculis. Cras sedelit 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 egetultrices felis eleifend. Nunc pharetra rutrum nibh et lobortis. Morbi vitae venenatis velit.





62 63 64 65 66 67 68 69 70 71 72 73 74 75

1 2 3 1stWebDesigner PHP Template4

We are going to modify this a little bit to change the H2 heading from a different file us ing a variable.C reating a variable is good for areas on your webs ite that may change more than others . I t may also bea good way to allow c lients to edit a s ingle file to change certain items on their webs ite.

Now lets replace the text within the H2 heading to this :

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

Next 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 echo on the webs ite heading. I have named this variableheading.

variables.php

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

One step FurtherNow we will do the same thing to our footer.php file. O pen the footer.php that we have in our inc ludesfolder and lets take a look at it:

Lets 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 inyour footer.php:

A nd again we will vis it our variables .php file located in the variables folder we made and we will nowupdate it with our new variable. The final should now look like this :

variables.php

Make note of the above. When us ing PHP variables we cannot use a regular quote. They should bereplaced as you see above direc tly after the a href=

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

Making it all workThe las t thing we need to do in order to make our variables work is to do one las t php inc lude within ourtemplate to call the variables file.

5

1

1 2 3 4 5

1

1 2 Copyright &copy 2010 Website Name3

1 2 3

1

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

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

The header.php file should now look like this :

Next we will need to do the same to our footer.php file. A dd the same inc lude at the top. The footer.phpshould now look like this :

Now that these two files are calling the variables , you will see the reflec ted results in the final template.You can always c reate new variables , and c reate any type of php files you want. You can even change thefolder direc tory in any way you wish as long as your php inc lude func tion displays the correc t path to thefiles .

Playing with the PHP templateTo tes t it a bit further lets duplicate the index.html file and make a second page that will also call theexternal php files . This way we will be able to see more exac tly how this works .

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

Ins ide of this file you can change anything you want within the #content div ins ide of the webs ite#wrapper

I have c reated the following for tes ting purposes:

1

1 2 3 4 5 6 7

1 2 3 4 5

1

2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 1stWebDesigner PHP Template About Page18 19 20 21 22 23 24 25 26 27 28 29 30 31 About Me Page32 33 34 35 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque




Now make sure that we go ins ide of our nav.php file as well as the s idebar.php file and link the new pagewe have jus t c reated. A gain us ing your html editor of choice, firs t open up your nav.php file.

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

nav.php

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

sidebar.php





56 57 58 59 Notice The Include Files60 61 62 63 Quisque pellentesque sodales aliquam. Morbi mollis neque eget arcu egestas non ultrices neque






78 79 80 81 82 83 84 85 86 87 88 89 90 91

1 2 3 Home4 About5 Portfolio6 Contact7 8

1 2 3 Navigation4 Home5 About Us6 Links7 Portfolio8 Contact9

Now we are complete. We have c reated a two page PHP webs ite template that we can expand on more tomake a completed projec t. We have learned how to use bas ic php inc ludes and variables to be able toedit content acc ross many different pages at one time. I really hope you have enjoyed this pos t andlearned something from it as well.

Jus t to take a final look at the new file s truc ture with the added page you can view the image below forreference:

This tutorial was c reated to give you some 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 answer them in the comments below.

For Further Reading:

10 Box Two11 Link Here12 Link Here13 Link Here14 Link Here15 Link Here16 17 Box Three18 Link Here19 Link Here20 Link Here21 Link Here22 Link Here23 24

A nc ient Web Des ign A nc ient Webs ite Get The C ooles t P ros A nd C ons O f

332 people +1'd this 1stwebdesigner

Get even more from us:

Get Our RSS Feed

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 designusing Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions,comments, and feedback.

P rac tices thatBeginners Should

A void Part 2

Des ign P rac tices ThatBeginners Should

A void Part 1

Domain Name Now Bes t T ips , Tricks A nd

Tools Youll Need!

Us ing Frameworks

Did you enjoy this article and found it useful?

Article was created by Kevin StanleyVisit Kevin Stanley's Website | Follow Kevin Stanley On Twitter

203 Brilliant Comments - Join Discussion Now!

apk

Reply

Daranivasan

1010

i found error unresolve

Reply

SRINIVAS

Reply

munduni

Reply

Raju Ahamed

Reply

Evan

Reply

T homas

Reply

Do you have a s imple tutorials like this for javasc ript and jquery?

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

Gr8 work n thnx..!

Thanks for the tutorial.I t was very important for me.this is bes t pos t to learn s tep by s tep.

once again thanks & regards

S R I N I V A S

The tutorial is very good

Really very nice tutorial.I love this web s ite.

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

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

A gain: THA NK YO U V ERY MUC H!

Danny

Reply

Bethel Williams

Reply

webinone

Reply

SURESH KUMAR

Reply

sabeer

Reply

Jen

Reply

JOhn

Thanks for the tutorial.I t was very informative.Have one ques tion,what is the bes t way to des ign a template or theme for php driven webs ite.Is itbes t to use a cms like wordpress ,drupal etc whats the bes t way to go about it?

This is A wesome. I learnt a lot. God bless you brotherYou have done marvelous ly well in thistutorial. I will like to connec t with you on Facebook so we can do some s tuff together.

I also c reate a php template and share as a tutorial here.

Ever Bes t tutorial in this typeThanks

great tutorial bro.please inc lude more pos t like this.thank you

it didnt worked for me.. as i s tarted to s lice the code, it messes up the output..

Reply

mark

Reply

Haogar5

Reply

meenakshi

Reply

1 2 3 4 5 6 7

Add Your Own Brilliant Comment:

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

Love this pos t, took me a while to realise I had to change the index file html to php, to get it workingon my localserver. But I learned a lot about C SS and php. Never coded my own C SS before, butmanaged to tweak it to suit my needs ! Had at leas t one lightbulb moment!

Thanks for pos ting it.

Well this made me unders tand some things , but also i dont get what i did wrong, s ince i jus t keepgetting jus t the content sec tion when i open the page, no nav no s idebar, no footer, no header, or ifthey are there at leas t they are empty, but it also happened with the demo files , so im kind of los t

wonderful tutorial for beginners

+How to C reate Your firs t WordP ress Theme: Part 1I would like to see recommendations from this s iteI would like to opt out of recommendations (if you c lear your cookies you will have to opt-out again) SAVE

Name (required): E-Mail (required): Website:

Comment:

Tags allowed:

Submit

201 1 1 st w e b de si gn e r Gr ap h i c an d W e b De si gn Bl og. De si gn b y Dai n i s Gr av e r i s. W or dPr e ss Th e me b y Dan i e l Ku r dogh l i anPage loaded in 0.311 seconds.

G o T o T op

How+to+Create+a+PHP+Website+Template+from+Scratch

Documents

Transcript of How+to+Create+a+PHP+Website+Template+from+Scratch