Displaying Menus On Specific Pages In WordPress

Displaying Menus On Specific Pages In WordPress

WordPress is pretty damn cool

It’s been a while since I’ve written a post (mostly because of life happening and a freelance project), and I thought I would get back into the swing of things by writing something on WordPress. I’ve been doing more work in it lately and have had the pleasure of seeing some cool things done by my manager. One of which is to get different menus, using WordPress’ Menu Manager, to display on different pages. For instance, you have a Services page that you want to display a services menu in the sidebar, and a portfolio page with a different menu. It is stuff like this, and the amount of support you can find on the web that makes me really like WordPress. Aside from it being relatively easy to theme.

Create your menus

This isn’t a tutorial on how to create menus using WordPress, so I am going to assume that you the reader already know how to do that. The menu manager is under Appearance>Menus, and there are probably plenty of other tutorials on how to do that. Once you have your menus set up, like mine are in the image below, you are just a step away from getting a specific menu to display on a specific page.

WordPress Menu Manager

If and else come to the rescue

Really, there is not much to explain. The first line of the if/elseif tells WordPress what page to assign the menu, the second prints out a title for the menu, and the third tells it what menu to use. The else statement says, if the above conditions are not true, use this menu instead. All YOU have to do is place this code where you want the menu(s) to display, change the page, menu, and title names, and you are ready to go. Here is the code:

<?php
if (is_page(array('services-for-you'))) { //what page
	print("<h3>My Services</h3>"); //prints title
	wp_nav_menu('menu=services-menu'); //what menu
}
elseif (is_page(array('my-portfolio'))) {
	print("<h3>My Portfolio</h3>");
	wp_nav_menu('menu=portfolio-menu'); 
}
else {
	print("<h3>More Info</h3>");
	wp_nav_menu ('menu=info-menu');
}
?>

And that is all there is to it. You can obviously have as many ‘elseif’ statements in there as you want. Got any cool chunks of code that make WordPress do some cool stuff? Comment and let me know!

Coupon Code: webmachine

Tags:

9 Responses to “Displaying Menus On Specific Pages In WordPress”

  1. Chris Elias says:

    That’s a really good idea. Thanks for posting!

    • jcDesigns says:

      LOL. Glad you think so, cause it was YOUR idea. I said “my manager” in the post, so don’t even think I wasn’t giving you credit!

  2. FifeSEO says:

    Good stuff. Been looking for something like this so i’m gonna give it a try right now.

  3. FifeSEO says:

    This is a bit long-winded, if you have 45 sub-pages in 5 parent pages you’re gonna need 45 different elseif statements.

    • jcDesigns says:

      You have 45 sub-pages, and each of them is going to be calling a different navigation? If that is true, this is probably not the option for you. You could do this same kind of thing multiple ways. I believe there is a plugin that will do something close to this, or you could create a template that calls a specific menu and set the pages that use it to that template, or rewrite the php so that it is calling something other than a page name.

      In the case that this was used at work, there were like 5-7 pages that used different navigations, not 45. Using this, you are only setting the pages that have different menus, while one menu is the default.

  4. FifeSEO says:

    Cool no worries. What I have is 5 parent pages/sections with around 10 sub-pages. So I wanted all sub-pages under each section to display the same menu. I was going to go down the template route but this will probably confuse the client so I’ve opted for the Custom Page Menu plugin which seems to do the trick in a fairly straightforward manner.

    Thanks for sharing this code though, I’ve saved it for future reference =)

  5. Chris says:

    Great piece of advice. many thanks. I created a WP page template and pasted the code below “get_header(); ?> ” near top of page and set up my pages and menus accordingly. Works first time when I set the pages to the new theme. Now to do some CSS styling to create a class and arrange the menu as horizontal items near the top. Works better than any of the plugins I’ve come across and leaves you free to style the menu how you want!!

  6. Jean says:

    Hi,

    Very nice idea! But my menu is now vertical and not horizontal? Would great to find a way to make it horizontal.

Leave a Reply