Creating a Header/Footer to be Used on all Pages

by Curtiss   |   last updated April 7, 2013   |   General Tutorials · Web Tutorials ·

I referenced this in a post from a few months ago, but never bothered to expound on it. You cannot use cascading style sheets (CSS) to create headers, footers or menus that will be re-used on all of your pages. Instead, you have to use server-side includes (SSI).

There are a handful of ways to use SSI, and they are available in most all of the Web development languages used today. Although I think the use of repeating headers and footers is somewhat outdated, opting more for using templates that dynamically include your content, I’m going to try to teach you a few ways to include your headers, footers and/or menus on all of your pages.

Standard SSI

Standard SSI requires little more than an apache Web server (which is the standard when running on a *nix platform) and access to either your httpd.conf file (which is the main file used to configure an apache Web server) or the ability to use htaccess files to set specific configurations.

You can find a good tutorial explaining how to enable SSI on your Web server at SSI Developer.

Using SSI

To use SSI, all you need to do is create a single HTML file that contains just the HTML you want to repeat. For instance, if you want to use the same menu on every single page, put only the HTML of that menu in its own HTML file. I will create an example:

<ul id="navmenu">
<li><a href="page1.shtml">Menu Item One</a></li>
<li><a href="page2.shtml">Menu Item Two</a></li>
<li><a href="page3.shtml">Menu Item Three</a></li>
<li><a href="page4.shtml">Menu Item Four</a></li>
</ul>

Do not include any extranneous information in the file, such as a doctype, a “head”, etc., unless you plan to use this include file to declare that information on all of your pages.

Save that file as something sensible, like “navmenu.shtml”. Then, edit each of the files into which you would like to include this menu. In each of those files, wherever you would like your navigation menu to appear, you simply add the following line of code:

<!-- #include file="navmenu.shtml" -->

Keep in mind that the file’s location will be relative to the file in which you include it. Therefore, if “navmenu.shtml” is in a different directory than the file you are editing, you will need to include the full relative path to navmenu.shtml.

If you want to use a path relative to the root of your Web server, you will need to use “virtual” instead of “file”. Virtual is also useful if you want to include CGI scripts in your pages.

VBScript Includes

VBScript uses the same syntax to include files as standard SSI. To include a file within a VBScript ASP file, you simply need to use the same line of code I used above.

<!-- #include file="navmenu.shtml" -->

Again, if you want to use a path relative to the root of your Web server, you will need to use virtual instead of file.

<!-- #include virtual="/navmenu.shtml" -->

Keep in mind, however, that your include calls need to be made outside of your VBScript code tags. You cannot use include calls inside of code tags.

PHP Includes

PHP has its own method of allowing you to include files, and it is rather robust. PHP actually offers five traditional ways for you to include content in a file (as well as a few other non-traditional methods).

The main calls I will discuss in this article are include(), include_once(), virtual(), require() and require_once().

include and include_once

Include and include_once are the standard ways of including one file inside of another. As the names would imply, include will execute each time the containing script is called, while include_once will only execute one time during the PHP session. This can be helpful if you include one file more than once in a particular page, and that file happens to call another include statement to include various functions or variable definitions. Other than that, there is not much difference between the include and include_once functions. The usage is very simple:

include('/path/to/my/file.php');

The path you use in your include statement can be one of many different types of paths. The path can be relative to the file in which the include function is called, it can be the absolute path on your Web server, it can be a URL (if url_fopen wrappers are enabled) or it can be a path relative to the include directory that’s configured in your PHP installation. PHP will automatically attempt to locate the file in all of those locations before giving up. The standard usage, however, is to use the absolute path to the include file.

require and require_once

Require and require_once are very similar to include and include_once. However, if PHP fails to locate the “required” file, the interpreter will throw a warning letting you know that the file could not be located. With standard include statements, no error or warning is thrown if the file can’t be found.

virtual

Virtual is really an apache command that’s executed through PHP. It cannot be used if you have PHP running as a CGI rather than as an apache module.

Virtual is generally used to execute perl (or other CGI) commands within your PHP file. The usage is similar to the include and require statements.

Javascript Includes

Although I am discussing these in this article, it is important to note that javascript includes are actually client-side includes, and are completely dependent on the user’s software configuration (as is any javascript).

However, since I was writing an article explaining how to include files inside of other files, I though I would touch on javascript includes.

A javascript include is exactly the same as using an external javascript file. However, typically, when using javascript as an include, you would be using the javascript to actually output something into the browser rather than just storing and running various functions.

<script type="text/javascript" language="javascript" src="navmenu.js"></script>

If you are planning to use javascript includes for any reason, remember that the code in your javascript file has to be javascript. In other words, rather than simply using:

<ul id="navmenu">
<li><a href="page1.shtml">Menu Item One</a></li>
<li><a href="page2.shtml">Menu Item Two</a></li>
<li><a href="page3.shtml">Menu Item Three</a></li>
<li><a href="page4.shtml">Menu Item Four</a></li>
</ul>

you will need to create that HTML using javascript, similar to:

var navmenu = document.createElement('ul');
navmenu.id = "navmenu";
for(var i=1;i<=4;i++) {
var navitem = document.createElement('li');
var navlink = document.createElement('a');
navlink.href = "page"+i+".html";
navlink.appendChild(document.createTextNode("Menu Item "+i));
navitem.appendChild(navlink);
}
document.body.appendChild(navmenu);

Using javascript includes can be helpful in a number of ways, but should be avoided for any heavy lifting, simply because it is completely dependent on your visitors.

Conclusion

I hope this tutorial has been somewhat helpful. I only touched on very basic information, as I know there are already a lot of great tutorials out there going into great detail on each of the items discussed in this article. However, it’s actually somewhat rare to see any information about all of them together.

As you can see, there are a number of ways you include your headers, footers and/or navigation menus in all of your pages. You should choose the method that works best for you, and is easiest for you to implement.