Intro to SSI (Server Side Includes)

We are often asked by webmasters how to repeat web elements across their pages without have to edit each static page individually each time they need to make a change. External CSS is the answer to your web pages' cosmetic elements (fonts, colors, borders, padding, etc.), but SSI is a great tool when you want to use the same web element (navigational menu, page text, etc.) across multiple pages, but you do not want to change it on every page each time you need to add, delete or modify.

For example, let's imagine that you have a navigational menu that consists of five hyperlinks. You want to add a sixth link but your site consists of over 500 pages. With SSI you edit one file that contains the HTML code of your navigational menu (only), upload the revised file to your site and all pages are changed instantly. Yes, it is very similar to the magic of external CSS that we continually recommend. ;)

To be able to use SSI, your web hosting service must be able to support it. Most quality hosts automatically enable SSI on their servers these days. Many hosts require that you use a .shtml extension on your pages. Although some hosts can enable your server to utilize SSI with any page extension.

If you are not sure if your server supports SSI, no problem. Before contacting your hosting company, test it yourself.

Create a file and name it test.shtml. Within this file place the following code. Wherever you place this code is where the file "mytest.ssi" will be displayed (included).

<!--#include virtual="mytest.ssi"-->

Now create the mytext.ssi file that will be pulled into your test.shtml page. Put whatever you wish into the mytext.ssi file. If you are using it for a navigational menu, your code might look something like this:

<a href="index.shtml">Home</a> | <a href="about.shtml">About Us</a> | <a href="contact.shtml">Contact Us</a>

Important: You can use most any HTML code in your .ssi file. But do not use the standard BODY, TITLE, HEAD tags. Use only the HTML code for whatever web element you want to appear within the section it is being pulled into.

You are not limited to using the .ssi extension for your include file. You can use .txt, .htm, .html etc. Just be sure it does not declare the standard BODY, TITLE, HEAD tags or you will receive an annoying error message.

Name your include files something memorable so that you know what they are as soon as you see them. In other words, naming your navigational menu 1.ssi may not be the best choice unless you only have one .ssi file.

Save both files and upload them to your server to test whether your hosting company has SSI enabled for you. Load your test.shtml file into your browser, like this: www.yoursite.com/test.shtml. If it pulls the contents of the mytest.ssi into it, TADA! ... it worked!

If it does not work and you have followed these directions exactly, contact your hosting company to find out their requirements and/or limitations.

On another positive note, it is fairly easy to convert most of our web templates to use SSI. By simply copy/pasting bits/pieces of the original template into .ssi files and using the include code given above to pull the .ssi files into the location where these code bits/pieces originally existed, you can setup your web template to be even more effective and save you even more time. Pretty cool, eh?