Create Conditional Navigation Menus with Genesis Extender or the Dynamik Website Builder

Survey or QuestionnaireA few days ago, a WordPress user new to the Genesis Framework asked me whether it is possible to display tailored secondary menus on specific pages. All pages on the website should get the same primary menu and – besides a few exceptions – the same secondary navigation menu. The exceptions should get their own specific, secondary menu.

In this post I am going to show you how this can be done by applying conditional tags. Since I am not a trained coder, I prefer to use a tool to achieve this goal. The tool that I will be using in this case is the Genesis Extender.

For the remaining part of this post, I will assume that you have already installed and activated this nifty plugin. For more details about the Genesis Extender, please refer to this review.

For this example I have installed the Genesis Extender with the StudioPress Sample theme. This theme is freely available with the Genesis Framework, so that every Genesis user is able to follow along.

However, you can apply the Genesis Extender with any Genesis child theme – except for the Dynamik Website Builder. The Dynamik is a child theme and framework to create your own Genesis child theme that incorporates the same functionality concerning conditional tags.

What are Conditional Tags

Conditional tags are functions that let you control what content is displayed in a particular situation. The Conditional Tag Index of WordPress includes 37 of those conditions. A condition is either TRUE or FALSE.

With a conditional tag, it is for example possible to display a widget area only in a certain situation; namely when the condition is met. An example of a conditional tag is “is_home()”. With this function you check whether a page is the homepage. And a much used application of is_home() is that when the page is indeed the homepage you want to display the homepage slider.

Basically you can multiply the number of available conditional tags, since you can also negate a conditional tag. A widget area is only displayed when one or more conditions are not met. In our example of conditional navigation menus, we are going to use “is_page()” and “! is_page(). Or more verbose; is page and is NOT page.

What Do We Need?

We need a plan to arrive at our destination, so let us draw a little roadmap first. We need:

  1. pages – some of these pages will get a tailored secondary navigation, while the remaining pages will get the regular secondary menu.
  2. navigation menus – a primary navigation, and at least two custom menus that will act as the secondary navigation
  3. a conditional for each menu
  4. a widget area for every custom menu
  5. a little CSS to dress-up our custom menus – although not necessary, I will give the conditional menus their own background color

Let the fun begin.

Creating Our Pages

Since I assume you know how to create pages with WordPress, I will skip the actual process of adding pages. What I am going to show you the list of pages that we are going to use in our example:

Seven WordPress Pages

Seven WordPress Pages

We have seven pages altogether. All pages are going to get the same primary navigation. The pages titled Red, Green, and Blue will have their own custom secondary menu, while the remaining four pages will have the ordinary secondary menu.

Creating the Menus

The Other Menu

The Other Menu

For the Primary Navigation we will be using the wilwebs.com categories.

The Other Menu contains links to all seven pages listed above and can be considered as the default secondary menu.

The Red, Green, and Blue Menu have a tailored navigation:

  • Red Menu – Red, Green, Blue, About, Contact
  • Green Menu – Red, Green, Blue, Privacy Policy, Affiliate Disclosure
  • Blue Menu – Red, Green, Blue, Contact, Privacy Policy

All we have been doing so far is pretty usual WordPress administration stuff.

Creating the Conditionals

The Genesis Extender plugin adds two pages to the Genesis panel. In order to create our conditionals, we have to turn to the Conditionals tab of Extender Custom page.

Conditional Menu - Extender Conditionals page

Creating Conditionals

The pull down-menu Examples shows a couple of conditionals tags. The WordPress Codex lists conditional tags.

First thing to do is assigning a name to a conditional for easy reference. Next step is adding a tag. For our conditional menus, I have created the following Custom Conditionals:

  • red_page – is_page(‘Red’)
  • green_page – is_page(‘Green’)
  • blue_page – is_page(‘Blue’)
  • not_rgb_page – ! is_page(array ( 1758, 1762, 1760 ))

What is this? The conditional named “red_page” contains the tag “is_page(‘Red’)”, meaning it will only be applied to the page titled “Red”. That is it! The conditionals green_page and blue_page are using the same tag, but will apply to the page titled Green respectively Blue.

The tag of the conditional named “not_rgb_page” is a little bit different.

First of all, we see an exclamation mark (!) in front of the tag. This negates the condition. So we have to read this as “is NOT page”, hence: is not the Red, Green or Blue page.

Second, instead of the page titles, I have used the IDs of the pages regarding. You can also use the slugs. Titles and slugs are alphanumeric and therefore need to be placed within quotation marks. Digits are numeric and do not get quotations marks.

Third, since the tag applies to a series of IDs respectively page titles, we have to put those variables in an array. When you prefer the titles instead of IDs, you can also use “! is_page(array ( ‘Red’, ‘Green’, ‘Blue’ ))”.

When you rather do not use an array, you can also create three separate conditionals instead of ! is_page(array ( ‘Red’, ‘Green’, ‘Blue’ )):

  • ! is_page(‘Red’)
  • ! is_page(‘Geen’)
  • ! is_page(‘Blue’)

That is all. Creating the conditionals is actually the hardest part of creating the conditional menus.

Creating Widget Areas

Now that we have our conditionals, we can create the necessary widget areas, where we will add our custom menus. We continue with the Widget Area section of the Extender Custom page.

Custom Widget Areas

Custom Widget Areas

Creating a widget area that appears in a specific situation requires a minimum of three steps:

  • we have to name it – choose a name that makes sense to you
  • we need to choose a hook – you can select the hooks from a dropdown menu
  • we have to assign a conditional – which we have created in the previous step

In the screenshot above, you will notice that I have named the widget areas in line with the page titles where these will be displayed: bluepage, greenpage, otherpage, and redpage.

The widget areas on the Red, Green and Blue page will appear after the header, since I have used the genesis_after_header hook. To show you the ease and flexibility of Genesis and the Genesis Extender, I have used the genesis_before_header hook for the navigation menu on the other pages.

When you click on the Conditional Selected dropdown menu, you are presented a list with the conditionals created earlier. Assigning a conditional is a matter of checking the box in front of the name of the conditional.

The number in front of the Conditional Selected tells you how many conditionals have been applied. When you have created three separate NOT conditionals – one for each of the Red, Green, and Blue page – you would have selected all three conditionals for the otherpage widget area.

Adding Widgets

Adding Custom Menus

Adding Custom Menus

Now that we have our pages, our menus, our conditionals, and our widget areas, we are ready to add the Custom Menu widgets to the widget areas.

When you visit the Widgets page (Appearance >> Widgets), you will notice four fresh created widget areas: bluepage, greenpage, otherpage, and redpage.

All we have to do is add a Custom Menu widget to these four widget areas and select the appropriate navigation: Blue Menu, Green Menu, Other Menu, and Red Menu. Leave the Title blanc.

Adding CSS

The final step is dressing up the custom navigation menus by adding a little CSS. Go back to the Extender Custom page. You will see a Custom CSS area. Copy and paste the following CSS rules into that area:

#menu-red-menu,
#menu-green-menu,
#menu-blue-menu,
#menu-other-menu {
background-color: #F5F5F5;
border-bottom: 1px solid #DDD;
border-top: none;
font-size: 14px;
list-style-type: none;
margin: 0 auto;
overflow: hidden;
width: 100%;
}
#menu-other-menu {
background-color: #F5F5F5;
}
#menu-red-menu {
background-color: #F9B7FF;
}
#menu-green-menu {
background-color: #C3FDB8;
}
#menu-blue-menu {
background-color: #AFDCEC;
}
#menu-red-menu ul,
#menu-green-menu ul,
#menu-blue-menu ul,
#menu-other-menu ul {
float: left;
width: 100%;
}
#menu-red-menu li,
#menu-green-menu li,
#menu-blue-menu li,
#menu-other-menu li {
display: inline;
float: left;
list-style-type: none;
}
#menu-red-menu a,
#menu-green-menu a,
#menu-blue-menu a,
#menu-other-menu a {
border-right: 1px solid #DDD;
color: #333;
display: block;
padding: 7px 15px 6px;
position: relative;
text-decoration: none;
}
#menu-red-menu li a:hover,
#menu-green-menu li a:hover,
#menu-blue-menu li a:hover,
#menu-other-menu li a:hover  {
color: #0D72C7;
background-color: #FFF;
}
#menu-red-menu .current_page_item a,
#menu-green-menu .current_page_item a,
#menu-blue-menu .current_page_item a,
#menu-other-menu .current_page_item a {
color: #333;
background-color: #FFF;
}

We are done. Of course, you will need to adapt the CSS depending on the child theme regarding. And this is these are the results of our hard labor:

Menu of the Red Page

Navigation of the Red Page

Menu of the Green Page

Navigation of the Green Page

Conditional Menu - Secondary Blue

Navigation of the Blue Page

Navigation of the Other Pages

Navigation of the Other Pages

Numerous Applications

That is all, Folks! Please do not hesitate to leave a comment when you have questions or remarks. It is not imaginary that I have skipped a beat somewhere.

As you will understand, a conditional navigation menu is only one deployment of conditional tags. When you have a look at the Conditional Tag Index and the Genesis Hooks, I am sure you will come up with your own applications.

As mentioned in the introduction, you can install the Genesis Extender with every Genesis child theme, except for the Dynamik Website Builder.

Have fun!

wilwebs.com runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress.

Whether you're a novice or a seasoned developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

With the life-time updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Comments

  1. You say “you can install the Genesis Extender with every Genesis child theme, except for the Dynamik Website Builder.” I’m looking at both “extensions” and watched some tutorials on his Catalyst version too. So it looks like the functionality that is left out of Dynamik as opposed to Catalyst is in Genesis extender? Can you add Extender to a child theme you’ve created with Dynamik? Thanks

    • Hi Alex, basically it is the other way around.

      Catalyst and the Dynamik Website Builder (DWB) offer comparable functionality; to create turnkey websites – structure (page layouts) as well as design.

      Genesis child themes already incorporate a specific design (as defined in the style.css), and the Genesis Extender adds the ability to modify the structure – the page layouts – of these child themes without the need to manually customize the functions.php – without the need to code.

      So the DWB equals Catalyst.
      The Genesis Extender equals the DWB minus the design options.
      With DWB and Catalyst you can create new websites from scratch.
      With the Genesis Extender, you can modify the page layouts of existing Genesis child themes.

      Let me know when you have any further questions.

      - Wil

  2. Hello Will,

    Thanks for this post! I’m having a little Dynamik problem and I’m wondering if you had any advice.

    I’m trying to get an image to appear on the homepage of a site I’m working on, and stretching across the page’s entire width.

    This works well when I include the image in the body tags, but then it appears on every page on the site instead of just the home page.

    Could I use a conditional for this? And how would a noob go about it?

    Cheers,

    Esme.

    • Hello Esme,

      I have done this with one of my sites by adding a little CSS.

      Since I want the image background to appear on all pages, I have applied this code:

      html, body {
      background: url(images/image.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

      In case you only want the image to appear on the home page, you have to change the selectors from ‘html, body’ to ‘html .home’, so that the could would become:
      html .home {
      background: url(images/bullseye.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

      You can add this code to the CSS box of the Dynamik Custom Options. Please note that you will have to replace ‘images/image.jpg’ the URL with the name and location of your own image.

      Does that work for you? – Wil

Speak Your Mind

*