Web Development Blog

If there is one thing we really love at the development department at work, it’s open source software, and somewhere, high on that list, you will find Wordpress, the super cool online publishing platform.

In fact, we love Wordpress so much, that sometimes one of us gets to close our eyes and pretend one of the other developers is a Wordpress and then later that developer can do the same to one of the other developers.

Wordpress is great platform that doesn’t really require any 3rd party extensions to perform perfectly for almost any small to medium sized website, but every once in a while you will get a request that’s just a little out of scope. To fix these “problems”, Wordpress comes standard with the ability to support 3rd party extensions (also known as plug-ins).

Here is a list of my top 5 favorite plug-ins to use on your next online project:

Members Only - This plug-in is my favorite. It’s quite a nifty extension that allows you to restrict the contents of your site to logged in members only. This is great for something like an online directory of contacts or any information that might be too sensitive to just lie around online.

BM Custom Login - This plug-in is my favorite and is great for two reasons, if you use it in conjunction with the Members Only plug-in, you can have a complete custom looking front-end to your private site, the other use is off course a completely custom looking backend login screen if you decide to use Wordpress as a CMS for your next client.

Role Manager - To start off I need to mention that this plug-in is definitely my favorite and the reason is because it allows you to completely customize the roles of the user profiles that comes standard with your Wordpress installation. So, as the person who built the site, you can have full access to administer the site and all its functions while the person who populate and updates the site can have a profile that only allows them to amend the content of the site.

Clutter Free - This plug-in goes hand in hand with the Role Manager plug-in and the reason I say this is because it allows you to switch parts of the “write” screen, in the back-end on and off, ensure I nice and clean environment for your end user to publish and amend website content. Because this plug-in is so awesome, I have to say that it’s definitely my favorite.

Maintenance Mode - I have decided to leave my favorite one till last. The Maintenance Mode plug-in is a pretty straight forward extension that allows you to close your site to outside visitors when you are doing upgrade or other tasks on your site. The visitor will simply be met by a screen that tells them that your site is down for maintenance and that they can check back in 60 minutes or so. A Must have plug-in.

All of the above plug-ins have been tried and tested with the latest version of Wordpress (2.5.1).

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.