Simplifying Navigation with PHP Includes
Anybody who has ever created a website with more than one page knows what a pain it can be to update. If you want to change the header of your site, for example, you might need to make changes to tens, or even hundreds, of pages, a long and arduous process. In this lesson we take a look at simplifying navigation (and other things) with PHP includes.
What are PHP includes?
A PHP include is a way of including one PHP file inside another PHP file. This means that you can keep certain parts of your site consistent across multiple pages, as well as only having to update one file to make the change across your entire website.
How are they useful?
PHP includes are great for lots of things: all your pages might share a common header, for example; you might have some standard boilerplate text down the bottom of your page that is the same throughout your site; you can even use it to for your AdSense boxes - put the AdSense code into a separate file and then just include it in all your pages.
For each of these things, if you need to update (for example) the header, all you have to do is edit the one header file, and every PHP file that is automatically including it will also update.
Where PHP includes are really useful, though, is in navigation, particularly for article sites where you might be adding articles all the time, and you want the navigation to display on all the pages. With a PHP include, all you need to do is add a link to your new article in one file, and it’ll change the links on all your pages.
Simplifying navigation with PHP
Before you do this:
- Your site needs to be hosted on a server that supports PHP. Usually it will but, if you experience problems in getting this to work, you should check with your hosting provider.
- You need to know how to view and edit the HTML of your web page. You can do this by opening your web pages in a text editor like Notepad, or by using the "Source" view in Dreamweaver.
Step 1: Create the navigation file
- Open up one page of your website that has your navigation on it.
- Copy the navigation into a new HTML file. You’ll probably want to do this in source view... Just grab all the HTML that comprises your navigation and paste it into a new file. If you’re using an HTML editor like Dreamweaver, be sure to delete all the stuff that Dreamweaver puts into a new HTML document by default. (This means the <html><head><body> tags, etc... you want a completely blank page before you paste your navigation in.)
- If you've got multiple levels to your website (lots of things in different directories) then make sure that the paths you're using in your links are relative to the current directory of your page. For instance, if you want to link from a page in your root directory to a page at www.yoursite.com/articles/greatarticle.html delete the domain name part of your address so that it begins with a slash / In this case your link would look like <a href="/articles/greatarticle.html"> We have to do this because you're including the same file in a bunch of pages that are at different levels in your website.
- Save this new file as "navigation.php". To keep it simple, we’ll save the file in the same directory as the original file.
Step 2: Insert navigation into your page
Because you now have all this info in a separate file, you can delete the navigation from your first file. Be sure to only delete the stuff that you’ve duplicated in the second file! Where this original code was, write:
<?php include ("navigation.php"); ?>
Save your original page as index.php
IMPORTANT: Unless you do some fiddling in your htaccess file on your server (which is beyond the scope of this lesson), you’ll have to save your pages as .php before they’ll work.
Step 3: Upload and test your page:
You probably won't be able to preview the page on your computer because it needs the PHP power of your web server to make it work. Sometimes Dreamweaver can do it, but you're often better off just uploading the page and seeing if it works.
Be sure to upload both files, and double-check that you don't overwrite anything on your website – just in case it doesn't work!
If everything has gone well, your page should look exactly the same as it did before, so it’s probably not going to be impressive. However, the point is that your navigation is now being controlled from one file
Step 4: Insert the include into all your other pages.
Now you can go through and delete the navigation from your other pages and insert the PHP code in its place.
The only tricky thing here is that you may need to change the path pointing to the include file depending on where you're trying to insert the include.
For instance, our first page used this bit of PHP to insert the include:
<?php include ("navigation.php"); ?>
That assumes that the include file is in the same folder as the file you're working on. If the include is in another folder you might need to do something like this:
<?php include ("../includes/navigation.php"); ?> OR <?php include ("subfolder/navigation.php"); ?>
You can't just use our friend the backslash / to say "go to the top of the site and start looking from there" because it doesn't work with PHP. You'll either get some ugly error messages, or the navigation just won't appear in the page. You need to make all your paths relative to the document you're in, and use a bunch of dots and slashes to say things like "go up one directory, then another, then down into the includes folder..." etc.
(If you need more help with referencing files in other directories, we go into a bit more detail in the web design troubleshooting lesson.)
Step 5: Include away!
Remember that this isn't just for use with navigation: you can create includes for your footer links, your header images, or anything you use often on lots of pages. You can also include includes inside includes if you like! Just don't let them become too unruly, or you'll be right back where you started.
In this lesson we looked at using PHP includes to make site maintenance easier. The five steps we looked at for using PHP includes were:
- Creating the navigation file
- Inserting the navigation into your page
- Uploading and testing the page
- Insert the include into other relevant pages
- Using includes wherever you need!