How To Make A Virtual Include For Fast Website Changes

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 me 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.

Example of web page with virtual includes

With virtual 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.

The Virtual Include File

This file is like a small self contained part of a web page. You can make it in your favorite web page editor, but you must be careful of the tags.

When you make a normal web page there are a few tags in the HTML source code that you don't see on the page itself. These are things like <HTML>, <head>, <meta> and <body>. Some wysiwyg web page editors put them in a new page automatically, but you don't want them for the this file.

In Nvu you can see the source code by clicking the Source tab at the bottom of the page.

When make your file and look at the source code, everything you need will be within the <body></body> tags. Those tags and anything outside them need to be deleted. Then save the page with the extension of your choice, .htm, .html, .shtml, .txt, .inc. or .ssi.

If the web page editor keeps inserting tags even after you delete them, you can copy everything inside the <body></body> tags, paste it into Notepad and save it with one of the file extensions shown above.

The Virtual Include Code

Here is the code you use on the web page that uses the virtual include:



Where you see filename.html put the name of the file you want to include on the page. (Use the quotes). For example the e-book ad on the right of the page shown above is in a file called alzheimersrightside.html and the code looks like this:



To make maintaining your website easier you can put all your virtual include files in their own folder, for example called “includes” (without the quotes).
Then the code would be:



The code must be placed in the web page HTML source code.

To make it easy to get the code where I need it I put XXXXXXXXXXX on the wysiwyg page where I want the file to go. Then I look at the source code, find XXXXXXXXXXX, and paste the virtual include code over the top of it.

The Web Page "Must Have"

Any web page that uses a virtual include has to be saved with a .shtml extension or it won't work.

For example the page shown above is http://www.about-alzheimers.com/index.shtml

Return From Making A Virtual Include to Building A Web Page

Return to Building A Web Site Home