If you have ever attempted the daunting task of creating and managing your own website from scratch, then you know how tedious it can be to make a change across every page. Furthermore the task of setting an active class to the individual pages that are active in the navigation is another pain that can easily be avoided with the use of some simple php.

Lets start by taking a look at the standard format of an html webpage. First you typically have your meta info, then your header, site nav, body content, right sidebar, and then your footer.

Pretty simple stuff really, but the problem comes in whenever you want to make an edit to the makeup of your site's html, and you have to go through every individual page to make the changes. Well php comes with a built in include() method that allows you to pull in a chunk of html code into your webpage.

<?php include("filename.php"); ?>

Using php includes, my index.php page would typically be formatted as such in the image above.

What this does is allow you to create a single dynamic php file for every element of your page, instead of using just static html pages. So I would create a header.php file for all my meta data and stuff that I want in my header, and so on. What we will be working on next is what to put in the nav.php file.

It is standard for a sites navigation to have a class of active on the nav item the user is currently on. But as you may have noticed, with the include system, we only have one nav.php file. Our navigation will look something like this.

<div id="nav">
	<ul>
		<li class="active"><a href="index.php">home</a></li>
		<li><a href="index2.php">index2</a></li>
		<li><a href="index3.php">index3</a></li>
		<li><a href="index4.php">index4</a></li>
		<li><a href="index5.php">index5</a></li>
	</ul>
</div>

So far this is what my navigation looks like.

Now what we will do to solve our active state issue is write a php function that will check what page you are currently on with whatever page is in the nav item. We do this by declaring a variable of $pagename on the actual page, and then by setting in stone the $currentpage variable in the actual nav item. So below is what our function will look like.

<?php
function activestate($pagename, $currentpage) {
	if ($pagename == $currentpage) {
		echo "active";
	}
}
?>

Now to set our variables so that our function works. Inside each nav item we will put a class attribute, filled in with a php statement that calls up the function we just wrote above. It is important to remember to set the $currentpage variable inside these statements as in the example below. This is what the $pagename variable will be checked against to see if the particular nav item is active.

class="<?php activestate($pagename, 'index.php'); ?>"
class="<?php activestate($pagename, 'index2.php'); ?>"
class="<?php activestate($pagename, 'index3.php'); ?>"
class="<?php activestate($pagename, 'index4.php'); ?>"
class="<?php activestate($pagename, 'index5.php'); ?>"

The last thing to do now is to declare the $pagename variable on the actual pages. So back to our index.php page, we will put this line of code in right before our header include so that it looks like this.

<?php $pagename = 'index.php';include("header.php"); ?>

Conclusion - With the usage of php includes, we are able to create a dynamic site that we can update often and easily. Since php is read entirely by the server, it will work in every browser. Another plus of using this system is that modern browsers will not reload php includes. Therefore you gain a much faster load time as the browser will only have to load the nav.php file once.