Use Conditional Secondary Menus in Genesis Themes

2 Comments

Use Conditional Secondary Menus in Genesis ThemesAnyone who has ever used the Genesis framework to develop WordPress child themes understands the power, flexibility and security it provides to website development and maintenance. One true advantage is the ability to easily configure secondary menus or sub-menus on your site, if your child theme supports them. While secondary menus are all well and good, customers often require secondary menus to display only for specific posts or pages. This means developers have to approach sub-navigation menus conditionally. This requires some customization to the child theme. Let’s look at two approaches to solving this problem. They both produce the same results, but one creates a validation error, the other doesn’t.

Approach #1

The first approach is the easiest to implement and requires no customization at all. Functionally it works, but it will generate a W3C validation error. If W3C validation is as important to you as it is to me, you should probably jump to Approach #2.

This approach requires the Genesis Simple Menus plugin. This plugin allows you to select different secondary navigation menus for any post or page. Before we get started, make certain you have secondary navigation turn on in the Genesis Theme Settings:

Genesis Navigation Settings

Next, create and save an empty menu. I named the illustrated one “no-menu.”

Create an Empty Menu

Finally, using the Genesis Simple Menus plugin, select the menu you just created for any page or post upon which you do not want to display the secondary navigation menu.

As I mentioned earlier, this approach works but it produces the following W3C validation error because system still creates the beginning and ending ul elements and there aren’t any corresponding li elements for them to wrap around.

Approach #1 W3C Validation Error

Approach #2

Approach #2 is what I consider the right way, but it requires inserting a few lines of custom code into your theme’s functions.php file. In this example, the code references the page ID for the page upon which you want the secondary navigation menu to appear. The page id is an internal WordPress identifier which is hidden by default. One way to find the page id is to view the All Pages screen and hover your mouse over the name of the page. As you do this, look at your browser’s status bar. The url of the page is displayed. The url includes text that reads “post.php?post=xxx” where the xxx is a numerical value representing the page id. This is not an easy way to find the page id, but this is WordPress and there are a lot of talented developers out there writing plugins that expand the platform’s functionality. One such plugin is WP Show IDs by Jason of Primo Themes. Install this or any of the other “show id” plugins and your “All Pages” screen will look like this:

Find the Page ID

Now that you have the page id, copy the following code to the bottom of your theme’s function.php file. Change the 8 to the page id of your target page and save the file.

1
2
3
4
5
6
/** display secondary menu only on chosen page **/
add_action('template_redirect', 'child_conditional_actions');
function child_conditional_actions() {
if ( !is_page( 8 ) )
    remove_action('genesis_after_header', 'genesis_do_subnav');
}
/** display secondary menu only on chosen page **/
add_action('template_redirect', 'child_conditional_actions');
function child_conditional_actions() {
if ( !is_page( 8 ) )
    remove_action('genesis_after_header', 'genesis_do_subnav');
}

You can use any criteria to drive the “conditions” for displaying the secondary menus. What I’ve shown you is a very simple example. If you choose to use categories or multiple pages, you’ll have more coding to do, but at least now you have a head start for getting there. For example, for multiple pages, change the “if” statement to include an array of page numbers like if ( !is_page( array(8,9,20,23) ) ). This shows the secondary menu only on the pages listed in the array.

If you would like to see the site where Approach #2 is implemented, please visit Bachman & Associates. Click on the Associates menu item to see the conditional secondary navigation menu. It appears for each of the associate’s pages as well.

Comments

  1. Ian H. says:

    Great article, thanks! 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 desgined 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?

    Thanks!

    • Victor Font says:

      What you are asking to do is pretty complex, but without seeing the written specs, I’m not sure that what you want to do at an individual parent level of granularity is feasible with WordPress and the Genesis framework without some sort of membership management plugin. Many schools today put up a simple front end site and leave the more complex things to Renweb. My daughter’s school uses Renweb and as a parent, I access it regularly. It’s a pretty good system.

Speak Your Mind

*


*

* Copy this password:

* Type or paste password here:

s2Member®