How can I have the same navigation menu on a multi-page web site?
This question gets asked a lot in web design & development forums. I like to use Server-Side Includes for this because they are powerful, flexible and efficient.Let's say you have a 20 page web site that uses the same navigation menu on all pages. When it comes time to edit your menus, you must open all 20 pages, make changes, save them and then upload all 20 pages to your web server. Talk about tedious not to mention error prone...
Now what if you could open just one file, edit, save & upload it? Voila! New menu automatically populates to all your web pages. That's exactly what SSIs can do. And more. They are perfect for sitewide headers, footers and other global elements that you frequently use in your sites.
So let's get started with SSIs
NOTE: For this to work you must save your web pages with a .php file extension and your server must support PHP scripts. If unsure, ask your web hosting provider.
What are Server-Side Includes?
Small files that contain code fragments. They are not complete web pages mind you, instead they are just bits of relevant HTML code.
The default HTML markup for a basic nav might look something like this. Notice there is no doc type, <html>, <head>, <style>, <body> or other markup here. It is just the menu code and nothing more.
<nav><ul><li><a href="#">Menu Item 1</a></li><li><a href="#">Menu Item 2</a></li><li><a href="#">Menu Item 3</a></li><li><a href="#">Menu Item 4</a></li><li><a href="#">Menu Item 5</a></li></ul></nav>
Or if you use Bootstrap, your navbar code might look more like this.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">BRAND</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a> </li>
<li><a href="#">MENU 4</a> </li>
<li><a href="#">MENU 5</a></li>
</ul>
</div>
</nav>
Open your main web page (index.html), cut and paste your current nav code into a blank text file. You can save the include file as ANYTHING you wish:
- nav.htm
- navbar.html
- menu.ssi
- top-nav.php
- menu.txt
- nav_menu.foo
- filename.whatever
#2 Insert a Server-Side Include Statement:
Now go back to your main page and replace the empty space where your menu was with a Server-side Include Statement. This is a little bit of PHP code that calls the include file into your web page.
<!--menu goes here-->
<?php require_once('Includes/menu.html'); ?>
#3 Save index.html as index.php
To parse PHP includes in web pages, it's best to name your web pages with .php extension. Upload both files to your server to test -- menu.html & index.php.
Be sure to remove the old index.html file from your server.
Repeat Steps #2 and #3 for remaining site pages.
How can I test pages in my local browser?
You will need a local testing server. Get one of the following Apache servers for your OS and follow the installation instructions (5 min set-up).
WAMP for Windows
http://www.wampserver.com/en/
XAMPP for Windows
http://www.apachefriends.org/en/xampp-windows.html
XAMPP for Mac
http://www.apachefriends.org/en/xampp-macosx.html
MAMP for Mac
http://www.mamp.info/en/downloads/index.html
Can I parse Includes in ordinary .html files?
This varies by web host. Some shared hosting plans allow it but many do not. If you're on a dedicated or VPS hosting plan, it's likely that you can parse .html files as .php files by amending (or creating) an .htaccess file in your server's root folder. If unsure, check with your hosting provider.
Contents of .htaccess file:
AddType text/html .php
AddHandler server-parsed .php
Options Indexes FollowSymLinks Includes
AddHandler server-parsed .html
A word or two about link paths in server-side include files.
The link paths to site pages are relative to the main page in which Server-Side Include Statements occur. For example, if you keep all your site pages at root level, you won't have any problems. But if you save your site pages to various levels in sub- or sub-sub-folders, you will encounter problems with dead links. To avoid this, convert your include file's links to absolute paths --
http://yourdomain.com/folder/filename.phpThat's all there is to it. We hope you enjoyed this introduction to Server-Side Includes with PHP. The more you use them, the more uses you will find for them.
