Some time ago I wrote a “how to" article titled Use Conditional Secondary Menus in Genesis Themes. That article has proven to be very popular receiving thousands of page views. It has also generated many questions from people leaving comments and sending emails. This post revisits the topic of Using Conditional Menus in Genesis and answers the three most frequently asked questions compiled from those you've requested.
Genesis Conditional Menu Q1
I would like to select which menu to display as the secondary menu depending on the page. I can do the conditional part depending on the page but not sure how to refer to *which* of my custom menus to use as the subnav (e.g. I have defined menu1, menu2, menu3, etc – how do I tell genesis use this menu?)
How To Display Secondary Conditional Menu for Specific Page(s)
To test for a specific page ID, use the conditional is_page() function. The is_page() function can test for a valid page by page ID, title, slug or variable conditions contained in an array. The following code displays a different secondary conditional menu based on the page ID of a page selected from the primary menu. The code was tested on the Genesis Parallax Pro Theme and the Genesis Executive Pro Theme.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //* When a new page is selected from the primary menu, //* execute the change_secondary_menu function add_action( 'template_redirect', 'change_secondary_menu' ); function change_secondary_menu() { //* Do nothing if menu not supported if ( ! genesis_nav_menu_supported( 'secondary' ) ) return; add_filter( 'wp_nav_menu_args', 'choose_secondary_nav_menu' ); } function choose_secondary_nav_menu( $args ) { if ( $args['theme_location'] == 'secondary' ) { //* default secondary menu $args['menu'] = 'Menu1'; if( is_page( 37 ) ) { $args['menu'] = 'Menu2'; } if( is_page( 39 ) ) { $args['menu'] = 'Menu3'; } } return $args; } |
How to Use is_page()
- Using is_page(); without any parameters returns true when any single Page is being displayed.
- Inserting a page ID as a parameter (i.e. is_page( 42 );), returns true when that specific page is being displayed. To determine the page ID, install a plugin like Reveal IDs by Oliver Schloebe to display the ID on the All Pages panel.
- You can test for a specific page's title, known to WordPress as the post_title, by using is_page( 'Contact' );
- You can test for a specific page's name (slug) by using is_page( 'about-me' );
- To cover all of your bases, test for a specific page by creating an array that includes post ID (42), or post_name ("about-me") or post_title ("Contact") by using is_page( array( 42, 'about-me', 'Contact' ) );
You need to be very careful that you don't inadvertently pass an empty parameter to is_page(). Empty parameters always produce a true result. For example, all of the following entries will produce a true result:
- is_page( '' )
- is_page( 0 )
- is_page( '0' )
- is_page( null )
- is_page( false )
- is_page( array() )
Genesis Conditional Menu Q2
Can you offer any advice on REPLACING the menu you removed via code for the PRIMARY navigation, to replace the primary navigation with a different menu depending upon the page ID or the page template?
How To Display a Primary Conditional Menu for Specific Page(s)
As with secondary conditional menus above, to test for a specific page ID to display a primary conditional menu, use the conditional is_page() function. The is_page() function can test for a valid page by page ID, title, slug or variable conditions contained in an array.
How to Use is_page_template()
An alternative to is_page() is the is_page_template() function. To test for a specific page template, use is_page_template( 'about.php' ). The parameter is the name of the template file. If a template is located in a subdirectory, pass the path as the parameter as in is_page_template('templates/about.php').
The same code used above for secondary conditional menus may be modified to change the primary conditional menu as in the following example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //* When a new page is selected from the primary menu, //* execute the change_primary_menu function add_action( 'template_redirect', 'change_primary_menu' ); function change_primary_menu() { //* Do nothing if menu not supported if ( ! genesis_nav_menu_supported( 'primary' ) ) return; add_filter( 'wp_nav_menu_args', 'choose_primary_nav_menu' ); } function choose_primary_nav_menu( $args ) { if ( $args['theme_location'] == 'primary' ) { //* default primary menu $args['menu'] = 'Menu1'; if( is_page( 37 ) ) { $args['menu'] = 'Menu2'; } if( is_page( 39 ) ) { $args['menu'] = 'Menu3'; } } return $args; } |
Genesis Conditional Menu Q3
I was wondering if there were other conditional arguments you can use when choosing to display a secondary menu. My school’s website is going to be designed around three “users” – parents, teachers and students. Is there a way of checking to see which parent a page has and display a secondary menu conditionally for a whole range of pages?
How To Display a Secondary Conditional Menu for Specific SubPage(s)
If I understand your question correctly, you want to test a subpage for its parent page and then display a secondary menu based on that parent page. The first thing to know is that WordPress does not have a native function to test for a subpage, so you'll have to write a function to include in your theme's functions.php file. This code block hasn't been tested on any of my sites, but the is_subpage() function is based on an example from the WordPress Codex, so it should work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | //* When a new page is selected from the primary menu, //* execute the change_secondary_menu function add_action( 'template_redirect', 'change_secondary_menu' ); function change_secondary_menu() { //* Do nothing if menu not supported if ( ! genesis_nav_menu_supported( 'secondary' ) ) return; add_filter( 'wp_nav_menu_args', 'choose_secondary_nav_menu' ); } function choose_secondary_nav_menu( $args ) { if ( $args['theme_location'] == 'secondary' ) { //* default secondary menu $args['menu'] = 'Menu1'; if( is_page() && is_subpage() == 37 ) { $args['menu'] = 'Menu2'; } if( is_page() && is_subpage() == 39 ) { $args['menu'] = 'Menu3'; } } return $args; } function is_subpage() { global $post; // load details about this page if ( is_page() && $post->post_parent ) { // test to see if the page has a parent return $post->post_parent; // return the ID of the parent post } else { // there is no parent so ... return 0; // ... the answer to the question is false } } |
Debugging Tips
These conditional menu debugging tips come from my experience as I was testing this code. I've included them to make it easier for you to solve similar problems you may experience as you implement conditional menus on your site.
Initially Populate Menu Location
For these solutions to work properly, you should make sure you have an initial menu set in the location you want to change conditionally. Set the initial menu on the Appearance/Menus admin page. If you don't have an initial menu, the line of code that tests for the menu location, if ( $args['theme_location'] == 'secondary' ), will return false and the code won't execute.
Secondary Menu Disappears After Selecting Item
Make sure you include the page ids for the pages assigned to the conditional secondary menu. The code above is only testing for the page id when you click a primary menu item. You will see the secondary menu appear where it is supposed to, but as as soon as you click any secondary menu item, the secondary menu will disappear. The page you want will display, but the menu will be gone. Why? Because you haven't accounted for the secondary menu page ids. The solution is to expand your is_Page() test to include the page_ids for the secondary menu (i.e. is_page( 37, 3545, 251, 309 ) ).
Portfolio Pages
This site uses the Genesis Executive Pro Theme. The Executive Pro Theme allows users to set up a portfolio page like this one //victorfont.com/portfolio/. This page does not exist until run time. It is generated by Genesis when a visitor selects it from a menu. Its related content are custom post types that you create as you would any other post or page from the Portfolio/Add New link on the Admin menu. To test for a portfolio page, you would have to use is_page_template( 'archive-portfolio.php' ).
To take this further, let's say you create a secondary menu for a portfolio page that displays a link to each of items on the portfolio page. Test for all of these with if ( is_page_template( 'archive-portfolio.php' ) || is_page( 1,2,3,4,5) ). The double pipe ( || ) is a logical "OR." This code reads, "Display the secondary menu 'IF' a user clicks on the portfolio page 'OR' any of the pages I have listed on the secondary menu."
Home Page
In most case, the Home menu item is a link to your site's URL. WordPress has two conditional tags that could work to test for whether you are on the home page or not. They are is_front_page() and is_home(). In fact, WordPress has many built-in conditional tags that you could use to test for various conditions in your conditional menu code. To learn more, I suggest you visit Conditional Tags.
Nicky
January 15, 2016 at 2:40 pmI have been trying to find a solution to achieve the type of menu in this site:
http://ziplineinteractive.com
If you click on “Services” a sub-menu appears horizontally and indicates which section you are on. Would your solution work for something like this?
Victor M. Font Jr.
January 15, 2016 at 3:44 pmHi Nicky,
Yes, it will work to display the menu conditionally, but the css formatting will require some considerable work if you want your menu to look like the sample site.
Gabrielle Nemes
May 14, 2015 at 6:50 pmIs it possible to add a menu to an image or other item? What I want to do is have someone either hover over an image or click an image and, rather than being taken to a page, have a menu either slide-out or drop-down from the image, from which the user can then choose a topic.
Victor M. Font Jr.
May 14, 2015 at 6:59 pmHi Gabrielle,
Yes it’s possible. Please take a look at http://cobinlaw.com/. This is a site I built with a completely customized menu. One thing you need to be aware of is that this type of icon based menu won’t work on mobile devices because “hover” is a mouse interaction. Hover doesn’t work on mobile devices.
Ben Taxy
November 23, 2014 at 6:36 pmVictor, this is so helpful – thank you so much!
One question: I’m floating the secondary menu in the header right widget area (as per the StudioPress demo). The secondary menu also appears as the footer (also as per the demo).
My goal is to replace the secondary menu in both locations. Currently, the code only replaces the secondary menu in the footer and doesn’t replace it in the header right widget area.
Any ideas? Thanks so much.
Victor M. Font Jr.
November 23, 2014 at 9:37 pmBen, Please post a link to the site and I’ll take a look.
Ben Taxy
November 24, 2014 at 2:09 pmVictor – thanks so much!
You can see the issue at pitcheffectively.com (the site is in development currently – I’ve made the home page live so you can look at it).
You can see that the menu on the bottom of the Parallax Pro theme is the new custom menu, but the menu floating in the header top right is the secondary menu. If you click on Video 1 in the secondary menu (I also made this page live so you can see it) you’ll see that the bottom menu changes back to the secondary menu. So your code is working perfectly for that.
Thanks so much for helping me investigate this issue!
Victor M. Font Jr.
November 24, 2014 at 10:12 pmI don’t know if this is going to work or not Ben, but my first thought is to programmatically change the class of the nav-header. You would have to add some code to the home page header.
jQuery(document).ready(function ($) {
"use strict";
$('#nav_menu-2').child().child().removeClass('nav-header').addClass('nav-secondary');
});
Ben
November 25, 2014 at 9:15 amThanks so much, Victor! I’ll give it a shot!
Tom
July 30, 2014 at 2:57 pmVictor, thanks for putting this together — I was successful in the past with conditional nav menus in Genesis, but I haven’t had to program them for a while. Great tutorial!
Victor M. Font Jr.
July 30, 2014 at 3:08 pmThank you Tom!
Amanda
April 29, 2014 at 10:07 amDear Sir,
Thank you for this article. I am currently using the Executive Pro theme. My site’s main navigation is a custom menu in the Header Right widget.
I have different primary and secondary menus for different pages. Thus, depending on which menu item is selected in the custom menu in the Header Right widget, a specific primary and secondary menu will appear. The secondary menu acts as a sticky menu – its menu items is a replica of the primary menu. The sticky menu appears as soon as you scroll down the page.
I’m not sure how to change the code to achieve this.
Any pointers would be much appreciated. Thank you.
SiGa
March 30, 2014 at 1:14 pmThat´s one useful article – and exactly what I needed for a step forward in my work with Genesis. Thanks so much for sharing your knowledge, much appreciated!
Brad Dalton
February 6, 2014 at 5:20 amYou can also change the nav menu conditionally in any theme for logged in and out members http://wpsites.net/web-design/members-nav-menu-logged-in-members/