Last week we talked about the WordPress header and header.php. We continue this series and this week we’ll be touching on the WordPress menu. Visitors come to a website to find answers. How they arrive, whether via an organic search, a paid ad, or a sponsored link, matters little to these information seekers. These visitors come believing that they will quickly find the answers that they need. The operative word here being quickly. (The boon and bane of hi-speed internet is that it has turned a lot of us into impatient “speed demons”.) Once these visitors have what they want and they do linger on the site after, then that’s already a bonus.

Often, these new visitors aren’t really looking for a website with flashy, awesome text animation embedded in a huge full width slider-enabled $50 premium WordPress theme. Some might, but like we said, majority of them simply want to find a quick answer to whatever they are looking for. A lot of them will look for the link to the item that led them to the site in the first-place or go straight to the menu to find their way through the site. That’s why it’s important to create a website navigation menu that will make your visitor’s website experience fruitful and pleasant at the same time.

What is website navigation anyway? What is a menu?

Navigation Defined

Navigation Menu is a theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for introducing customised navigation menus into a theme. In order to incorporate menu support into your theme, you need to add a few code segments to your theme files.
Source: WordPress Codex

There are many navigation methods employed on websites. The simplest and easiest to follow, will allow your visitors to find your information pages and enjoy the visit! Simple HTML navigation menus also provide search engines with a clearly marked road map to follow, when they scan your website.
Source: Cal Poly

The process by which a user explores all the levels of interactivity, moving forward, backward, and through the content and interface screens. Users navigate through the project by clicking on interactive controls such as buttons, image maps, and hypertext, while clues such as special colors, backgrounds, or interface sounds help orient them to where they are at within the levels of interactivity. A good navigation scheme will leave the user with little question about where they are in the document and where they can go from there.
(from Lisa Graham, The Principles of Interactive Design, 1999)

Menu Defined

A list of options displayed to the user by a data processing system, from which the user can select an action to be initiated. In text processing, a list of choices displayed to the user by a text processor from which the user can select an action to be initiated. A list of choices that can be applied to an object. A menu can contain choices that are not available for selection in certain contexts. Those choices are indicated by reduced contrast.
Source: Glasgow Caledonian University

“Good Website navigation is very important to every business website. Good text links help. When a visitor can’t easily discover where they are, what valuable business information is on the page, where to go next and how to find your Home Page or a good sitemap… they leave your website! You would never tell a customer to stand outside your business, while they try to do business with you. Poor website navigation creates the same visitor experience. Good page titles tell visitors what each page is about.

A well designed menu will allow search engine spiders and human visitors to navigate around your website and never get lost. A menu is simply a group of links to more information. Helping your visitors find information quickly, will impress potential customers. Finding good information is the key to a successful business website.”
(Source: SEOWebsitesdesigners.com)

There are several ways to set up your navigation menu system on your website: vertical, horizontal, or a combination of both. Beginning WP version 3.0, WordPress introduced a new navigation menu system and since then after numerous updates and improvements, the WordPress menu management system has made setting up navigation menus in the backend admin panel section more user friendly with lesser and lesser coding or technical knowledge required. Check out these great resources: this article by Justin Tadlock, or these tutorials WordPress menu navigation tutorial and Setting up Menus in WordPress to learn how to set up your menus in no time.

If you have been following this basic WordPress journey, you would have learned some very basic info about WordPress, HTML, CSS, PHP, tags, html templates, css stylesheets, and a whole lot more. It’s about time to put that basic info to the test and write something “poetic” or at least attempt to. The key word here being “attempt”.

Our attempt is to write something very simple and easy. We will assume that you already have your own domain name and that you have WordPress installed and running on your site. If you’ve never coded a WordPress theme before or your brain freezes at the sight of all the gobbledygook and unintelligible mishmash of hyphens, brackets, parentheses, asterisks, colons and semicolons, and so much more, this might help you. For the experts out there, pardon the language, because this might turn out to be too barbaric for your code sensibilities. Sounds scary already.

We now know that HTML and PHP are two distinct “web” languages and that WordPress is written using PHP. WordPress Themes are basically plain HTML templates, with WordPress specific PHP tags integrated into specific areas where needed.

Just like the old snail mail letter where you have the date, the heading, the greeting or salutation, the body of the letter, the closing, and the signature, the basic components of a typical WordPress theme consists of:

• the Header
• the Menu (navigation)
• the Sidebars
• the Content Column and
• the Footer

And just like the traditional snail mail letter where you need to write on real paper, you will need a text editor to write your code. Those are the basics.

In a previous article, we wrote that one of the fastest ways to learn a language is through immersion. We will attempt to apply this immersion technique in this exercise and hopefully we can learn to understand, then “speak” and “write” WordPress code as we go along. In this little experiment, we shall choose a theme, (Twenty Eleven, in this case), analyze it, try to dissect it and break it down, and then ry to create our own version, super simplified of course, based on our understanding of how it works. We will be working backwards instead of coding from scratch.

Let’s take a look at what Twenty Eleven’s Main Index Template (index.php) contains and let’s dissect. (The code below is taken from an existing website. Some of the tags have been color coded only for the purpose of this discussion).

Note that the items highlighted in red refer to the basic components of a WordPress Theme. If we strip it down to these basics, eliminate the rest of the code (strings, integers, and variables) and leave just the basic, we can actually begin to write simple code that looks like this:

(The Header)
<?php get_header(); ?>

(The Menu)
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>

(The Content)
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>

(The Sidebar)
<?php get_sidebar(); ?>

(The Footer)
<?php get_footer(); ?>

Of course we might be breaking a few syntax rules here and there but we’ve managed to write some sort of broken WordPress poetry. Haiku-like perhaps but nevertheless, it IS code. Till next!