Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Server Side Includes
Server Side Includes, or SSI for short, offers a marvelous method to add site navigation or other common elements to all the pages of a site via one external file. The beauty of that is if you want to make a change you only have to edit one file to have that change take place on every page.To use SSI, your web host needs to have your server enabled for SSI. Many hosts enable it automatically. You can test it for yourself without their help. If it doesn’t work, then request that the host enable SSI.
For SSI to work, with most hosts you must name your HTML pages with a .shtml extension instead .html or .htm. They can, however, enable your server so that all pages, regardless of the page extension, can run SSI.
Most hosts are happy to do that for you, but if yours is reluctant you might want to look at other hosts. I simply wouldn’t build websites without it, it’s that big of a convenience.
Tutorial Within a Tutorial
You can also enable HTML pages to parse SSI yourself if cPanel is your control panel. Here’s how:
To modify your hosting account so you can use SSI on HTML pages, log into your cPanel, scroll down to the Advanced options, and click the icon for Apache Handlers. See Image 1 for reference.
After clicking that icon link, on the next page set the handler as server-parsed and the extension as .html and click the Add button. See Image 2 for reference.
That’s all there is to it. Your site should now include SSI files on regular HTML pages.
Important Notes
- In the handler field, be sure to include the hyphen between the two words (server–parsed).
- In the extensions field, be sure to include the DOT in front of HTML (.html), and enter everything in lower case. You can use .htm instead of, or in addition to, .html. To use it instead of .html just type the .htm extension in the Extension field instead. To use both, just separate the two extensions with a space (.html .htm).
- If you’re building a new site, SSI will not work until the DNS has propagated to your host’s name servers. You won’t be able to test it in advance if you have a temporary address (one your host gave you so you could start building your site before name server propagation).
- The SSI won't work on your computer unless your computer is set up as a server. Upload a test page to see that everything works and looks correct. It's not as awkward as it might seem. You simply create the content on your page you want to use in an SSI file, and move the content to your SSI file and code the SSI link in its place.
How to Create an SSI File
An SSI file simply contains whatever code you would actually place on the page if you weren't using SSI. For example, for links to show up like this:Home Page | Contact Me
Create the navigation.ssi file with only this in it:
<a href="contact.html">Contact Me</a>
If those were the only links you want in your navigation system, that's all you need to include. You can also include CSS to stylize the links, or add images, or do anything you'd do directly on the web page.
Once you have written the code that you want in the SSI file, cut and paste it into plain text file and save the file with an .ssi extension, such as "navigation.ssi" and it's finished.
Be aware that some text editors automatically add a .txt extension to a file when you try to save it with a different extension, leaving you with "file.ssi.txt" instead. To prevent the .txt extension from being added, place the file name and extension in quotation marks when you save it. For example: "navigation.ssi" ...good to go!
How to Include SSI on Your Web Page
To include SSI on a page, place the following code at the location on the page where you want the content of the SSI file to appear:This example references a file named "navigation.ssi" which is located in the folder (directory) called "ssi_files". Of course, you need to use the correct path and file name for the file you want to add via SSI or it won't work. If you need help with server paths, I have a server paths tutorial that will help you out.
That's all there is to adding a navigation system to a page using SSI—as long as your website is SSI enabled (and if necessary for your server, the page is named with a .shtml extension).
The only thing left to do is live happily ever after!
