Adding A Custom Top Menu To Your WordPress Website

We are often asked how to create a menu at the top of a wordpress website with specfic pages in it.  The menu doesn’t have to be dynamic – in fact, the requirement is to only display a select number of options.  Often, the requirement is to display a mix of links to Pages, Categories and Posts in that menu.

The one requirement we do have is that it is easy for our clients to modify the menu themselves.

We use the Simple Sidebar Navigation plugin to achieve this and modify the theme to use the Simple Sidebar Navigation widget.

Step 1:Backup, Backup, Backup!!!

Before starting, backup your WordPress database and your theme.  Make sure you have a copy – ‘just in case’….

Step 2: Install and activate the plugin

Using the Plugins -> Add new function, search for Simple Sidebar Navigation, install and activate.

Step 3: Modify functions.php

I can’t stress how careful you need to be in making this change…. If you get the change to the functions.php file incorrect, you may see the ‘white screen of death’.  If that is the case, simply copy the functions.php file from your backup into your theme folder again.

In your functions.php add a new ‘sidebar’ definition (which will really be your ‘top bar’).
To add a new sidebar, we use the following code:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Top Nav',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

You may need to tweak this a little to match your theme by modifying the before_widget, after_widget, before_title, after_title settings.

As you are placing this ‘sidebar’ in your navigation area, we don’t recommend copying the codes from the sidebar.  We use firefox and firebug to see how the existing navigation is set out and then copy the coding for the div / class tags over.

e.g our navigation menu may be:

<div id="navbar"><ul class="nav"><li>menu 1</li><li>menu 2</li></ul></div>

There is no ‘heading’….

In this case, our sidebar function would look like:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Top Nav',
'before_widget' => '<div id=navbar"><ul id="nav">',
'after_widget' => '</ul></div>',
'before_title' =>  ",
'after_title' => ",
));
?>

Step 4: Call the new sidebar into your theme

In your header.php (or whereever the navigation is currently created), find the code that inserts the navigation and modify it.
For example, the function may be:

<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order’); ?>

Replace this code with:

<?php
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Top
Nav’) ) :
wp_list_pages(‘title_li=&depth=2&sort_column=menu_order’);
endif;
?>

This will look for the existence of a sidebar called Top Nav and if it exists AND has a widget in it, display it.

If the sidebar doesn’t exist, OR  it doesn’t have a widget in it,  the ‘standard’ menu will be displayed.

Step 5: Add the Simple Sidenav Widget to your sidebar

In wp-admin, under appearance -> widget, drag the Simple Side Nav widget to the Top Nav sidebar and create your menu.

If you want to add posts to the menu, you need to configure Simple Side Nav to display posts as well as pages in the Settings menu (settings -> Simple Sidenav) and check the display posts box.

To add a category, you will need to get the link to the category and add it as a custom page in the widget.

Voila! You should now have a menu system that can be configured to display what ever you would like in the top menu.