Creating WordPress sub navigation menus that only appear where you need them

It’s a bit of a mouthful and hard to explain, but if you build a relatively complex work website you’ll appreciate this.

At Suffolk Libraries we build microsites that sit within the main site. Often, these will have their own sub navigation. Take our schools service:

Apple also uses a sub navigation consisting of icons and labels:

In the past, we’ve created a custom menu in our functions.php file for each of these subsites. In order to display this custom menu, we’ve had to also write new header and template files. Before you know it, you’ve got 40-odd files in your WordPress theme.

We’re currently rebuilding the back end of the website, and one of the things we’re trying to do is abstract our layouts so we only use a handful of template files. So instead of creating separate template files for our schools and mental health information services, we want to use, say, one full width template with no additional custom header templates.

The problem lies in only displaying the schools sub navigation menu on the schools pages. How do we achieve this without creating a schools template that calls a schools header and a custom menu in our functions.php file?

The approach we hit on was to:

• create a widget area that sits above the main page content area in all our template files
• create custom menus using the WordPress admin area (Appearance > Menus)
• only add the appropriate custom menu when certain conditions are met (for example, add the schools menu to the widget area only when we're on any pages within the schools microsite)

Creating a subnav widget area and calling it in our page templates is easy. The difficult part is adding logic that controls when the widget displays anything, and what it displays.

Originally, I considered writing a function that went through all our logical options and displayed a menu accordingly. However, this soon resulted in a lot of if… thens.

And the solution to that problem? This is WordPress, so it’s to install a plugin.

Content Aware Sidebars

There are several WordPress plugins that allow you to add some logic to your widget areas. The best I’ve found is Content Aware Sidebars (or CAS).

CAS allows you to create sidebars that only appear on certain types of posts or pages. The amount of control it offers is impressive; for example, you can tell it to display a widget area on archive pages from a certain category as well as single pages within that category, or both even:

But the real beauty of CAS is that you tell it to merge or replace an existing widget area with your new widget.

So to create subnavigation menus that sit above the right microsites, we tell our new sidebar to replace the subnav widget area we’ve created in our functions.php file. Because this widget area is only created on the pages we stipulate, it will appear on the right pages and nowhere else.

Putting it all together

Although this process doesn’t require a huge amount of technical knowledge, you do need to understand how WordPress displays widget areas, and how you can use CAS in conjunction with WordPress’s out of the box functionality.

So, here’s a step by step guide (hullo there if you’ve simply scrolled down here):

1. Create a new widget area in your functions.php file. Call it something like Sub navigation, or abstract it even more and call it Pre-content widget.
2. Call this widget area using dynamic_sidebar in all your templates. You should test whether the sidebar has any content first with is_active_sidebar.
3. Install the Content Aware Sidebars plugin.
4. Create a new CAS sidebar for the submenu you need on your site. Set its display rules and tell it to replace the widget area you created in functions.php (you can create as many of these CAS sidebars as you like, but you'll only need 1 custom menu in functions.php)
5. Create a new custom menu in Appearance > Menus
6. Go to Appearance > Widgets
7. Add the custom menu you created in step 5 to the CAS sidebar you created in step 4
8. Remember to leave the widget area you created in step 1 empty

Why do this?

A few reasons:

• Cut down on template writing and maintenance
• Ensure consistent layouts and appearance
• Move custom menus from templates to the WordPress admin area (which means editors rather than coders control sub menus)

It’s an elegant way to control and fine tune website navigation. The only problem I’ve come across is with building complex display rules in CAS; I can’t, for example, combine caetgory and page rules. But that could be me doing something wrong.

What do you think? Are there easier ways to add sub navigation menus to your website?