Convenience With Server Side Includes

Have you ever started a site with plain old HTML and thought nothing of future maintenance? 50+ pages later you find just adding a new item to the menu or changing the copyright date on the footer has become a massive chore. Fortunately most web hosts support Server Side Includes (SSI) or a scripting language such as PHP which has its own include functions.

Inlcuding separate files into your main documents is a convenient method to keep common elements of your web site updated, you only have to edit one file which is included in each page instead of manually editing and re-uploading every single page.

All steps combined only take fractions of a second to complete with no perceptible performance drawbacks to the end user, here is a quick overview:

server reads the page requested by a user and checks for include directives.
inserts contents of files specified by the include directives as if originally part of the requested page.
sends requested page complete with included text or data to the user browser as one normal HTML page.

Common elements can include the header, footer, menus, anything you want to appear on every page which is subject to eventual change.

I will be using standard SSI and PHP include methods for the examples, this guide is all about convenience when updating site elements so other features of SSI will not be mentioned. If you want to do more than just include other files it is usually better to learn a scripting language such as PHP and the wealth of functions available to that language.

SSI Usage - Apache Web Server:

First check with your hosting provider if you're unsure of SSI support on their servers, normally all you need to do is rename or save files with .shtml extension (ex: file.shtml) and the server automatically parses those files for includes and other directives.

Create a file called footer.html and add something simple like a basic copyright notice much like the one at the bottom of this page and upload it to your web root directory.

If you want this same footer info on every page just add the following include directive to each page within the HTML where you want the footer text to appear.

Now all you would need to do is edit the file named "footer.html" to change the copyright notice across your whole site.

PHP Include:

PHP includes are functionally identical and all you need to do is rename or save files with the .PHP extension (ex: file.php) if your hosting server supports it.

One thing to note is PHP can also include files located above web root (see getting started step 3 for more info), the variable $_SERVER['DOCUMENT_ROOT'] should be used to only include files uploaded to the web root and below. Like in the SSI example above you would add the following PHP snippet to your HTML code to insert the contents of a file named "footer.php" which is located in the web root directory.

<?php include($_SERVER['DOCUMENT_ROOT'].'/footer.php'); ?>

Example:

First, the page that will do the including will be saved as "index.shtml" in the sub-directory "www.hostingprimer.com/ssi/example/".

index.shtml:
SSI Include Code

Second, the file that will be included will be saved as "footer.html" in the same sub-directory.

footer.html:

You can see the output of the page here: http://www.hostingprimer.com/ssi/example/index.shtml

Viewing the source code of the above linked page shows the include directive is never passed to the end user, you don' t have to worry about browser or search engine compatibility issues since the including process is all done server side.

HTML source output after server processing:
SSI Output

	Hosting Primer Main How-To Guides Getting Started: Bringing a Web Site Online Managed DNS Guide Server Side Includes with Apache or PHP Monitor Site Uptime Hosting Types Domain Hosting Standard Shared Web Hosting Reseller / VDS / VPS Web Hosting Dedicated Hosting Servers Blog Hosting Free Web Hosting Other Tools and Scripts		Convenience With Server Side Includes Have you ever started a site with plain old HTML and thought nothing of future maintenance? 50+ pages later you find just adding a new item to the menu or changing the copyright date on the footer has become a massive chore. Fortunately most web hosts support Server Side Includes (SSI) or a scripting language such as PHP which has its own include functions. Inlcuding separate files into your main documents is a convenient method to keep common elements of your web site updated, you only have to edit one file which is included in each page instead of manually editing and re-uploading every single page. All steps combined only take fractions of a second to complete with no perceptible performance drawbacks to the end user, here is a quick overview: server reads the page requested by a user and checks for include directives. inserts contents of files specified by the include directives as if originally part of the requested page. sends requested page complete with included text or data to the user browser as one normal HTML page. Common elements can include the header, footer, menus, anything you want to appear on every page which is subject to eventual change. I will be using standard SSI and PHP include methods for the examples, this guide is all about convenience when updating site elements so other features of SSI will not be mentioned. If you want to do more than just include other files it is usually better to learn a scripting language such as PHP and the wealth of functions available to that language. SSI Usage - Apache Web Server: First check with your hosting provider if you're unsure of SSI support on their servers, normally all you need to do is rename or save files with .shtml extension (ex: file.shtml) and the server automatically parses those files for includes and other directives. Create a file called footer.html and add something simple like a basic copyright notice much like the one at the bottom of this page and upload it to your web root directory. If you want this same footer info on every page just add the following include directive to each page within the HTML where you want the footer text to appear. <!--#include virtual="/footer.html" --> Now all you would need to do is edit the file named "footer.html" to change the copyright notice across your whole site. PHP Include: PHP includes are functionally identical and all you need to do is rename or save files with the .PHP extension (ex: file.php) if your hosting server supports it. One thing to note is PHP can also include files located above web root (see getting started step 3 for more info), the variable $_SERVER['DOCUMENT_ROOT'] should be used to only include files uploaded to the web root and below. Like in the SSI example above you would add the following PHP snippet to your HTML code to insert the contents of a file named "footer.php" which is located in the web root directory. <?php include($_SERVER['DOCUMENT_ROOT'].'/footer.php'); ?> Example: First, the page that will do the including will be saved as "index.shtml" in the sub-directory "www.hostingprimer.com/ssi/example/". index.shtml: Second, the file that will be included will be saved as "footer.html" in the same sub-directory. footer.html: You can see the output of the page here: http://www.hostingprimer.com/ssi/example/index.shtml Viewing the source code of the above linked page shows the include directive is never passed to the end user, you don' t have to worry about browser or search engine compatibility issues since the including process is all done server side. HTML source output after server processing: