website design
The current version ofWordpress, 3.8, does nothave an option for generating different main menus for different areas of a website. I found some suggestions on how to do this by modifying code, but no adequate plugin, or systematic way of including this in auser friendly way.   Until oneis written I am using an approach that seems to work  well.  I explain how to do this with anArtisteer generated theme, so if youhave a different them you will need to make some adjustments to the code.Screen Shot 2014-01-17 at 7.03.15 AM, Jan 17, 2014

Install the Advanced Custom Fields plugin

You will also need to download and install Advanced Custom Fields by Elliot Condon. I am using version 4.3.4.  Using this plugin is optional, but it will give you a nice drop down box when you are editing or creating a page or post to select your menu of choice for each page, or when editing categories.

Make a child theme

I highly recommend you make a child theme since you will need to edit the theme files. To do this I recommend One-Click Child Theme by tychay.   Making a child them is a one step process and afterward you can delete or deactivate the plugin.  Use a file manager like FileZilla to create a function.php and header.php file in your child theme.  I usually copy and paste or duplicate them and move them from the theme folder to the child theme folder. Then use the WordPress>Appearance>Editor to delete all of the functions after the PHP opening tag in the child them functions.php file.  The function.php file should look like this:

<?php //Opening PHP tag

If you already have a child them and functions.php file then you can ignore the last step. It is important not to have a closing tag. WordPress will look at the main them function file then at the child them functions file. You can add other functions as you wish. I usually also add a function to add a favicon since Artisteer does not do this.

Add a function to register your menus

Now that you have a function.php file in your child theme folder you can add a function to register your menus. Add the following code after the opening PHP tag or last function in the file:

register_nav_menus( array(
'menu-1' => __( 'Section 1 Menu', 'mytheme'),
'menu-2' => __( 'Section 2 Menu', 'mytheme'),
'menu-3' => __( 'Section 3 Menu', 'mytheme')
) );

Add as many menus as you need. you can update the names later. the menu labels such as 'menu-1' should be lower case and letters, numbers, dashes and underscores. The menu name can be whatever you choose.  You will then see the following in the WordPress>Appearance>Menus page:

Screen Shot 2014-01-17 at 5.28.27 AM, Jan 17, 2014

The new menu names will be the ones you created and Primary Navigation is the original menu. For each menu you create you will need to check the Theme location for it.  So create a new menu for Section 1 and check the corresponding box.  Later, in the post/page editing page, you will select which section the post/page belongs to and WordPress will select the corresponding menu.

Modify your Theme Header

Now you can register different menus for different sections of your site, however you need to tell the header.php file which section you are in so it will display the correct menu. Find the area in the header that displays the menu. Make sure you are editing the file in the child theme folder. If you make a mistake you can always copy and paste from the original file.  In the Artisteer generated them I am using the following sections displays the menu:

<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'art-hmenu'
)
);
?>

The line 'menu' => 'primary-menu' is what selects the menu. Change this line to read a variable that we will assign to the menu name of choice:

'menu' => get_post_meta( $post->ID, 'menu_name', true),

Next we add the code that will look for a custom field on the page or post where you will select your menu of choice. Add this between the PHP tag and the previous menu code.

This if/else code will check to see if you selected a menu in the custom field. If custom field is empty then it will default to the primary-menu. If there is a selected value than it executes the code that selects the corresponding menu.  The finished code will look like this:

<?php

$key_1_value = get_post_meta( $post->ID, 'menu_name', true );
// check if the custom field has a value
if( empty( $key_1_value ) ) {
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'art-hmenu'
)
);
} else {

echo theme_get_menu(array(

'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => get_post_meta( $post->ID, 'menu_name', true),
'class' => 'art-hmenu'
)
);
}
?>

Your theme's header may look different. The key is that we will look for a custom field called menu_name, and use it in place of the default used by the theme.

Set up the Custom Fields

After you install and activate the Advanced Custom Fields plugin select Custom Fields  on the WordPress sidebar. Select 'Add New' at the top of the page. Next give the Field Group you are creating a title, i.e., "Menus", then select 'Add Field'.  Enter a Field Label, I used 'Menu', and a field name such as menu_name, which is the same as the field you are searching for in the line:  $key_1_value = get_post_meta( $post->ID, 'menu_name', true ) which you added to the header.php file.  If you do not see this editing page make sure you click the small edit tab under Field Label:

Screen Shot 2014-01-17 at 6.56.04 AM, Jan 17, 2014

In the Field Type choose 'Select' to get a drop down menu of your menus to select from when you create a post or page.  You will populate this with the menu-labels you created in the functions.php file in the Choices box and add a Default value of primary-menu.  You will need to check to see that you theme uses the label primary-menu for the main menu or not.  You will see this is in the original header.php file. In this case the line: 'menu' => 'primary-menu',  tells us what this theme uses for the main menu.  Your menu field label should look like the following:

Screen Shot 2014-01-17 at 6.54.31 AM, Jan 17, 2014

For location select 'Logged in User Type'  is equal to 'Administrator'  to get started. This will insure the menu selection will show up everywhere for editing posts, pages, categories etc. when you are logged in.  You can use the 'Add rule group' to add in the capability for users with other roles. Of course you can fine tune this to show up only for pages or posts since you have created a default menu for the other items.

Screen Shot 2014-01-17 at 9.30.35 AM, Jan 17, 2014

Next, under Options, select 'High(after title)'. This will place the Menu options at the top of your editing page. you can select 'Side' or 'Normal' but since this is a menu choice I like to make it obvious. You can also choose 'Required' in the Label Field editing page.  If you do not choose a menu then the normal primary menu will end up on the page.  Your edit page should now look like this when you add a post:

Screen Shot 2014-01-17 at 7.03.15 AM, Jan 17, 2014

Another nice feature is that a category will also show these choices on the edit Category page:

Screen Shot 2014-01-17 at 7.05.47 AM, Jan 17, 2014

Conclusion

Until I can find a plugin for this, or have time to write one, this is the most elegant way I have found to be able to select specific menus for different areas of my sites.  I would like to add some features such as being able to add groups of pages to a particular menu.  With a little more coding you can use conditional statements to select a different default menu depending on whether the user is logged in or not or what his role is.

 

Leave a Reply

website creation

Screen Shot 2016-01-17 at 6.55.02 AM, Jan 17, 2016

We create and manage websites for small businesses and non-profits.

flash presentations

Inquire about a Flash presentation or application for your site.