How to add manually any custom CSS menu to Wordpress 3+

This is a step by step tutorial how to add and run any custom CSS/CSS3 menu in Wordpress 3. The example presumes you have created or build using our generator your menu or piked any pre build menu template to walk with this example. This example is for both horizontal and vertical menus.

Step 1 - Create your custom menu in Wordpress

In your Wordpress "Dashboard" select "Appearance" tab and click on "Menu". Give your new menu appropriate name in "Menu Name" to better understanding where its going to be placed.
In our example we created two : "cust_menu_left" and "cust_menu_top" (as name suggests Custom Menu Left and Custom Menu Top).
Select from "Pages" block all menu items you want to appear in your custom menu and save you custom menu.

Step 2 - Add generated CSS menu code

For each Wordpress template where you want the menu to appear. Under "Apperance" click on "Editor" tab and select Stylesheet (style.css) file to edit.
Place your customized menu CSS/CSS3 code in the end of "style.css" file and click "Update File" button.
If your custom menu comes with any images upload them to the same Wordpress folder where the theme is located.

Remember to choose "Wordpress" in generated code window.

Step 3 - Publishing the Menu on Wordpress site

Place one of current PHP code snippet inside any Wordpress PHP template file where want the menu to show up.
If you generated code and choose "ID as Selector":
<?php wp_nav_menu( array( 'menu' => 'cust_menu_left', 'menu_id' => 'blendedMenu' ) ); ?>
If you generated code and choose "Class as Selector":
<?php wp_nav_menu( array( 'menu' => 'cust_menu_left', 'menu_class' => 'blendedMenu' ) ); ?>
If you generated vertical menu using our menu generator replace 'blendedMenu' with 'blendedMenuV':
<?php wp_nav_menu( array( 'menu' => 'cust_menu_left', 'menu_class' => 'blendedMenuV' ) ); ?>


For more detailed explanation visit Wordpress.org: Function Reference/wp_nav_menu

Step 4 - Check if it works

For this example we used original "Twenty Ten" menu.


And replaced it with our ready to use "Red Horizontal Menu Template" inside "header.php" file.