Create a WordPress Horizontal Navigation Menu

Published:

Wordpress Horizontal Drop-Down Menu


In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or using the SuckerFish menu. I couldn't find a good tutorial, so I decided to write one.

For this tutorial I am using the theme I built for the Experts Exchange article I wrote called "Create Your Own WordPress Theme". This theme is very basic as I wanted to keep it simple for those without much or any WordPress experience. I thought it would also be a good opportunity to cover adding additional features to a WordPress theme. If you would like to use the theme to walk through this tutorial, you can get the code here: Experts Exchange WordPress Theme Tutorial

This tutorial should work with any WordPress theme. Before you begin, I strongly recommend backing up the original theme files. If you run into any problems you will be able to restore your theme to its original design.

1. GETTING STARTED:

Open the header.php file.
Find the current navigation menu for the theme in the header files.
Here are a few examples of what to look for:

<ul>
                      <?php wp_list_pages('exclude=17,38' ); ?>
                      </ul>

Open in new window


<ul id="nav">  
                      <?php wp_list_pages('title_li=&depth=1'); ?>  
                      </ul> 

Open in new window


It may look like this if the menu has been hard coded into the theme:
<ul id="menu-main">
                          <li><a href="#">Home</a></li>
                          <li><a href="#">About</a></li>
                          <li><a href="#">Contact</a></li>
                          <li><a href="#">Blog</a></li>
                      </ul>

Open in new window


And here is what it looks like if you are using the EE-Tutorial Theme:
                <div id="nav">
                                              <ul>
                                                      <?php wp_list_pages('title_li='); ?>
                                              </ul>
                                      </div>

Open in new window


2. ADDING THE CODE TO THE HEADER.PHP

Once you have found the menu in your theme, select it and either delete it or replace it with this:

 <div id="nav">
                      <?php wp_nav_menu( array('menu' => 'main' )); ?>
                                      </div>

Open in new window

                       
Notice I included the <div id="nav"> tag. This is important for when we style the navigation menu. The id="nav" is what we will use to add the CSS to the menu.

The code we just placed will allow us to use the WordPress 3.0 custom navigation feature. The WordPress nav menu gives you the opportunity to add custom pages to the navigation of your theme, or arrange it just about any way you want. The options will be available through your WordPress Admin area. Click on Appearance>Menus from the left side toolbar to view the settings. The navigation isn't ready yet so you won't be able to add the Menu.  Let's move to the next step.

3. MAKING THE MENU FUNCTIONAL:

To make the call to the nav menu work we need to add some functions to it.

NOTE: The functions.php file is where you can add additional functions to your theme. The functions.php file is one of the most useful parts of a WordPress theme for adding additional features. If the index.php and style.css files are the engine that runs WordPress, then functions.php would be the "fuel".

If your theme has a functions.php file, open it now and place the next piece of code after the current closing "?>" PHP tag at the very end of the functions.php file.

If you are using the EE-Theme tutorial theme, or if your theme doesn't have a functions.php file, create a blank text file using the editor of your choice.  Paste the following code and save the file as functions.php, then add the file to your themes directory.

Here is the code:
<?php
                          add_theme_support( 'menus' );
                      function has_children() {
                      	global $post;
                      	$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
                      	return ($children) ? true : false;
                      }
                      
                      function is_child() {
                      	global $post;
                      	return ($post->post_parent) ? true : false;
                      }
                      ?>

Open in new window


What the code is doing:
1. add_theme_support( 'menus' ); : This adds the nav menu functionality to the theme, so we can register it in the header.php.

2. function has_children() {: This part is checking to see if the page has any sub-pages. If it does it shows them if it doesn't then it stops checking.

3. function is_child() { : This is for displaying the Parent page of the child page you are on if it has one.

You can now add your menu from the Appearance>Menus section of your WP-Admin area. Name the menu Main and add some Pages or Posts or Categories by using the check-boxes in the left side of the page and choosing “Add to Menu”. You can now drag and drop them into the order you want. Click “Save Menu” in the top right of the page.

NOTE: Your theme may say that your theme currently supports 0 custom menus. Don't worry, it will work. I don't know why I can't get it to say it supports the feature but it still works. If you know what I can do to fix this, please reply to the tutorial comments and I will update the tutorial.

Now go to a page or post in your website to view the changes. It probably doesn't appear to be a drop-down menu at this time. We need to add some style to the menu to make it "drop-down".

4. ADDING STYLE TO THE DROP-DOWN MENU

Open your style.css file. You can either replace the current navigation css for the theme, or keep it and delete it later.

NOTE: Some themes use the same CSS to style the navigational menu and to style the sidebars or other lists for the theme. You should back-up the style.css file before changing anything "just in case".

Replace you themes navigation's css with , or add the following code:

/* Navigation */
                      a {
                      color : #333;
                      }
                      #nav {
                      margin-left : 10%;
                      margin-top : 25px;
                      position : relative;
                      width : 62%;
                      padding : 0;
                      background : transparent;
                      }
                      #menu-main {
                      top : 0;
                      padding : 0;
                      line-height : 100%;
                      width : 90%;
                      }
                      #menu-main li {
                      margin : 0 2px;
                      letter-spacing : -0.05em;
                      padding : 0 0 8px;
                      float : left;
                      position : relative;
                      list-style : none;
                      }
                      #menu-main a {
                      color : #0090ff;
                      text-decoration : none;
                      display : block;
                      padding : 8px 20px;
                      margin : 0;
                      }
                      #menu-main a:hover {
                      color : white !important ;
                      }
                      #menu-main .current a, #menu-main li:hover > a {
                      background : #d1d1d1;
                      background : grey;
                      background : transparent;
                      color : #444;
                      border-top : 1px solid #f8f8f8;
                      }
                      #menu-main ul li:hover a, #menu-main li:hover li a {
                      border : none;
                      color : #666;
                      }
                      #menu-main ul a:hover {
                      background : #0399d4 !important ;
                      color : #fff !important ;
                      }
                      #menu-main ul {
                      background : #ddd;
                      display : none;
                      margin : 0;
                      padding : 0;
                      width : 200px;
                      position : absolute;
                      top : 35px;
                      left : 0;
                      border : 1px solid #b4b4b4;
                      }
                      #menu-main li:hover > ul {
                      display : block;
                      }
                      #menu-main ul li {
                      float : none;
                      margin : 0;
                      padding : 0;
                      }
                      #menu-main ul a {
                      font-weight : normal;
                      }
                      #menu-main ul ul {
                      left : 200px;
                      top : -3px;
                      }
                      #menu-main:after {
                      content : ".";
                      display : block;
                      visibility : hidden;
                      line-height : 0;
                      height : 0;
                      }
                      #menu-main {
                      display : inline-block;
                      }
                      html[xmlns] #menu-main {
                      display : block;
                      }
                      * html #menu-main {
                      height : 1%;
                      }
                      #main-nav:after {
                      content : ".";
                      display : block;
                      visibility : hidden;
                      line-height : 0;
                      height : 0;
                      }
                      #main-nav {
                      display : inline-block;
                      }
                      html[xmlns] #main-nav {
                      display : block;
                      }
                      * html #main-nav {
                      height : 1%;
                      }

Open in new window


Save the style.css file and upload it to your themes directory. Refresh a page or post on your website to view the changes. Play around with the CSS to change the color or placement of your theme's new horizontal drop-down menu.

That wraps up this tutorial! If you have any questions or want to leave a comment scroll down to post it. If you leave a question I will try to answer it as soon as possible.

You can view the theme live here:
http://wordpressexpression.com/wp/

Here is a before and after screenshot:

Before: Before

After: After
4
11,767 Views

Comments (3)

CERTIFIED EXPERT

Commented:
Voted Yes, above.  I'll keep this in mind when I go back to WordPress.

Author

Commented:
Thank you WaterStreet. If you ever need any help you you decide to go back to WordPress, just let me know.
CERTIFIED EXPERT

Commented:


I'll then post in the form of an EE question.  Thanks.

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.