Seattle Web Design 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() {
'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' ) ) {
'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.

<?php wp_nav_menu( array(

'theme_location' => 'main-menu' ,

'menu' => 'Main Menu' ,

'container'  => 'ul',

) ); ?>

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.

Leave a Reply

Kianoush Facebook Profile Kianoush Google Plus Profile Kianoush LinkedIn Profile Find Kianoush Twitter