home info scripts guides links contact

PHP Includes

Have you ever wondered how sites like these change their layouts really fast? You probably tried it using HTML, but it's not as "quick" as you thought. You have to go to every page and re-do it, don't you? Or maybe you use really annoying frames that don't allow you to make div and tables layouts. Here's our little secret: PHP Include. Here's what you need:

Requirements:
-PHP server (ask your host)
-Basic HTML Knowledge
-Notepad

Make your layout

All you have to do is make your layout. Don't be shy, go ahead and make a div layers. Here's what the basic layout should look like:

<title>My Site</title> <link rel="stylesheet" href="style.css"> <div style="position: absolute: top: 0; left: 0;"> <img src="main.jpg" width="610" height="470"/> </div> <p> This is my navigation <a href="link.htm">Link</a><br /> <a href="link.htm">Link</a><br /> </p> <p> This is my content. This changes on all pages </p> <p> this is my copyright, bitches. 2005. </p> </link>
All right, so you have your layout made. Be sure your navigation and stuff is either on top or on bottom of the page and that your content is in the middle like I have shown

Separate content

So now we're going to separate our content from what is needed on every single page. The stuff that will show up on every single page will be called our headers and footers.

Identify what you need on every page. I have done so by adding HEADER and FOOTER tags to the layout as shown below. This includes stuff like images, style tags, titles, and navigation. Stop at the content.

Note: Headers are the code(s) that appear on top of every page and footers are the codes that show at the bottom. Notice that the content has been left alone.

<!-------------HEADER-------------> <title>My Site</title> <link rel="stylesheet" href="style.css"> <div style="position: absolute: top: 0; left: 0;"> <img src="main.jpg" width="610" height="470"/> </div> <p> This is my navigation <a href="link.htm">Link</a><br /> <a href="link.htm">Link</a><br /> </p> <!-------------HEADER-------------> <p> This is my content. This changes on all pages </p> <!-------------FOOTER-------------> <p> this is my copyright, bitches. 2005. </p> <!-------------FOOTER------------->

Make header.txt

Okay, copy all of the HEADER text and put into a notepad document titled header.txt. Here is what's going into my header.txt. The stuff included are my title, my style tags, my pictures, and my navigation.

<!-------------HEADER-------------> <title>My Site</title> <link rel="stylesheet" href="style.css"> <div style="position: absolute: top: 0; left: 0;"> <img src="main.jpg" width="610" height="470"/> </div> <p> This is my navigation <a href="link.htm">Link</a><br /> <a href="link.htm">Link</a><br /> </p> <!-------------HEADER-------------> </link>

Make footer.txt

Do the same for your footers, but save it as footer.txt. Here is my footer.txt; it includes my copyright:

<!-------------FOOTER-------------> <p> this is my copyright, bitches. 2005. </p> <!-------------FOOTER------------->
Okay, so let's recap. All of your header is in header.txt and all of your footers are in footer.txt, right? You saved it...right? And your content isn't on either of those documents...right? Good.

Saving as .PHP

Okay, so all that should be left is your content...so what do you do with it? Paste all of your content into a notepad document. Add this code to the top of each page you make:

<? include('header.txt'); ?>

And this code at the bottom of each page you make:

<? include('footer.txt'); ?>

this is what my index looks like:

< ? include('header.txt'); ?> <p> This is my content. This changes on all pages </p> < ? include('footer.txt'); ?>
Save each page as PAGENAME.php (pagename can be called anything you want). The page I just made was my index, so I saved it as index.php in notepad. All you have to do is make content for the rest of your pages and you're set.

Overview

Here's the three codes you should have once you're done:

Header.txt
<!-------------HEADER-------------> <title>My Site</title> <link rel="stylesheet" href="style.css"> <div style="position: absolute: top: 0; left: 0;"> <img src="main.jpg" width="610" height="470"/> </div> <p> This is my navigation <a href="link.htm">Link</a><br /> <a href="link.htm">Link</a><br /> </p> <!-------------HEADER-------------> </link>

content:

<? include('header.txt'); ?>

<p>
This is my content. This changes on all pages
</p>

<? include('footer.txt'); ?>


footer.txt:
<!-------------FOOTER-------------> <p> this is my copyright, bitches. 2005. </p> <!-------------FOOTER------------->

Change & Replace

Once you get tired of your layout, just make a new one, replace the headers and footers in your text documents and upload them. If you want to add or take something away in your navigation, just go to header.txt and edit it to your specifications and it will appear that way on each and every one of your pages. If you change anything in either of the documents, the changes will reflect on all of your pages.

Still lost?

01: save all documents as .php documents only
02: put the include codes on all pages
03: if you preview it in frontpage, dreamweaver, etc. it does not show up, but it still works
04: if you're bad at building layouts on notepad, use frontpage, and copy the headers and footers over to notepad.





copyright 2008 Maggie N