Using PHP Includes for Global Navigation Links

If you look after any large sites you will likely know how frustrating it can be when you need to make even minor changes. This can be something as simple as adding a new page to the global navigation.

Traditionally you would need to manually edit every page on the site by adding the relevant code to each page, then uploading each page to your server.

By using PHP includes you will be able to create a single file which is automatically called on each page on the site automatically server-side. Once you have edited each page and included the PHP include code, you will only ever need to edit one file to make changes across the whole site.

The following tutorial will show you how to create a PHP include file for your global navigation, but the principle applies to any other content that you want to add to every page on your site.

Simple PHP Include File for Global Navigation

Firstly you will need to create your global navigation in HTML format in a blank text file. Once you have created the file remember to save it with the .php file extension. I generally call it navigation.php as the filename is quite self explanatory.

<ul>
<li><a href="http://www.example.com/">Home</a></li>
<li><a href="http://www.example.com/services/">Services</a></li>
<li><a href="http://www.example.com/blog/">Blog</a></li>
<li><a href="http://www.example.com/contact/">Contact Us</a></li>
<li><a href="http://www.example.com/about/">About Us</a></li>
</ul>

The above code is a very basic example of a global navigation list that would generally be displayed at the top of every page on the site. Below is the HTML with the PHP include file in position. The HTML file below should also be saved with the .php file extension.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<div>
<!-- Global Navigation -->
<?php include("/home/username/public_html/navigation.php"); ?>
</div>
<div>
<!-- Main Content -->
</div>
</body>
</html>

From the code above you will see a short line of PHP code inserted into the HTML where the global navigation should be displayed.

On closer inspection the line of PHP code used for the include is as follows:
<?php include("/home/username/public_html/navigation.php"); ?>

You will need to specify the absolute path to the PHP file within your server file structure. For a file included globally across the site it is a good idea to include navigation.php within the root folder of your site. The absolute path will vary depending on your webhost and if it throws up error messages you may need to contact your host to request the absolute path for calling a PHP include file.

The above example is a very simple way to implement a PHP include file within your pages. Once you have tested the code above, you can go through the pages on your site and delete your global navigation code and replace it with <?php include("/home/username/public_html/navigation.php"); ?>. Now when you need to add or remove pages from the global navigation you simply edit the navigation.php file and upload it to your server. This will now automatically change the content on every page that you have added the PHP include file to.

More Advanced PHP Include File Options

The above code shows you the basic principle of using a PHP include file, but what if you want to have an “on state” where your link is styled differently when you are on that page, or you want to show an additional link on one page of your site but not on the rest of your site? Both these scenarios can be achieved using PHP.

Style link for the page you’re on using PHP & CSS

To style the link for the current page, you need to give each page a unique title. To do this, you need to define a variable by using the following code at the beginning of each page <?php $currentPage="Home" ?>. Each page needs a unique name, so in the above example you need to name the Homepage, Services, Blog, Contact Us and About Us pages.

The only thing left to do is to add some CSS properties to your stylesheet for the class ‘on’. This could be a different colour. In the example page below above I have included CSS within the head section of the page which will style the links to red when the visitor is on that specific page.

The following example shows how to uniquely name each page:

<?php
$currentPage="Home";
?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
.on {
color:red
}
</style>
</head>
<body>
<div>
<!-- Global Navigation -->
<?php include("/home/username/public_html/navigation.php"); ?>
</div>
<div>
<!-- Main Content -->
</div>
</body>
</html>

Now the navigation.php file needs to be edited so that when the visitor is on the Homepage, a unique class is added to the link for that page. The navigation.php file should be adjusted as follows:

<ul>
<li><a href="http://www.example.com/" <?php if ($currentPage=="Home") echo "class=\"on\""; ?>>Home</a></li>
<li><a href="http://www.example.com/services/" <?php if ($currentPage=="Services") echo "class=\"on\""; ?>>Services</a></li>
<li><a href="http://www.example.com/blog/" <?php if ($currentPage=="Blog") echo "class=\"on\""; ?>>Blog</a></li>
<li><a href="http://www.example.com/contact-us/" <?php if ($currentPage=="Contact Us") echo "class=\"on\""; ?>>Contact Us</a></li>
<li><a href="http://www.example.com/about-us/" <?php if ($currentPage=="About Us") echo "class=\"on\""; ?>>About Us</a></li>
</ul>

Using the above principles you can take it a step further by replacing the link with ‘#’ when the visitor is on a specific page.

Remove the link on current page

You will notice in the following example if and else logic has been used. Edit the navigation.php file as follows:

<ul>
<li><a href="<?php if ($currentPage=="Home") echo "#";
else echo "http://www.example.com/"; ?>" <?php if ($currentPage=="Home") echo "class=\"on\""; ?>>Home</a></li>
<li><a href="<?php if ($currentPage=="Services") echo "#";
else echo "http://www.example.com/services/"; ?>" <?php if ($currentPage=="Services") echo "class=\"on\""; ?>>Services</a></li>
<li><a href="<?php if ($currentPage=="Blog") echo "#";
else echo "http://www.example.com/blog/"; ?>" <?php if ($currentPage=="Blog") echo "class=\"on\""; ?>>Blog</a></li>
<li><a href="<?php if ($currentPage=="Contact Us") echo "#";
else echo "http://www.example.com/contact-us/"; ?>" <?php if ($currentPage=="Contact Us") echo "class=\"on\""; ?>>Contact Us</a></li>
<li><a href="<?php if ($currentPage=="About Us") echo "#";
else echo "http://www.example.com/about-us/"; ?>" <?php if ($currentPage=="About Us") echo "class=\"on\""; ?>>About Us</a></li>
</ul>

These are just a few basic ways to use PHP includes for global navigation and subsequently defining extra variables. If you have any specific requests please leave a comment and I can create a separate tutorial.