preloaded image preloaded image preloaded image

Menus with PHP Include

For those weary from updating menus in each and every page...

Tedious, unrewarding, and far too easy to make an error -- yes, we're talking about menu updates! It is the sad standard for many up-and-coming web designers to toil away for countless hours, particularly during initial development, to update menus on each and every page as different pages or directories are added to the lineup.

Gee, wouldn't it be nice if there were some way to update the stinking menu in just one place for all pages to use? Well as many of us know, there are ways to do this with javascript but then any user who wanders in without javascript enabled will be baffled. It's a good way to lose traffic and/or business, as the case may be. It can also be slow and can create page movement on load-up which is always unsightly. This is where PHP steps in once again to make life oh-so-sweet for us and to tackle this menu issue on the server's end of the transaction to present the same data smoothly to all users, regardless of javascript capabilities.

Here's how this works:

  1. create an external file for the menu -- this can be *.html, *.php, or even simple *.txt format (for purposes of this demonstration we will create a file named "menu.php" since I always like to do some tweaking with php automation eventually)
  2. save all existing and all new pages in your site as *.php files rather than *.html
  3. add a php "include" to each existing page and to each new page you make -- you will plop this right into the basic page structure right where the menu code would otherwise be located (delete the menu code in existing pages or else you will see two menus)
  4. when pages, directories, or file paths change simply update the menu file you made earlier -- no other edits are needed at all for basic menu maintenance

In practice, this is an example of how this works. Here is your basic page layout with a very simplified menu. We'll pretend this is your basic "index.php" file (your default home page):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title Here</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <div id="wrapper"><!-- Open Wrapper --> <div id="header"><!--- Open Main Menu --> <ul id="main_menu"> <li>menu item 1</li> <li>menu item 2</li> <li>menu item 3</li> </ul> </div><!-- Close Main Menu --> <div id="main"><!-- Open Main --> Content here... </div><!-- Close Main --> <div id="footer"><!-- Open Footer --> Footer here... </div><!-- Close Footer --> </div><!-- Close Wrapper --> </body> </html>

Assuming we have already updated all pages to use the *.php file extension, our next step is to create our "menu.php" file. This is the full extent of the code that needs to appear here for the menu above:

<ul id="main_menu"> <li>menu item 1</li> <li>menu item 2</li> <li>menu item 3</li> </ul>

Beautiful, now save this page to the root directory so it will be easier to find down the road. We're half way there already.

Now suppose we want to update our index.php page to use this menu with a php include. The syntax is dead simple and should be made the same for all pages, regardless of their directory or file paths. To do this with PHP we make use of a trick discussed earlier about PHP directory listings. Specifically, we'll be using $_SERVER['DOCUMENT_ROOT'] to find the root folder, where our new menu.php file now shrewdly resides. This is the basic single line of php code that should be placed in this same location on each and every file you want to have your menu placed into:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title Here</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <div id="wrapper"><!-- Open Wrapper --> <div id="header"><!--- Open Main Menu --> <?php include($_SERVER['DOCUMENT_ROOT']."/menu.php"); ?> </div><!-- Close Main Menu --> <div id="main"><!-- Open Main --> Content here... </div><!-- Close Main --> <div id="footer"><!-- Open Footer --> Footer here... </div><!-- Close Footer --> </div><!-- Close Wrapper --> </body> </html>

Now at this point we can update the menu for the index page and any other page that uses this line of code by simply updating "menu.php". We can go from a simple 3-item, single-layer menu to a multiple level menu (assuming you have the proper CSS in place) in one easy step with no worry about skipping a page or overwriting the wrong code with the slip of a paste command.