In the simple PHP include article I covered how to re-use one file in many pages. If you’re new to using PHP, read that first. Now it’s time to make file includes a bit more useful. In this article, we’ll include one file for main navigation, but make individual menu items “live” depending on the page they appear on.
This is an article in the “Designer PHP” series of guides to using PHP for interface production. Previously:
To perform this feat, we need to do three things:
- Declare a variable on each page to tell the menu what markup to display.
- Create a file with “live” and regular markup for each menu item. Add PHP to enable us to switch the markup according to the variable.
- Include the menu on every page.
Declare the PHP Variable
The variable declaration must be in every page the menu will appear on. It must be before the line of code that includes the menu so the menu can pick it up. I would normally insert it above the <!DOCTYPE… to separate the PHP from my HTML as much as possible. This is the variable declaration for the home page:
(This variable declaration or PHP statement has two key parts: The variable reference, or name $page, and the variable value "home".)
<?php
$page = 'home';
?>
<!DOCTYPE…
- The variable name
$pagedoes not change. You can change it to whatever you like, just make sure it’s the same on every page. - The value
'home'will be different for each page to tell the menu what to display.
I usually have the value match the area of the site, so in the example we’re building it will be 'home' on the home page, 'about' on the about page, and so on. You can change the value to whatever you like, and have as many values as you need for individual pages.
Create the Menu File to be Included
For our purposes, we’re going to create a dynamic menu for a fictitious site with three pages: “Home”, “About” and “Contact”. You can extend this to apply to as many pages as you like. This is the basic HTML for the menu:
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
We want two different sets of markup for each menu item: “live” markup and regular markup. In this example we’re going to attach a class to the “live” item — <li class="live"> — and wrap the link in an <em> to differentiate it even if styles are disabled. For example, on the home page, the “live” home menu item will end up looking like this:
<li class="live">
<em><a href="index.php">Home</a></em>
</li>
To switch between “live” and regular markup, we will use PHP “if, and else statements”. This is the menu HTML with PHP:
(White space and line breaks inserted for legibility. PHP is emphasised in red. Disable styles to see it in italics if you need to.)
<div id="nav">
<ul>
<?php if ($page == 'home') { ?>
<li class="live">
<em><a href="index.php">Home</a></em>
</li>
<?php } else { ?>
<li><a href="index.php">Home</a></li>
<?php } ?>
<?php if ($page == 'about') { ?>
<li class="live">
<em><a href="about.php">About</a></em>
</li>
<?php } else { ?>
<li><a href="about.php">About</a></li>
<?php } ?>
<?php if ($page == 'contact') { ?>
<li class="live">
<em><a href="contact.php">Contact</a></em>
</li>
<?php } else { ?>
<li><a href="contact.php">Contact</a></li>
<?php } ?>
</ul>
</div>
Copy the code to a new file in your editor. Save it as nav.php inside an inc directory in your site root.
I have deliberately separated the PHP and HTML as much as possible. There are other ways to achieve the same result, but this removes PHP completely from within HTML tags, hopefully making it easier to read and edit.
Let me explain what the PHP does: Each menu item is marked up in two different ways: the “live” version and a regular version. The variable we declared tells the PHP in the menu which to display. For example, if $page = 'home'; is declared, the if statement ( <?php if ($page == 'home') { ?> ) will display the “live” markup. If home is not declared then the <?php } else { ?> statement takes over, and the regular markup is displayed.
To make any of the other menu items “live”, you adjust the variable. The menu picks it up and switches the HTML. Simple. That’s our menu created and ready for use. The next step is to include it on every page.
Include the Menu
To do this we use the same technique explained in the simple include article, except this time we’re including the menu file, which we’ve called nav.php. This is the PHP you need:
<?php include 'inc/nav.php'; ?>
Insert that in each page at the point you wish the menu to be displayed. The path ( 'inc/nav.php' ) pointing to the nav.php file is relative — make sure you change it if your pages are not all in the site root. Each of your site pages will now look something like this (with the variable value * edited as required):
<?php
$page='*';
?>
<!DOCTYPE… >
<html>
<head>… </head>
<body>
<?php include 'inc/nav.php'; ?>
…content
</body>
</html>
That’s all! Now you can get to the fun bit of styling your menu with CSS. If you need to change anything, you simply edit the nav.php file and every page will be updated. Easy, isn’t it? Let’s end with a few tips about errors and security.
PHP Error Debugging
If you get a heap of PHP errors on a page instead of the menu, the chances are your include file path is wrong. Check it is pointing correctly to nav.php from the location of the page calling it.
It’s useful to know that you can navigate straight to the include file directly in your browser and see the markup.
(E.g. http://yoursite.com/inc/nav.php)
If the file path is wrong, you will get a 404 error.
If no menu items are active, or one is incorrectly active in a certain page, check the variable declared at the top of the page. Does it match the on in the if condition that precedes the item you want “live” in nav.php?
If you’ve done all that, and you’re still having problems, check your syntax line by line. The chances are you’ve missed a tiny mistake. It’s a pain but a good way to learn.
Security
I grabbed a moment with web application security guru, Chris Shiflett to have him check my PHP. This is what he said:
Whenever you’re working with a server-side programming language such as PHP, it’s good to be aware of potential security problems, because a simple mistake is all it takes to create one. If you follow Jon’s example, you’re safe, but what happens when you need to modify it to suit your own unique needs?
Rather than complicate a wonderful tutorial, I’ll just point out that you should research further before doing either of the following:
- Add any additional PHP code to your includes.
- Use a variable in your include statement, e.g.
include "inc/$template".If you need to do either of the above, you should first read a little more about remote code execution.
Further Reading
Can You Translate?
After a wonderful response to the em and elastic layout article, I’d love to hear from anyone who’d like to translate this, or any other article in the series. I’ll be happy to host your work, like the previous Italian translation, or you’re welcome to publish it yourself. Just drop me a line.
13 Comments
1. By Tracy Osborn on 28th Feb ’08 at 21:48pm
2. By inspirationbit on 29th Feb ’08 at 08:16am
4. By inspirationbit on 29th Feb ’08 at 19:32pm
5. By Nour on 4th Mar ’08 at 04:52am
6. By maZtah on 6th Mar ’08 at 13:54pm
7. By Leon Paternoster on 9th Mar ’08 at 05:56am
9. By Leon Paternoster on 9th Mar ’08 at 09:14am
10. By Leon Paternoster on 9th Mar ’08 at 19:43pm
11. By Mis Noma on 21st Apr ’08 at 13:27pm
12. By Mis Noma on 21st Apr ’08 at 13:30pm