Web Development Blog

So you got this totally awesome project to code, it’s not CMS driven and it will probably have to happen in HTML. There’s just one problem, you have 4 days to roll out the entire site, and did I mention the site is composed out of approximately 40 individual pages?

In this article, I am hoping to show you a simple technique, using PHP, that will make the project a little easier to manage and hopefully also reduce the amount of time spent on updating the site’s navigation across the +-40 pages.

What we are going to be coding is a site-wide navigation that can plug into all the pages. It will also do an “active” state for the active page that you are on.

OK, the first thing we do is we rename all of our html pages to php, next, we create a folder called “includes” and create a PHP file inside called something like navigation.php.

Now, go to your coded page that already contains the navigation you want to replicate across all the pages and cut it out of the code and paste it in the navigation.php file you just created. (Just that code snipped, nothing else)

What you need to do now is to include this navigation on all the pages so that you only have to edit it in the navigation.php file to edit the navigation across all of the site’s pages. To do this you can simply replace all instances of your current navigation with the following line of code:

<? php include(”includes/navigation.php”); ?>

We are half way there. To make a navigation change, you now only have to go to navigation.php to do the change and it will reflect across all of your site’s pages.

For some people that might be enough, but let’s face it, if you want to code a site that’s worth anything, the navigation needs to reflect your current page.

Now, for your navigation.php file to know on page it’s being included, you need to identify all of your pages with a unique name or id. (I tend to use the name of the file, minus the extension. This keeps it simple). To do this, simply add the following line to the very top of every single page: (Yes sailor, the VERY top, above the doctype)

<?php $pagename=”unique name here”; ?>

So now that you have done that, we just need to edit the navigation.php so that it can recognize the individual pages and then apply the appropriate styling as needed.

Let’s do this!

So, let’s say that you coded the navigational links embedded in list items and to mark the link active for a certain page you need to add class=”active” to the <li> of that specific link. Your navigation.php file can now do this automatically. You can simply add a small chunk of code to, in this case, the <li> tag, so that it looks something like this:

<li<?php if ($pagename==’unique name 1′) echo ‘class=”active”‘; ?>><a href=”unique.php”>Unique Page 1</a></li>

See… easy! This is all you need to do to save a ton of time and cut out a lot of monotonous editing across the entire site when a request for changes gets thrown your way.

Personally I have been using this method for at least a year and it probably saved more hours than needs to be mentioned.

Oh yes, and one more thing, don’t get fooled by the fact that we used it in a site navigation, if you allow your imagination to run wild you will soon see that this can go way, way, beyond that…

* Off course, by everyone, I mean somebody with some sort of grasp of code (even a little bit will be sufficient). This off course, almost completely excludes account managers and 87%** of designers.

** OK, OK, I completely made up that number, but it sounds vaguely genuine when it’s an odd number like that.