28
August

WordPress 3 menus in you wordpress theme

Since wordpress 3 they have introduced a custom menu option which is something I really missed in the wordpress versions. But unfortunately this requires a bit of code change for out dated themes. This tutorial will show you in simple steps how you can add your own menus for wordpress themes.
In a nut shell, wordpress allows you to define the locations for your custom menus. If you have not defined these menu locations you will most likely see a message in the administrator stating that the theme doesn’t support menus.
Step 1 – Modifying your functions.php
In order for wordpress to recognize a menu location, it has to register with the system at run time. You can do this by creating a custom function as follows.

Single menu

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' )
);
}

Multiple menus

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' ))
);
}

The register_nav_menus() function let you register multiple locations in your theme for menus. If you require more than one menu you can simply add more elements as shown above. The ‘header-menu’ refers to the tag which is used to recognize the menu in the theme and ‘Header Menu’ is just a display name in your admin area.
Since this is a custom function you have to make sure that wordpress runs this function at start every time when someone comes to the site. This is achieved through the use of add_actions() function.
add_action( ‘init’, ‘register_my_menus’ );
This function tells wordpress to run the register_my_menus() function after wordpress has finished loading but before any headers are sent. Once both of these are in place wordpress will now know that the theme has a location called ‘Header Menu’ in its theme for menu placement.
Step 2 – Adding the location to your theme
You can easily add the location by writing the following line of code on the location where you need to add the menu.
<?php wp_nav_menu(  array( ‘theme_location’ => ‘header-menu’ ));  ?>
This simply tells the system to add the menu registered to ‘header-menu’ at this location. But personally I would say use a safety check before adding this. Because if for any chance your register_my_menus() function doesn’t work you will end up without a menu for your site.  There for you can do the following.

if(function_exists(' register_my_menus’)) {
wp_nav_menu(  array( 'theme_location' =&gt; 'header-menu' ));
} else {
wp_list_pages('hide_empty=0&amp;title_li=');
}

This initially checks if your function ‘register_my_menus’ was registered successfully or not. If it was successful then the uses will see your custom menu. If not they will end up seeing your standard menu.

Step 3 – Customizing the menu
Now all you need to do is login in to your admin area and customize the menu in Appearance -> menu section.

2 Responses to “WordPress 3 menus in you wordpress theme”

  1. nuwan says:

    Hi Kasun,

    You might wona a.dd a syntax highlighter plug-in to your template to make your code snippets be more clear.

    Good to see you back in bloging.

    Cheers,
    /Nuwan

  2. Kasun says:

    Yap.. Added one today. Hope this time my blogging time span last longer than before..

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment

Spam protection by WP Captcha-Free