A lot of users ask about the best way to handle headers, footers, and navigation using Surreal. The traditional option is, of course, to update each section of each page one-by-one, which can be very tedious and lead to inconsistencies between pages. Wouldn’t it be easier to just edit it once and have it update everywhere?
Unfortunately, this isn’t possible with plain ol’ static webpages. It is possible with PHP, however, and this tutorial is all you’ll need to get started.
This tutorial shows you how to include files using PHP, but Surreal also supports Server Side Includes and ColdFusion includes. Learn More
Include files allow you to put shared content into a separate file and “include” it in multiple pages. The most common candidates for include files are headers, footers, and navigation menus. Consider the following page:
<!--index.html-->
<html>
<head>...</head>
<body>
<header>...</header>
<nav id="main-navigation" class="editable">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="sample.php">Contact</a></li>
</ul>
</nav>
<div id="main-content">...</div>
<footer>...</footer>
</body>
</html>
Since the navigation menu needs to be consistent from page to page, it’s
a good idea to put it into an include file. Just remove the HTML code from
the page and paste it into a separate file. Let’s call it navigation.php:
<nav id="main-navigation" class="editable">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="sample.php">Contact</a></li>
</ul>
</nav>
Now we need to update the page to point to the include file:
<!--index.html-->
<html>
<head>...</head>
<body>
<header>...</header>
<?php include("navigation.php"); ?>
<div id="main-content">...</div>
<footer>...</footer>
</body>
</html>
But wait, there’s a catch! We need to make sure PHP will process our pages,
so we’re going to need to change each page’s extension to .php.
This tells the scripting engine that it should look in each page and execute
any PHP code it finds, such as the include code above.
If you can’t change your extensions to .php for some reason, you
might be able to work around this step by adding the following lines to your
.htaccess file:
AddType application/x-httpd-php5 .htm .html .php DirectoryIndex index.php index.html index.htm
You can tell if everything is working properly by viewing index.php.
If the navigation menu is intact, you’re done! Now, when you publish changes
to one of your pages, Surreal will automatically update the include file so
your changes will be seen on the entire site.
This technique can also be used for headers, footers, and just about any other piece of content you want to share across multiple pages.