Check out my brand new PSD site XD Content Domain About me, Mel. Home :]

Home > Content > Tutorials

PHP Includes

Incorperating PHP Includes into your site is simple and the best thing is you don't even need to know PHP. Not only do PHP Includes help cut down time when changing layouts but they also make your pages cleaner. and not so crowded with coding and such.



What we'll be doing is pulling apart a page and sectioning it into parts: a header and a footer.

PART 1
Open Notepad or which ever editor you use. Create a new file. This is going to be our header Everything between your <head> tags can go into your new Header file. So, that means raw CSS or your CSS link, your page title and anything else you may have hidden among those tags. Copy and paste it all into your new HEADER file. Don't forget to include the opening tag too.

As an example, this is what your HEADER file might look like so far...

<head>

<title>Page Title</title>
<link rel="stylesheet" href="yourcss.css" type="text/css">

</head>


We're not stopping yet though! Because that's not the only coding we can add. Say you need to add a new affiliate, what a pain in the ass to have to individually change each page that has your sidebar on it. Another great thing about PHP Includes is you can put anything in them. Your header image and your sidebar can both be included in your new file because as you frequently are changing both (whether adding new additions or changing a layout) it cuts time dramatically because you only need to edit a single file!

So add your header details and all your sidebar coding (if your using a container, don't forget to include <div id="sidebar"> before your sidebar HTML and </div> after it) And its also importent you not forget to add a <body> tag before your sidebar and header.

so now, your HEADER file might be looking like this:
<head>

<title>Page Title</title>
<link rel="stylesheet" href="yourcss.css" type="text/css">

</head>

<body>

<div id="header">
<img src="headerimage.jpg">
</div>

<div id="sidebar">
<h1>Welcome</hi>
Welcome to my site!

<h1>Navigation</h1>
<a href="http://elusive-dreams.org">Link 1</a>
<a href="http://elusive-dreams.org">Link 2</a>
<a href="http://elusive-dreams.org">Link 3</a>
</div>

We currently have two open tags - our <body> and <head> tags are missing their closing tags </body> and </head>. But we'll cover that later on.

You can now save your file. File > Save As... Name it "header.php" (exactly as I've typed it) The quotes are very important because this will save your file as a .php extension so be sure to include them. Now upload that file to your server. Make sure its in the same folder as your pages. Trust me when I say that it will make things a whole lot easier. I organize everything in my directory but I leave every single page on the main directory. If your stubborn and still want to use PHP with subfolders, you'll have to do a google search because I've not used PHP Includes + subfolders before.

Go back to the page you copied all your coding from and delete the parts you pasted into your header.php file. Its no longer needed because we have it in that file.

We can forget about our header.php file for the time being and now focus on creating our footer.php file. Open a new notepad file and, just like the header.php file, everything in your footer can go in this file. If you're using a div container for your layout, dont forget to include the <div id="footer"> and </div> tags.

If you dont have a footer you could skip this step. But its important to read the next paragraph.

As I said before, even if you don't have a footer you don't really have a reason to have this file. Remember our lonesome <body> and <head> tags we added to our header.php file? Well now we need to close those tags.

So add </body> and </head> to the file. Looks kind of silly having a single closing tag so alternatively you could just discard this footer file and instead add the two tags at the end of every page we have content on. But if you would prefer to have a footer, then add the tags to it.

Save the file as "footer.php" with the quotes as explained earlier. Upload to the same place as your header.php file. You can now delete your original footer HTML from the page you got it from.

PART TWO
Now we need to set up our pages. For examples sake, lets say the first page we need to edit is our index page. We've already deleted the unnecessary coding we added to our .php files. So by now you should have just your content and nothing else.

We need to add...
<?php include('header.php'); ?>
to the top of our page, followed by...
<?php include('footer.php'); ?>
at the bottom. So you'll have something that looks like this:
<?php include('header.php'); ?>
<div id="content">

your pages content would be here.

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


And that's it! The annoying part is now going and converting each and every page with the above PHP codes. You don't need to create a new header.php and footer.php file for each page. Instead, you use the ones we uploaded. When you need to change your layout or add an affiliate you can simply open your header.php page and edit it and, once saved, every page will see the change.

And you'll also have to change the extension of each page that you're using PHP includes on to .php for your PHP includes to work. For example, index.html would need to be changed to index.php, domain.htm would need to be changed to domain.php and so on.

If you're still having trouble with grasping PHP includes, please contact me here and I'll offer further help!