s-design on "Sub Menus On Some Pages & Not Others - Using Page Templates"

I had a hard time figuring out how to place menus on only some pages and not all pages. I have now figured out a solution that I am happy with and so I am sharing it here, in case it could help others and to get feedback to help improve the idea.

Here is what I was trying to do:
I was trying to add six different sub menus to my site. I wanted each sub menu only accessed by clicking on "it's parent" link in the main menu. Here is an example of a website that is using this interface menu method that I am describing. When the site I have been working on goes live it will have this method here.

These are other features I wanted:
• I wanted it to be easy to add any of these sub menus to any page I wanted.
• I wanted to use a combo of the page and menu editors to make it easy to update any of the menus items in any of these sub menus in the future.
• I wanted the default to be: not showing any of these sub menus.
• I didn't want to use CSS display:none; to make the menus not show up (because I have read this could slows my site down, because they are still being loaded even though they don't show up. I don't know if this is true or not, but I wanted to try a different solution just in case).
• I also wanted my solution to work with the child theme I am using.

What I had tried - but couldn't get to work:
I tried to figure out multi site to solve this problem but it was way too complex.
I tried the solution on this support page http://wordpress.org/support/topic/custom-menus-on-different-pages shared by "teknohippy." This seemed like is would work great but I couldn't get the custom fields to work.

What I used to solve these challenges:
• New Page templates
• My child theme's functions.php file
• The admin menu editor and
• The admin page editors for each page

These are the steps I followed:

Step 1. In my functions.php file in my child theme I "registered" the six menus I wanted to add, like so:

register_nav_menus(array(
			'sub-menu-1'  => __('Page 1 Menu', 'catcheverest'),
			'sub-menu-2'  => __('Page 2 Menu', 'catcheverest'),
			'sub-menu-3'  => __('Page 3 Menu', 'catcheverest'),
			'sub-menu-4'  => __('Page 4 Menu', 'catcheverest'),
                        'sub-menu-5'  => __('Page 5 Menu', 'catcheverest'),
			'sub-menu-6'  => __('Page 6 Menu', 'catcheverest')
		)
);

Of course these names ("sub-menu-3", "Page 3 Menu", etc.) can be customized to fit your needs. These menu names should now show up in the wp-admin > in Apperance > menu.

Step 2. I created six duplicates of the default page template that was in my parent theme and put them in my child theme folder and renamed them like this (you can name them as you wish):

page1.php
page2.php
page3.php
page4.php
page5.php
page6.php

Note: If you are not using a child theme you could just put these in your theme file. BUT, if you are not using a Child Theme you really should put in the time and effort to learn how to create and use a child theme. It will save you tons of time in the future when it comes time to update your site. There is tons of info about this in the codex or just search about how to do it in google.

Step 3. I then opened each of the new page template files (that I put in my child theme) and changed the template name that I wanted to show up in the WP admin > page editors > template selector > drop-down menu > under "Page Attributes." For example:

I changed this comment line (at the top):

<?php
/**
 * The template for displaying all pages

to be this:

<?php
/**
 * Template Name: sub-menu-1

Then save them. They could easily be named something else, like "About Pages SubMenu Template" or whatever. The names you changed in these template files should now be showing up in: the WP admin > page editors > template selector > drop-down menu > under "Page Attributes."

Step 4. In each of the page template files I added code like this. I placed it where I wanted each menu to appear on each page template.

<div class="extra-sub-menus">
            <?php
                if ( has_nav_menu( 'sub-menu-1' ) ) {
                    $args = array(
                        'theme_location'  => 'sub-menu-1',
			'fallback_cb'	  =>  '',
                        'container_class' => 'menu-header-container',
                        'items_wrap'      => '<ul class="sub-menu-list">%3$s</ul>'
                    );
                    wp_nav_menu( $args );
                }
            ?>
</div>

Note: This coded is a little different depending on what menu page template I was adding this code to. Where you see "sub-menu-1" (in two spots) I switched it for each of the different sub menus that I registered in step 1 above, such as: sub-menu-2, sub-menu-3, sub-menu-4, etc.

I added the above code into template page1.php. In page2.php I added the same code but switched "sub-menu-1" to "sub-menu-2" In page3.php I switched it to "sub-menu-3" and so on for each of the other page template files.

Step 5. I went into the menu editor in the wp-admin (it is in Appearance > Menu) then created the six menus with the page links I wanted on each menu. Selected the location (the template) that I wanted each menu to go with. To make it easy I made the "location" a similar name to each menu. For example: I created a menu by the name of "sub-menu-1 links" and selected it's location/template to be "sub-menu-1" etc.

Step 6. I then styled the css of the menus using the "extra-sub-menus" and "sub-menu-list" classes (you can do a ton of styling changes with just these two classes in the code above). You could choose to do this step last once you know it is all functioning the way you want.

Step 7. Then in the admin, I went to the page editors of each of the pages I wanted a different menus to appear on and selected the relevant "menu page template." For example: I added four page links to "sub-menu-1" in the menu editor, so I went into page editor of each of those four pages and selected the corresponding page template for "sub-menu-1" in the Page Attributes - Template drop-down selection menu. I updated each page. Now I have "sub-menu-1" showing up on all the pages I added it to. And, this menu is not showing any where I did not add it. Awesome!

Step 8. Repeated step 7 for each of my other sub menus.

Done! Hope this helps someone else.

Disclaimer: I don't know how to create a plugin to do something like this. If anyone is aware of a plug in that does something like this, please share. I don't know much PHP or Javascript, so I don't know if I can answer everyone's questions about this. If anyone has feedback to improve this method I would be happy to hear it. If I'm doing something "wrong" please share.