Franz Kelsch on Tech » Using Single Instance of Spry Menus

For my websites I have been using the Spry Horizontal menu system. Although this makes it easy to add in menu items and links, as with any menu system, if it is in every webpage that becomes a burden if you should need to make a change to a single menu item. That would require making the same change on every page.

I also wanted to have a separate image header at to top of the webpage that changes with the section I am in.

I accomplished both things by using this approach. For reference go to the website http://www.ultracycle.net

In the main folder I have these files

index.php
header.php
header.jpg
footer.php

The header.php is the file that contains the HTML code for the image at the top of the page (using a relative address) and all the code needed for the Spry Menu. The header.php file has no <HEAD> tag, just the lines of HTML that are needed. I started with a full page with the <html> <head> and <body> tags, and started to delete all lines of code that were not clearly needed and I ended up with header.php.

The index.php file uses an include command as follows:

include (”header.php”)

The header.php file already has a link to the local header.jpg file. I use a similar approach to include the footer.php file.

For each section I created a separate folder. One is called “train” for long distance cycling training webpages.

In there are these files.

header.jpg
index.php
individual pages, all php files.

The index.php (and the other files there) all use the same include command but in this case it is:

include (”../header.php”)

and

include (”../footer.php”)

Not that this header.php will use the jpg file found in /train/header.jpg since in that file I use no relative reference. So when I run the file \train\index.php it accesses the header.php file in the root, which uses the local JPG file, and then of course has the body of what desired for that page. It also uses the footer.php file.

The index file looks like this:

<html>
– usual stuff here
<head>
– usual stuff here
</head>
<body bgcolor=”#64748B”>
<?
php
include (”../header.php”) ;
?>
—- then the code for the page —-
include (”/footer.php”)
</body>
</html>

By using this approach I only need to change the content that is unique to that page, which goes between the include for the header.php file and the include for the footer.php file.

I believe this approach will make it much easier to create new content and keep existing content up to date. To create a new page I have a template that has the includes to the header.php and footer.php file and a table in between the two. I just paste the new content on table. It will use the appropriate JPG header image, depending on which folder it is placed in. By using this approach I have reduced the create of new webpages to be only content that is unique to that page and yet when the page is viewed in the browser it has the header image, the Spry menu, and the footer images and links.

This file will show you what it looks like.

http://www.ultracycle.net/monitor/hrm.php You will see different header image than if you go to the main index page at:

http://www.ultracycle.net And yet both pages are using the same header.php file included in the code.

I plan to use this approach on other websites. It takes a bit of work up front but saves a lot of time going forward.

Categories: Web Development