WordPress.org

Ready to get started?Download WordPress

Forums

Custom Menus on Different Pages (23 posts)

  1. wates
    Member
    Posted 3 years ago #

    I am developing a website for a client using WP and would like to display different menus on different pages. So for instance if a user selected the Profile page the sidebar would display the profile menu, if they selected the services page it would display the services menu and so on...

    I can create a custom menu and have also looked at custom page templates but I can't work out how to add a specific custom menu to individual pages, or groups of pages.

    Firstly I was wondering if this was indead possible and if it is, some idea of how to do it would be really appreciated.

  2. miocene22
    Member
    Posted 3 years ago #

    First make sure you have registered your menus in functions.php:

    //register the custom menus
    function register_my_menus() {
    register_nav_menus(
    array(
    'profile-menu' => __( 'Profile Menu' )
    'services-menu' => __( 'Services Menu' )
    )
    );
    }
    add_action( 'init', 'register_my_menus' );

    Customise each menu in the wordpress backend.
    Then call the relevant menu using an if statement in the sidebar (or wherever you want the menus to appear).

    <?php
    if (is_page('profile')){
    wp_nav_menu(array('menu'=>'profile-menu' ));
    } elseif (is_page('services')) {
    wp_nav_menu(array('menu'=>'services-menu' ));
    }
    ?>

    ensure the string in the is_page() function matches the slug (or id) of the page you want to check.

  3. wates
    Member
    Posted 3 years ago #

    Hi Miocene, thanks for the quick reply, I will give that a go and let you know how I get on... cheers

  4. teknohippy
    Member
    Posted 3 years ago #

    I've been needing the same thing, a different menu for particular pages. I wanted to avoid having to have named pages in conditional statements though so have gone for something different, that means I don't have to change the theme to add a new page/menu pair.

    In the theme I have:

    <?php wp_nav_menu( array( 'container' => 'none', 'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) ); ?>

    Then in the page I simply have a custom field called "MenuName", which is set to match the name of the wordpress nav_menu I want used on that page.

    If a custom MenuName is not defined then it will fall back to the nav_menu assigned to that theme_location.

  5. trixienolix
    Member
    Posted 3 years ago #

    teknohippy I like your approach but you still have to set up the name of the different custom menus on the functions.php page don't you? Which is fine if you're a techy person, but if you're handing the wp site over to a non-techy client then it's not ideal either.

    I've been trying to work out the ideal front-end user solution to this. I wonder whether widgetising the theme in the place you want the menu to go, then make the menus in the admin, then add these menus to the widgetised area using the menu widget. Then you'd need to get the widget logic plugin to do the conditional statements in a "friendly" non-techy way.

    What does anyone think??

  6. trixienolix
    Member
    Posted 3 years ago #

    ok, just tested it and you don't need to add the names into functions.php, so it's a good solution. Thanks!

    One question - if i don't define a custom MenuName in a page or post then I don't want it to show any menu. Can you tell me how to do this?

  7. teknohippy
    Member
    Posted 3 years ago #

    If I don't add a custom field for a menu then it seems to just default back to the one assigned to that location in the Appearance -> Menus.

    I was quite pleased to see that happen without me having to code anything. *grins*

  8. trixienolix
    Member
    Posted 3 years ago #

    teknohippy - you're right that if you don't add a custom field for a menu then it defaults back to the one assigned to that location in the Appearance -> Menus. But this is what i *don't* want to happen. I want it to default to no menu at all, including no html code.

    I found the answer, in case anyone else want sto know... just use the fallback_cb code but with no value:

    'fallback_cb' => ''

    So my sidebar.php file looks like this now:

    <!-- custom fields need to be inside the loop -->
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <?php wp_nav_menu( array( 'fallback_cb' => '', 'theme_location' => 'sub-navigation', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) ); ?>
    
    content here as well
    <?php endwhile; ?>
  9. wates
    Member
    Posted 3 years ago #

    Thanks for all the answers, I think you guys are FAR more technical than me... I'm starting to understand bits of this but I have to be honest I'm not getting it all. Im going to try what you have suggested again and will post again with any issues, however stupid they may seem to me... I hope that's OK!

  10. Mark
    Member
    Posted 2 years ago #

    Hmmm...
    What does "In the theme I have:" mean? What file does this line of code go into? I've tracked down the primary menu code in the header.php, but not the secondary menu code that teknohippy refers too. Using twenty eleven. Maybe that's the issue?

  11. teknohippy
    Member
    Posted 2 years ago #

    Mark...

    This code is in the header file:

    <?php wp_nav_menu( array( 'container' => 'none', 'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) ); ?>

    Then in the admin site you can add new menus under the appearance section. These menus you add will have names.

    Then if you require a different menu on a given page you need to make sure first that you can see the Custom Fields section of the page. Check the Screen Options link at the top to make sure you can see it.

    Then create a new custom field called MenuName and give it a value matching the name of the menu you want that page to use.

  12. Mark
    Member
    Posted 2 years ago #

    Thanks teknohipppy. I see now that this topic concerned the primary menu while I thought it was about the secondary menu in the sidebar. I think I found a plugin "Custom sidebars" to take care of my issue.

  13. teknohippy
    Member
    Posted 2 years ago #

    It'd work for any theme_location.

    Glad you've found a solution.

    Cheers
    Iain

  14. jacobbarnett
    Member
    Posted 2 years ago #

    teknohippy, your solution indeed looks like poetry! As one who is at the beginning here, I need a couple more pieces:

    > ...Then in the page I simply have a custom field called "MenuName", which is set to match the name of the wordpress nav_menu I want used on that page.

    IF I created a MenuName: "123", what is the code / syntax for creating a custom field for "MenuName" and setting MenuName to ("123")?

  15. teknohippy
    Member
    Posted 2 years ago #

    Custom fields are added in a posts edit page.

    If you can't see them check "screen options" at the top of the edit page.

    Example image

    You'll see any existing custom fields there as above, although you will most likely not have any.

    Just click "Add Custom Field" button to create a new one.

    Use "MenuName" for the Key and the value should be the name of the Menu you want to use, the name you gave the menu in the "Appearances -> Menus" section

  16. jacobbarnett
    Member
    Posted 2 years ago #

    Thank you, Teknohippy! I appreciate the detail for the custom fields.

    RE: This code is in the header file:
    -----------------
    <?php wp_nav_menu( array( 'container' => 'none', 'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) ); ?>
    -----------------
    WHERE???

    I tried placing this code in 'header.php' and 'functions.php' in the Twenty Ten theme. Both locations crashed the site (but I did hear a deafening round of applause for having backed up the entire site and restoring the incorrectly edited files).

    Where should it be placed? And, does any of this code contain an example name, which needs to be edited for a particular site?

  17. teknohippy
    Member
    Posted 2 years ago #

    Err. I'm trying to remember what site I had to do this for!

    ...Time passes...

    Okay found it, we'll use it as an example.

    If you look at the homepage (http://gigajam.com/) you'll see the site needed four main sections, one for each of guitar, bass, keyboard and drums. Now when you get into those sections I wanted a different main menu for each of the instruments. This is the tabbed menu right at the top. If you go into any of the instrument "schools" you'll see it change.

    Now the code we've been discussing that outputs the menu is a function called wp_nav_menu. You're theme will probably already have a call to this function in your header file.

    You can learn more about wp_nav_menu on its codex page.

    What is happening with the code as discussed above is that I am adding the following parameters to the wp_nav_menu call that was already in my header.

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

    If you compare that to the codex page you can see that I'm passing something into the menu argument. What's being passed in is the result of the call to get_post_meta(), which in pulling the value of MenuName out of the custom field for any given post/page.

  18. jacobbarnett
    Member
    Posted 2 years ago #

    teknohippy ~ Many Thanks, again, for your assistance here! I apologize for not quite getting this; there must be some particle I'm missing here.

    What is the complete name of the WP file in which the code (below) needs to be placed?

    -----------------
    <?php wp_nav_menu( array( 'container' => 'none', 'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) ); ?>
    -----------------

    And where in that file does it need to be placed?

  19. teknohippy
    Member
    Posted 2 years ago #

    It can depend on the theme, but it would invariably be found in header.php.

    What theme are you using?

  20. jacobbarnett
    Member
    Posted 2 years ago #

    I'm using Twenty ten.

    I placed the code string:
    <?php wp_nav_menu( array( 'container' => 'none', 'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) ); ?>

    In the header.php file, (trying both body, head and above the head). It only printed the page names at the top of the page.

    I have created a custom menu w/ menuname: CoachingMenu

    I have created a custom field on the page:
    Name: 'MenuName'
    Value: 'CoachingMenu'

    No joy.

    I'll leave this up for a while for you to take a look at:
    http://counseling-coaching.com

    ???? --- Jacob

    P.S. ~ What IS happening is the default menu names are appearing at the TOP of all pages EXCEPT the 'Coaching' page - on this page, the custom menu items are listed. The 'Coaching' page is where I am attempting to get the custom menu to appear.

    "Perseverance Furthers" - closer!

  21. jacobbarnett
    Member
    Posted 2 years ago #


  22. jacobbarnett
    Member
    Posted 2 years ago #

    OK! Got it! I appreciate your patience and perseverance here!!! Thank you!!!!

    Solution:
    Theme: Twenty Ten
    File: header.php
    Original Code Line: <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    Revised Code Line: <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu' => get_post_meta( $post->ID, 'MenuName', true) ) );?>
    Also: "Then create a new custom field called MenuName and give it a value matching the name of the menu you want that page to use."

    Nothing like reaching a solution! Thank you all for assisting this and my learning process here!

    With Best Regards, Jacob

  23. teknohippy
    Member
    Posted 2 years ago #

    Glad you've got it working, even happier you came to it yourself. You learn more that way.

    Cheers
    I

Topic Closed

This topic has been closed to new replies.

About this Topic