How to Display A Custom Menu in Specific Pages in WordPress

  • SumoMe

No. Not that menu.

Today I will share to you a very simple solution on how you can show different custom menus that corresponds to specific pages in WordPress 3.

Since WordPress 3 was released, it came with the handy feature of creating custom menus from the admin panel. Both default themes – Twenty Ten and Twenty Eleven supports this feature. For those who are still new to it, it can be accessed in Appearance > Menus. From here you can create new menus and manage existing ones.

There is a WordPress function that we need that allows you to display a custom menu in your theme. This is the wp_nav_menu(). For this tutorial I will leave it at that but if you want to familiarize yourself further with this function please click here. (A WordPress developer knows that there is no better resource to learn more about WordPress than the Codex. 🙂 )

With that we can begin with the “clever” part:
(skip here if you already know the stuff above)

When you want a menu to appear in a particular page, simply use the slug of that page as the menu name.

Most of you would have already predicted how the rest should work by now. Using the function wp_nav_menu in your template file, you only have to supply the page name in the function as argument for the menu name. Consider the following function:

function show_menu_for_current_page() {
	global $wp_query;
	$post_obj = $wp_query->get_queried_object();
	$page = get_page($post_obj->ID);

	$menu_name = $page->post_name;

	wp_nav_menu( array(
		'menu' => $menu_name
		));
}

When this function is used in your page template (assuming it is already written in your functions.php file), it displays the custom menu with the same name as the current page.

In my case, I used this to display a menu of sub-pages of a given page. Before anything else, I created custom menus consisting of sub-pages of their corresponding parent page. I named each menu to the parent page respectively. Every time a page OR one of its sub-pages is visited, it displays the menu of that family of pages (up to the parent) only. By modifying the code above by a parameter we can achieve this:

function show_menu_for_current_page() {
	global $wp_query;
	$post_obj = $wp_query->get_queried_object();
	$page = get_page($post_obj->post_parent);

	$menu_name = $page->post_name;

	wp_nav_menu( array(
		'menu' => $menu_name
		));
}

The only thing that changed here is Line 4. Instead of getting the immediate page ($post_obj->ID) I fetched the parent page ($post_obj->post_parent) so that the same menu still displays when the sub-pages are navigated.

I hope this little tutorial have been some help. Cheers!

Image credit: hisks

About maca

Hello, my name is Karlo Macariola. I once dreamed to be a painter or an animator but when I typed my first line of code I immediately fell in love with programming. Today my passions are with web development and web design though sometimes I still withdraw to my first love which is drawing. DeviantArt | Twitter | Facebook
This entry was posted in Stuff and tagged . Bookmark the permalink.

6 Responses to How to Display A Custom Menu in Specific Pages in WordPress

  1. cayun says:

    Hmm. Great Post.

  2. Hello,

    How to get custom menu title using post id?
    Thanks,
    Fawwad Ali Khan

    • maca says:

      Hi. What I did here is to make the custom menu title the same as the page’s slug so that I can “call” the custom menu title by getting the page’s slug. I hope this makes sense. 🙂

  3. Klaus says:

    Hi there Karlo – is there any way to contact you off-line? I may need someone for a small wp customization job that deals with exactly the thing you discuss in this posting….

    Klaus

  4. wido says:

    I wanted to say THANK YOU for your last snippet. I’ve been trying to pull this for hours… now I finally got it working. Thanks a lot

  5. Aleksandra says:

    hey Maca!
    I tired to use it on my own page, but it doesn’t work. I was fallowing the instructions – I place it in functions.php with certain name changes for menu and post name. as well as I post it in my blog post page, but with no results. Do you have any idea what I could do wrong?
    Cheers mate,
    Aleksandra

Leave a Reply to Klaus Cancel reply

Your email address will not be published. Required fields are marked *