By Jason Birch
Site-Wide Headers and Footers
One of the most powerful features of PHP is its ability to reduce the amount of site maintenance you need to do. By setting up a consistent site template, you can reduce the effort needed to create new pages, and you can also make it much easier to change the design of your entire site. This tutorial takes you through a simple example of how to set up and access a site template.
Tip: It may not be immediately clear that any pages including headers and footers must be “made dynamic” by converting them from static HTML pages to PHP pages. For example, to make your homepage capable of including headers and footers rename it with the .php extension (or whatever extension you are using to denote PHP scripts on your server) and add the PHP code for the includes. Included files are not required to have the .php extension, but can be called .html or even a made up type like .inc or .inf. Whatever they are called, included files will be executed.
The first thing you need to do is design your HTML header and footer. This is all of the information that is presented the same way in all of your pages. The header typically includes the HEAD section of your site, perhaps a button bar and site advertising, and the page heading. The footer typically includes a copyright notice and contact information for your site. Here are some examples:
header1.php
<HEAD>
<TITLE>My Cool Site</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>The Coolest Site Ever</H1>
footer1.php
<PRE>
</PRE>
<CENTER>
<A HREF="http://www.coolsite.loc/legal.php">Copyright</A> 2018 By Me<BR>
Written by: <I>The Author</I><BR>
Questions? Write to <B>[email protected]</B><BR>
</CENTER>
</BODY>
main1.php
<?PHP
require ("/path/to/includes/header1.php");
?>
<P>This is a the text of your page. Make it as fancy as you want!</P>
<?PHP
require ("/path/to/includes/footer1.php");
?>
Dynamic Headers and Footers
The next step is to replace the portions of these files that you want to be dynamic with php variables. This can include such things as title, keywords, description, email contact, and more. The basic element of this step is adding the statement for each dynamic text chunk. The examples as modified are below:
header2.php
<HEAD>
<TITLE><?php print $strTitle; ?></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1><?php print $strCaption; ?></H1>
footer2.php
<PRE>
</PRE>
<CENTER>
<A HREF="http://www.coolsite.loc/legal.php">Copyright</A>
2018 By Me<BR>
Written by: <I><?php print $strAuthor;
?></I><BR>
Questions? Write to <B><?php print $strContact;
?></B><BR>
</CENTER>
</BODY>
Now that you have these ready, you need to be able to access them from your pages. This is easier than you might think. The files accessing the header and footer need to set the required variables, call the header, write out unique content, and then call the footer. An example of how to do this follows:
main2.php
<?PHP
$strTitle = "My Cool Site";
$strCaption = "The Coolest Site Ever";
$strAuthor = "The Author";
$strContact = "[email protected]";
require ("/path/to/includes/header2.php");
?>
<P>This is a the text of your page. Make it as fancy as you want!</P>
<?PHP
require ("/path/to/includes/footer2.php");
?>
Separating Content From Markup
Pretty simple, eh? OK, now we’re going to get a bit more complicated. Say you want to be able to change the values of the dynamic content across your entire site very rapidly. The easiest way to do this is to move the information into a global configuration file, and store page-specific portions of it in an array. For those new to programming, any array is simply a list that can be accessed through either a numeric or a textual key. An example of a config file follows:
config.php
<?PHP $aryConfig = array(
"main" => array (
"title" => "My Cool First Page" ,
"caption" => "Welcome to the Coolest Site Ever" ,
"author" => "The Author" ,
"contact" => "[email protected]" ) ,
"second" => array (
"title" => "My Cool Second Page" ,
"caption" => "More Coolness!" ,
"author" => "The Other Author" ,
"contact" => "[email protected]" )
);
?>
The configuration file is inlcuded just prior to including your header. This makes the values if all the oncfiguration variables available to code througout the entirie scope of the page. Now that the config file is in place, the header and footer need to be modified to read the array We still want to be able to override the global values locally so we will make sure to only use the global values if there is no existing value. This is done as follows:
header3.php
<?PHP
if (empty ($strTitle)) { $strTitle = $aryConfig[$strPagename]["title"]; }
if (empty ($strCaption)) { $strCaption =
$aryConfig[$strPagename]["caption"]; }
?>
<HEAD>
<TITLE><?php print $strTitle; ?></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1><?php print $strCaption; ?></H1>
footer3.php
<?PHP
if (empty ($strAuthor)) { $strAuthor = $aryConfig[$strPagename]["author"] } ;
if (empty ($strContact)) { $strContact = $aryConfig[$strPagename]["contact"] } ;
?>
<PRE>
</PRE<
<CENTER>
<A HREF="http://www.coolsite.loc/legal.php">Copyright</A> 1999 By Me<BR>
Written by: <I><?php print $strAuthor; ?></I><BR>
Questions? Write to <B><?php print $strContact; ?></B><BR>
</CENTER>
</BODY>
And finally, the main page needs to be updated to access the config file as follows:
main3.php
<?PHP
$strPagename = "main";
require ("/path/to/includes/config.php");
require ("/path/to/includes/header3.php");
?>
<P>This is a the text of your page. Make it as fancy as you want!</P>
<?PHP
require ("/path/to/includes/footer3.php");
?>
As an additional step, it may be easier for you to move the actual page content to a separate file. This will allow easy content changes without worrying about messing up the PHP code. This requires a change to the main file and the addition of a contents file:
main3.php
<?PHP
$strPagename = "main";
require ("/path/to/includes/header3.php");
require ("/path/to/includes/contents.html");
require ("/path/to/includes/footer3.php");
?>
contents.php
<P>This is a the text of your page. Make it as fancy as you want!</P>
This should be a good starting point for your forays into the jungle of dynamic site building. Have fun!
Tip: You may be wondering how to make your index or home page load automatically now that it is dynamic. On the Apache web server, this is as simple as creating an .htaccess file in the directory containing a line including a DirectoryIndex directive that tells the server what files to consider “default” pages. You want to add the name of your PHP enabled home page to the list as follows. Make sure you put it first in the list to give it priority over other default pages but also keep at least one static default page in there for safety.
.htaccess
DirectoryIndex index.php index.html