Seattle Web Design 
WordPress Theme #3
WordPress Custom Theme – Navigation
To create your WordPress menu you need to pass three simple steps.
- Register your menu
- Add location for your menu
- Set up menu in WordPress dashboard
Register you menu
You need to introduce your menu to the WordPress and it happens in “functions.php” file. Open this file from your Desktop WP Website. This is where you should register your menu.
Here I want to register two menus, Main Menu and Bottom Menu.
//Register custom menus
function register_my_menus() {
register_nav_menus(
array(
'main-menu' => __( 'Main Menu' ),
'bottom-menu' => __( 'Bottom Menu' )
)
);
add_action( 'init', 'register_my_menus' );
}
// Add custom menus to Dashboard when theme is active
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus(
array(
'main-menu' => 'Main Menu',
'bottom_menu' => 'Bottom Menu'
)
);
}
There are two locations to make your changes. Be careful to make your require changes. If you do not have PHP knowledge, DO NOT TOUCH other parts. Almost remember, last element of an array does not have comma (,) at the end. Save functions.php and upload it to WP website.
Add Menu Location
You registered your menu and it is time to put menu WP <ul> list to your header.php, footer.php, or index.php file. Here is a piece of code you need to replace with your template menu.
<nav>
<?php wp_nav_menu( array(
'theme_location' => 'main-menu' ,
'menu' => 'Main Menu' ,
'container' => 'ul',
) ); ?>
</nav>
This will show Main Manu of your website. You need to do the same thing for Bottom Menu. All you should do is changing “main-menu” to “bottom-menu” and “Main Menu” to “Bottom Menu”.
I used “nav” and “ul” because these are what I usually use when I am coding a website. Always remember, if you are using special styling for your navigation section, put your Class or ID in your <nav>. For example <nav id=”my-main-menu”>
* If you need to assign id or class to the “ul”container, you can use ‘menu_id’=>’util’ or ‘menu_class’=>’util’ to the above lines.
* For more information please read codex navigation menu section.
* You can use li.current_page_item to your CSS. It is called current page style. It highlights your current page in the menu. Add it to your hover part of your link.
For example I used this code for one of my web projects:
#main-menu a:hover, #main-menu a:focus, #main-menu li.current_page_item a {Color:red; }
Save all your changes and upload them to your WP Website. You need to upload header.php, functions.php, and style.php to your web server.
Create Menu in Dashboard
Everything is done now and it is time to use your menu and activate it. Go to
Dashboard > Appearance > Menus > Create a new menu
For instance create “Main Menu” and add your favorite pages to your menu. Always remember, you can create separate links and add them to your menu.
In my next tutorial (Part 4), I will teach you how to create WordPress sidebars. It helps you to widgetize different parts of your website including sidebar area.