SSI Guide

Note: not all hosts support the use of SSI, I would advise you to find out before continuing.

SSI (server side includes) is a must for any site that uses large menus, or other information/content that is used throughout their website.
Basically what SSI does is split your code into parts. You can store parts of the code in files which can be 'called' by another file with a simple line of code. This is done so you don't have to copy the code on every single page.

For Example as you see my Website now, I use three parts. A top, a middle and a bottom, in the top I store the banner and left menu code and in the bottom I store the right menu and disclaimer code. For the middle section I simply put the content (for example this guide you are reading) with a line 'calling' the top part of the code and a line 'calling' the bottom part. By doing this all I need to do is edit the file containing the the top half for example and I can add a link to my menu, by doing so it will change all my pages as they all use the same file.

Make Sense? Well hopefully it is starting to.

Now the following is a quick guide to help you implement ssi into your site.

For this example we will assume you want to keep everything except the main content the same throughout your site, in the same way I do.

Start by using one of your pages you have already built.
Simply take the code before your content section begins and paste it into a new file, we will call this 'topssi.html' (this can be called whatever you like).
Then do the same with the code after the main content and call this 'bottomssi.html'.
Make sure these two files are in the same folder as the rest of your website.

You should now be left with just the contents on your page.
For now you should make a test page for this content, so make a page call 'testpage.html' or whatever you wish to call it.
Now we will add the simple lines of code that will fetch those 'topssi.html' and 'bottomssi.html' files and add them to the page automatically.

Open up your test page, which should have purely the content of one of your pages.
Above this content add one of the following lines of code:

PHP Code
This should only be used if your Website host supports the use of PHP, if not use the second code below. If using the PHP code make sure you put this in between PHP start and ending tags, it will not work otherwise.

include("topssi.html");

Alternative Non-PHP Code

<!--#include virtual="topssi.html" -->

Then you simply use the same code after your content but with 'bottomssi.html' in place of 'topssi.html'.

If all is done correctly this will take the topssi code at paste it on top and take the bottomssi code and paste it on the bottom automatically when you load the page.

Go to you test page now and see if it has worked, if so that’s it! Just do this on all your pages, and whenever you edit 'topssi.html' or 'bottomssi.html' it will change on all your pages made in this way.


If you have any problems with this code please contact me and I will do my best to help out.