Adding External Navigation to Your Website with PHP

It’s no fun to go to add a brand new webpage to your site, only to realize that you are now faced with the monotonous task of updating every single one of your webpages with the exact same code. One solution to this problem is to use an external navigation scheme, which can be done in JavaScript or PHP.

It’s perfectly fine to use JavaScript to do this, and I have a tutorial in doing so here, but it has its downfalls. One of the most significant drawbacks to using this method is that JavaScript can be disabled by the end user, which can render your website unusable. To prevent this, we’re going to need a more robust solution written in PHP.

PHP is wonderful for this kind of work because, like the JavaScript navigation setup, it only requires that one file be edited to make changes across your site. To get started, you must first have a web host that provides PHP support. All major paid hosts (I highly recommend NearlyFreeSpeech), and some free services such as 000WebHost provide this support. Pitt, unfortunately, does not. Personally, I’d recommend hosting with another service, if only for more storage than you’d get with Pitt and PHP support. If you’re still interested and have the hosting to do so, read on!

First, you’re going to want to prepare your website to work with PHP. It’s as simple as opening your webpages and re-saving them with the file extension “.php” rather than “.html”! Keep in mind that this needs to be done for every page on your site.

Our first PHP webpage.

Our PHP webpage, which behaves just like an HTML page would.

One thing you may notice is that I went out to my host to display the page, rather than pull it up from my hard drive. This is because to use PHP, you need a PHP server. Hosts like this have the functionality by default, and if you want to test your website locally, I’d recommend using XAMPP.

With all the technical stuff out of the way, let’s get into actually writing some code. Below, we have our standard PHP/HTML amalgamation, with a standard HTML5 navigation layout.

Our initial code.

Navigation code before moving it to an external file.

To make this work with PHP is trivial, even more so than with JavaScript. All we have to do is cut and paste the navigation code to a separate file (Mine’s named navigation.php, and it’s in the same directory as the home page). and replace it with the code below where you took the navigation code from in your webpages. Make sure to do this for all of your webpages on which you want navigation.

Our PHP nav include code.

Our PHP Navigation include code.

This code references the file “navigation.php” and tells the browser PHP server to look there, where it will find the code below.

Navigation Code

Our navigation code.

This code is basically injected into your webpages where you placed the PHP include statement, and the web browser reads it as HTML. Without any styling, this is the result of your brand new external navigation.

Our completed navigation.

Our completed navigation, sans other content.

New Code

The source code of our new PHP navigation include. (The purple line is where the changes were made)

And there you have it, a navigation scheme where only one file needs editing to make changes across your entire website! And remember, the code coming from PHP is no different to the browser than HTML, so it can be styled and worked with just like you would with HTML.


~ by ryanwcraig on September 10, 2012.

One Response to “Adding External Navigation to Your Website with PHP”

  1. Wow, a lot of information here! Try cutting back on the length a bit, too much technical jargon will confuse readers! Overall great job!

Comments are closed.

%d bloggers like this: