• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Child Themes / Genesis Conditional Menus Revisited

Genesis Conditional Menus Revisited

By Victor M. Font Jr.
February 5, 201414 Comments

Contents
  • Overview
  • Genesis Conditional Menu Q1
    • How To Display Secondary Conditional Menu for Specific Page(s)
      • How to Use is_page()
  • Genesis Conditional Menu Q2
    • How To Display a Primary Conditional Menu for Specific Page(s)
    • How to Use is_page_template()
  • Genesis Conditional Menu Q3
    • How To Display a Secondary Conditional Menu for Specific SubPage(s)
  • Debugging Tips
    • Initially Populate Menu Location
    • Secondary Menu Disappears After Selecting Item
    • Portfolio Pages
    • Home Page

Overview

Genesis Conditional Menus Revisited

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.

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:

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.

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.

Use Conditional Secondary Menus in Genesis Themes
  • 6shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn6
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Nicky

    January 15, 2016 at 2:40 pm

    I 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?

    Reply
    • Victor M. Font Jr.

      January 15, 2016 at 3:44 pm

      Hi 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.

      Reply
  2. Gabrielle Nemes

    May 14, 2015 at 6:50 pm

    Is 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.

    Reply
    • Victor M. Font Jr.

      May 14, 2015 at 6:59 pm

      Hi 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.

      Reply
  3. Ben Taxy

    November 23, 2014 at 6:36 pm

    Victor, 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.

    Reply
    • Victor M. Font Jr.

      November 23, 2014 at 9:37 pm

      Ben, Please post a link to the site and I’ll take a look.

      Reply
      • Ben Taxy

        November 24, 2014 at 2:09 pm

        Victor – 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!

        Reply
        • Victor M. Font Jr.

          November 24, 2014 at 10:12 pm

          I 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');
          });

          Reply
          • Ben

            November 25, 2014 at 9:15 am

            Thanks so much, Victor! I’ll give it a shot!

  4. Tom

    July 30, 2014 at 2:57 pm

    Victor, 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!

    Reply
    • Victor M. Font Jr.

      July 30, 2014 at 3:08 pm

      Thank you Tom!

      Reply
  5. Amanda

    April 29, 2014 at 10:07 am

    Dear 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.

    Reply
  6. SiGa

    March 30, 2014 at 1:14 pm

    That´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!

    Reply
  7. Brad Dalton

    February 6, 2014 at 5:20 am

    You 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/

    Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page