How To Make A Virtual Include For Fast Website Changes

This is part of a web page template tutorial, showing how you can make a template for your website.

By using a virtual include (or two or three) on your web pages you can quickly and painlessly make a change to your entire website by changing just one file.

It's not unusual to have a common element such as a navigation bar on dozens or hundreds of web pages, and then discover you need to change it! It make mes shudder just to think about it. You need to open every page one by one, make the change and check it carefully. Then you need to upload it.

A few coffees later you're still going. Thank goodness there's an easier way.

With virtual includes (also called server side includes) you insert one line of code in your web page, (it's easy), which opens another file as a part of the page. When you need to update you just change that one file and upload it. It's instantly changed on every page that uses that include.

In the page shown, the navbar on the left, the ebook ad on the right, and the footer at the bottom of the page are all in virtual includes.

Creating An Include

You can code the include directly in HTML if you want to, but it's easier to use your web page design program. I'm using KompoZer for this tutorial.

Fire up KompoZer or your favorite web page design program and build your include file as though it was a normal HTML web page. For example it could be a footer like this one from another of my web sites.

About Us | Disclaimer | Site Map | Privacy

Then go into the source code to delete all the tags that KompoZer automatically puts into the web page. To get into the source code click on the Source button at the bottom left of your monitor. The HTML source code for the footer shown above will look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div align="center"><a href="about-us.shtml">About
Us</a> | <a href="disclaimer.shtml">Disclaimer</a> | <a href="sitemap.shtml">Site Map</a> | <a
 href="privacy.shtml">Privacy</a> </div>

All you want to keep is the text between the <body> and </body> tags, i.e.

<div align="center"><a href="about-us.shtml">About
Us</a> | <a href="disclaimer.shtml">Disclaimer</a> | <a href="sitemap.shtml">Site Map</a> | <a
 href="privacy.shtml">Privacy</a> </div>

Copy that section of the HTML and paste it into a text editor such as Notepad. Save it with an HTML extension e.g. include-footer.html . I normally save it as plain text first to make sure there is no hidden formatting that will cause me problems, then I save it with the .html extension since I use HTML webpages.

Don't save it in KompoZer afterwards.

Just deleting the part of the file you don't want and resaving it in KompoZer won't work because KompoZer will put all those tags back in the page again.

Linking To Virtual Includes

On the web page you'll need to put a link where you want the include to be. If the virtual include file is in the same folder as the page you're linking from the code will look like

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

For example  <!--#include virtual="include-footer.html" -->  where the name of the file is include-footer.html

I often put the includes in another folder I call support-files, just to keep things tidy. Then the link would be

<!--#include virtual="support-files/include-footer.html" -->

An easy way to get the include in the right spot on your web page is to put a row of letters like  XXXXXXXXXXX where you want the virtual include to go, then go into the HTML source code, look for XXXXXXXXXXX and paste the virtual include link over the top.

Virtual include for the header added to the source code

The link to the header's virtual include is shown in green

If you are using subfolders for your files then the links to your virtual includes will be slightly different. Go to the using subfolders page for more info.

Telling Your Host To Check For Virtual Includes

Your server or web host needs to be told to check the web pages for virtual includes. They don't do it automatically. There are two ways you can do this.

Change The File Extension

The easiest way to make your server check for virtual includes is to change the file extension at the end of the file name. Use shtml instead of html or htm

For example the page shown above is

Change The .htaccess File

Slightly more complicated, but still do-able is to change the .htaccess file. If you don't like the shtml extension or if you have an existing website you're updating and you want to keep the same file names then change the .htaccess file.

Note: You may need to check with your webhost first to make sure you're not violating their terms of service.

If you don't have a .htaccess file you'll have to create one. Create or modify the file in a text editor like notepad. Put the following code in it:

AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

If your existing pages have an htm extension, you'll have to make the second line

AddHandler server-parsed .htm

The .htaccess file goes in the root directory of your site to enable it for the whole site, or in a particular directory to enable it just for that directory.

An example of the .htaccess file in a website file structure

You probably won't be able to create a file called .htaccess on your local computer, because more than likely it won't like the leading dot. You may have to just call it htaccess and change the name when you upload it, or open the file directly on your server (host) and modify it there.  

I recently upgraded a website for an aerospace engineering consultant, and had to keep the existing filenames because they had good page rank and could possibly have been bookmarked. That meant changing the .htaccess file, but now the site has virtual includes and is so much easier to update.

Seeing Your Virtual Include

You won't actually see the virtual include until the web page and the include file are uploaded to a server, for example your web host. If you just open your work in a browser eg Internet Explorer from the local files on your computer it won't show.

If you don't have a webhost and aren't going to be using Site Build It, I'd recommend HostGator.  It's one of the best, it hosts over 2 million websites, is 130% wind powered, and is constantly rated highly in reviews. It uses cPanel, has a site builder and templates, and unlimited disc space and bandwidth. Prices start from under $5/month. (I am an affiliate of HostGator, and I do receive a commission if you buy from my link.)

Next Page: How to make a navigation bar

Pages In The Template Tutorial

Return to the Template Tutorial page

Return From Making A Virtual Include to Building A Web Page

Return to Building A Web Site Home