In this tutorial I will show you how to use one of our css drop down menus with Wordpress. This tutorial will not show you how to create a menu from scratch, but will walk you through the process of taking one of our menu themes and applying it to a menu that is built with Wordpress. Building a Wordpress drop down menu this way can save you a bundle of time if you are looking for a pre designed solution.

Note:
Check out our Wordpress Plugin for an easier way to build responsive, drop down menus in Wordpress.

Demo

Step 1: Download Menu Code

Use the link below to download the source code for this Wordpress down down menu. We have more drop down menu designs that are compatible with this tutorial.

Download Source

Step 2: Upload Files

Unzip the source code files which should look like the image below. Next, upload the whole folder called cssmenu to your Wordpress theme's directory.

Step 3: Build your Menu in Wordpress

Wordpress has a simple, easy-to-use interface for building drop down menus. Go to Appearance > Menus and build and save a custom menu. Take note of your menu name (mine is 'Main Navigation') so that you can use it in the next step.

Step 4: Include CSS Styles

The next step is to add a little code to our functions.php file. Almost every Wordpress theme has a functions.php file, but if you don't see one in your theme just go ahead and create it.

What we want to do is let Wordpress know about the new CSS and javascript files we just uploaded. The following function does just that. Place the below snippet of code at the bottom of your functions.php file.


add_action('wp_enqueue_scripts', 'cssmenumaker_scripts_styles' );
function cssmenumaker_scripts_styles() {
wp_enqueue_style( 'cssmenu-styles', get_template_directory_uri() . '/cssmenu/styles.css');
}

Step 5: Add our Custom Walker Class to functions.php

We have created a custom Wordpress Walker Class to make our menus more compatible with Wordpress. This class alters the HTML output of your Wordpress menu so that it will match the structure of the menus on our site. This will allow us to simply drop in the CSS code to get a menu theme working.

To use this place the code below inside the functions.php file inside your theme folder. If functions.php does not exist, create it and then drop this code in.


class CSS_Menu_Maker_Walker extends Walker {

var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent

    \n";
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent

\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;

/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}

/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

$output .= $indent . '
';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$item_output = $args->before;
$item_output .= '';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '
';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "

\n";
}
}

Step 4: Print Menu in Theme File

Now that we have our custom Walker function in place we need to actually print the menu in one of our template files. Place the below php snippet in any template file that you would like your menu to show up on.


wp_nav_menu(array(
'menu' => 'Main Navigation',
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Maker_Walker()
));
?>

  1. 'menu' => Name of the menu you created in Step 3.
  2. 'container_id' => The id that will be applied to the containing DIV around the menu. 'cssmenu' is our default that we use on the site. You can change this if you want but you will also have to change the CSS later.
  3. 'walker' => This tells the menu to use our custom Walker class to print out the HTML

Step 5: Check that everything works.

If everything was done correctly you should be able to see your brand new Wordpress drop down menu theme applied to your Wordpress menu. If not, here are a couple of common problems that might be the issue.

  1. Make sure that your style sheet is linked up correctly. If all you see are blue links and an unformatted list then this is probably the issue. View the page source and make sure that the style sheet with your menu CSS is being included in the <head> section of your template.
  2. Make sure the images are linked up properly in the CSS. If you see some styles applied but images missing this may be the issue.

If you run into any problems please leave comments below and we will try to help out

Meet the Author

Russell Martin is a computer engineer and internet aficionado. He has been working in the web design/development industry for over 10 years now and enjoys the freedom of a job away from the office. Currently living in Thailand, he is focusing on sharing his web design knowledge by writing blog posts and tutorials.