Using Virtual Includes For Easy Website Updates

Using virtual includes in your CSS HTML web site template means that you can easily update many pages (or every page) on your website at once. It is essential to be able to easily update your navbar, and highly desirable for your footer and header.

A virtual include is a separate file that you can link to from your web pages. The content in the file is then used on the web page just as though it is part of the web page. If you link to it from every page, then every page is updated when you update the include.

It is very powerful, and it can save you an immense amount of time and bother.

Virtual includes do take a small amount of effort to make, but nothing like having to change dozens of pages one at a time.

How Virtual Includes Work

The concept is simple. You create a file, save it and link to it from your web pages. The virtual include is then included in the web page as though it is an integral part of the page.

When you create the file, it should only contain what you want on the page. It doesn't have  a header section, it doesn't have meta tags, it doesn't even have <body> </body> tags.

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">
    <html>
    <head>
    </head>
    <body>
    <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>
    </body>
    </html>


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

Making More Virtual Includes

Do exactly the same for other virtual includes that you want. I usually put the header, footer and navbar in in their own virtual includes, plus I have another one at the top of the page in case I want to put a site-wide ad or notice on the website.

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 your 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. (Yes, that's an affiliate link. If you do decide to use Hostgator and you like my website and tutorials enough to buy it through my link that would be awesome.)


Next Page: How to make a navigation bar

Pages In The Template Tutorial



Return from How To Create A Website Template to Building A Website home page