BlakeWatson.com

Note: this article was originally posted on my personal blog, Knights of the Square Table.

Sometimes you may find yourself copying and pasting a section of code on all of your pages. This is a common way to put a navigation menu on every page. The problem with this method is that if you want to change the menu (or whatever it may be), you have to change it on all the pages. Give Control C and V a break! There’s a much simpler and easier way using PHP.

Consider the following example. You want the following bit of code on every page.

<div id="menu">
  <ul>
    <li><a href="about.html">About Us</a></li>
    <li><a href="resources.html">Resources</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

First, copy and past the code into a file named menu.html (or any name). Note that there should only be the code you want to reuse in this file. You do not need a complete html page structure. Now that you have your menu in its own little file, you can use one line of PHP on every page that you want to put the menu. However, your pages will need to be PHP files in order to run the PHP code. But don’t fret! In our case, this is as easy as changing the file extension of your pages from “.html” to “.php”. This change will not affect the way your page is displayed. It will simply allow you to run PHP code in your page.

Now that you have the ability to run PHP code in your pages, it’s time to insert the code you need. In each file you that you want to have the menu (be sure you’ve changed its file extension to “.php”), delete the old menu code:

<div id="menu">
  <ul>
    <li><a href="about.html">About Us</a></li>
    <li><a href="resources.html">Resources</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

In its place, put this line of code:

<?php require("menu.html"); ?>

The require function will look for the file you specify and replace itself with that code. In other words, when your page is displayed, every occurrence of require("menu.html"); will be replaced with the code from menu.html.

If you’re wondering why in the world you would go to all that trouble just to write the same code that was already there, then you’ve missed the idea. Since the menu code will now come from the menu.html file, when you want to change the menu code, you need only edit the menu.html file. No more copying and pasting!

But wait, there is one problem. Examine menu.html again.

<div id="menu">
  <ul>
    <li><a href="about.html">About Us</a></li>
    <li><a href="resources.html">Resources</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Your links still point to html files. Remember, you’ve changed your files to PHP files. Just change those extensions in the links to “.php” and you’re good to go. The new menu.html file should look like this:

<div id="menu">
  <ul>
    <li><a href="about.php">About Us</a></li>
    <li><a href="resources.php">Resources</a></li>
    <li><a href="links.php">Links</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div>

That’s it! It took far more time to write this post than it would to implement this solution over a handful of web pages. You can use this solution for all sorts of recurring HTML code. Enjoy.