Example Menu

Below is an example of the type of menu we’re going to create using NAVT and two cascaded style sheets. The navigation elements shown in the menu are arbitrary items I put together from this web site.

These types of menus are relatively easy to construct. However, the tricky part is making them work with IE6 and most of this article deals with the IE6 solution.

Getting Started

Examples of CSS style sheets that contain rules for formatting horizontal, vertical, fly-out, drop-down, and cascading menus can be found all over the Internet. When asked, I usually send people to CSS Play which is owned by Stuart Nicholls. CSS Play has dozens of examples of pure CSS menus that you can freely use on your non-commercial web site provided you leave the copyright statements intact that appear in the CSS file. These can also be used on Commercial web site’s provided you obtain permission from CSS Play. For this tutorial, I’m going to use this CSS Play flyout menu to demonstrate the process of integrating the CSS into your web site in concert with NAVT.

You will, of course, need to change the menu text and background colors, adjust the menu width and heights and make any other style alterations to make the menu look right with the theme you intend to use the menu with.

The !DOCTYPE

Before I begin, it’s important to understand that your Word Press theme MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html. Using <?xml version="1.0" encoding="UTF-8"?> will switch IE into quirks mode and your menu will not work correctly.

Code Between Items

Each navigation item now contains a code panel button that is used to open and close the item’s code panel. Clicking the code panel button will transform the opened options box to the illustration shown in the right.

The code panel is divided into two sections. The top section containing the controls:

• Insert before item,
• Insert above item and,
• Upper Code block

These controls are used to determine where the upper code block is to appear in the list relative to the item. The lower section that contains the controls:

• Insert below item
• insert after item
• Lower Code block

These controls are used to determine the lower code block is to appear in the list relative to the item.

This topic has been written about many times by many people but this article has a NAVT slant. The information presented here is not intended to teach the basics of the PHP programming language, programming logic or WordPress template construction. It is designed to provide sensible help to the do it your-selfer who would like to use the NAVT Plugin for WordPress and isn’t afraid to do a little template hacking to make it happen. However there are at least three different ways you can integrate the NAVT plugin into your theme. Two of them don’t require programming.

The Theme Hack Method

Template or theme hacking is the very thing I hope to prevent you from doing. Adding the necessary function call to your WordPress template for the NAVT plugin doesn’t take very long to do but you need to understand the following:

• Where the NAVT PHP interface call needs to be placed in your WordPress template,
• How to correctly write the function call and,
• How to style the resulting navigation list.

WordPress Theme Basics

WordPress templates are not very mysterious if you understand some basic information. The content of your WordPress theme directory is composed of one large PHP script that is executed every time someone visits your blog. The theme script is divided into small files and each file name provides a clue to its intended use.

The typical WordPress theme usually contains (at a minimum) the following files:

• index.php
• header.php
• sidebar.php
• footer.php

The index.php file is the start of the PHP script and code execution begins with the very first line at the top of the index.php file and ends on the very last line. index.php is responsible for assembling all of the information that produces the pages of your WordPress blog. Page assembly (or production) is accomplished by making PHP function calls that are designed to create the HTML code that is, in turn, interpreted and displayed by the viewer’s web page browser. If you already know this, bear with me; it gets more interesting later.

There is a method to the madness of producing web pages by your WordPress theme. The method is simply the loading and execution of known PHP files in a predetermined order. The PHP files come from your theme’s directory. Specifically, the files named: header.php, sidebar.php and footer.php. If your theme is missing any one of these files, the file of the same name will be used from the default theme directory in your WordPress installation.