Add WordPress Native Menu Feature to WordPress Themes

Posted in Wordpress Development on 20 June 2012 1 comment

WordPress introduced the Native Menu feature in WordPress 3.0 which allow theme designers to add any number of native menus into their themes. Native menus are useful because it allows users to freely decide which item should appear in their menu, you can mix and match items which include Categories, Pages and Self-defined links.

As theme designers, we can add more than 1 native menus to the theme to any position that we want. For example, we can create 3 native menus in our theme, for example: “Top Pages Menu”, “Top Categories Menu”, “Footer Link Menu”. We should name the menus according to their location in the theme so that user knows which menu they are working on.

Now you might think, what if the user did not want to use Native Menu, instead they want the traditional way to display all pages in their menu? A good way is to let user choose whether to use Native Menu or the default (traditional) one. In another word: we need Backward Compatibility. We will look into that in Step 3 below.

Some WP functions that we need

- wp_nav_menu() – to display native menu
- has_nav_menu( name ) – to check whether a menu called “name” is activated
- register_nav_menus() – to register nav menus

Step 1: Registering the Native Menu

Open up your theme’s functions.php, append this to the file:

add_action('init', 'register_nav_menus_on_init');
 
function register_nav_menus_on_init() {
	register_nav_menus(array(
		'top-pages-menu' => 'Top Pages Menu',
		'top-cat-menu' => 'Top Categories Menu',
		'footer-link-menu' => 'Footer Link Menu',
	));
}

In the codes above, we registered 3 native menus, each named with their location in the theme.

Step 2: Place the Native Menus into your theme

Now, add this code to where you want the native menus to appear.

In our example, we need to add 2 menus to header.php:

 
<div class="pages-nav">
	<?php wp_nav_menu( array( 'theme_location' => 'top-pages-menu' ) ); ?>
</div>
 
....
 
<div class="cats-nav">
	<?php wp_nav_menu( array( 'theme_location' => 'top-cats-menu' ) ); ?>
</div>

- Take note how we pass the registered name to the wp_nav_menu() function.
- wp_nav_menu() will generate the <ul> and <li> automatically for your menu, provided that user has activated the menu.

In our example, we need to add 1 menu to footer.php:

<div class="footer-nav">
	<?php wp_nav_menu( array( 'theme_location' => 'footer-links-menu' ) ); ?>
</div>

- Take note how we pass the registered name to the wp_nav_menu() function.
- wp_nav_menu() will generate the <ul> and <li> automatically for your menu, provided that user has activated the menu.

Step 3: Backward Compatibility

Most likely you will need to display a default menu if the user has not activated (or decided not to use) native menu for that location.

Now we need to modify our header.php to achieve that:

 
<div class="pages-nav">
	<?php
	if (has_nav_menu('top-pages-menu')) {
		wp_nav_menu( array( 'theme_location' => 'top-pages-menu' ) );
	} else {
		wp_list_pages();
	}
	?>
</div>
 
....
 
<div class="cats-nav">
	<?php
	if (has_nav_menu('top-cats-menu')) {
		wp_nav_menu( array( 'theme_location' => 'top-cats-menu' ) );
	} else {
		wp_list_categories();
	}
	?>
</div>

Do the same to footer.php.

Step 4: Try out your native menu

Go to Admin Panel > Appearance > Menus.

If you registered the native menus correctly, you will see them appearing in the “Theme Locations” box.

Now, to test your native menu, create a new native menu by clicking on the “+” button of the right box.

Add categories, pages or links to the menu by using the 3 boxes under “Theme Locations” and save it.

Lastly, add your new menu to your desired Theme Location and save it.

Now view your theme.

Please Share or Like this post if it helps :)

 

Posted by Zen on 20 June 2012 • 80,775 visits 1 comment
Tags :


or Subscribe to specific category only :




  - 1 Comments


Trackbacks

  1. Add WordPress Native Menu Feature to Wordpress Themes … | Scion Players

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»