Creating A Server-Side Include (SSI) for Your Website

See also How to Find the Right Spot for Your Include

Server-side means that something is done BEFORE it gets to your computer screen. An example of an SSI is the update date at the bottom of this page. I didn't actually type the date, it's pulled from the file information on the server. Because this is a SERVER side include, you won't see the include in your editor.

If a website manager wants something to happen BEFORE it displays in your browser, he uses a SERVER-SIDE command such as an include.

An include file contains the information that would normally be on your page.

If I want a menu on every page of my site, I create an include - something like

<a href="http://www.txgenweb.org/county.htm" class="menu-button">Counties</a>
<a href="http://www.txgenweb.org/records.html" class="menu-button">Records</a>
<a href="http://www.txgenweb.org/projects.html" class="menu-button">Special Projects</a>
<a href="http://www.txgenweb.org/research.html" class="menu-button">Research</a>
<a href="http://www.txgenweb.org/volunteer.htm" class="menu-button">Volunteer!</a>
<a href="https://www.ancestry.com/boards/localities.northam.usa.states.texas" target="other" class="menu-button">Queries</a>


If you have a menu already on your page, you can CUT it from your page and PASTE it into it's own file so that creating one can be very simple.

Or you can create this file in a text editor - it isn't actually a webpage and doesn't need anything in it other than these links.

I prefer to save my includes as .htm files but you can use just about any name. There is an advantage to using the .htm or .php extension but I won't go into that here.

The name could be menu.txt, menu.php, menu.menu, menu.url, menu.htm or menu.html.

I'm saving my file as top-menu.htm.

I open my webpage in a text editor and find the place I want this menu to go. In that place, I use the command.

<!--#include virtual=" "-->

Inside the quotes, I add the RELATIVE URL of the include.

Relative means you have to create a path from the location of your page to the location of your include.

I know my include name.

<!--#include virtual="top-menu.htm"-->

If my page and my include are in the same folder, this is all I need.

If they're in different folders, I need to map it out.

I prefer one subfolder to hold all my includes.

From any file in my MAIN folder, I simply map to the includes folder.

<!--#include virtual="includes/top-menu.htm"-->

If my page is in a different subfolder, I have to tell the browser to go up to the main folder and then look for the includes folder.

<!--#include virtual="/includes/top-menu.htm"-->

The slash / in front of the folder name tells the browser to look in the main (root) folder for the includes folder.

If you're on a shared server (such as our county server) and/or don't have access to the root directory, you can use 2 periods in front of the slash to tell the browser to go UP out of the present folder and into the includes folder.

<!--#include virtual="../includes/top-menu.htm"-->

Your browser may need to go up more than once ...

<!--#include virtual="../../includes/top-menu.htm"-->

If you make a mistake, you'll get a browser error that says something like
[an error occurred while processing this directive]

Don't panic, just try again. Most often, you either didn't use enough "ups" or used too many.

If you continue to get this error, it's possible that your website isn't set up to use includes. Usually, the site will use them if the extension for your page is special - .shtml but not if it's a regular file - .html; this can be easily fixed. Our TXGenWeb Counties server is set up to use SSIs for most extensions.

Browsers are lazy, you may need to do a HARD refresh before you see your changes. Ctrl + F5 or, on a Mac, Shift + Command + R.

Contact me about how to add other file extensions to your htaccess file.

Includes use relative URLs so that I can't include a page from YOUR website inside mine. In other words, I can't use an include file that isn't located on my own website.