In Part 1, we showed just how easy it is to create dynamic login/logout menu links in WordPress. To do so, we used the upcoming Navigation block and the Block Visibility plugin. For Part 2 of this series, we are going to take dynamic navigation menus to the next level. 

Using the Pro add-on for Block Visibility, you will learn how to build conditional menus based on where they’re located. In other words, display unique menus or individual menu links on different pages of your website. We will be using a block theme to take advantage of block-based “template parts”, which are part of the Full Site Editing initiative.

As of version 5.8, WordPress core does not yet include the Navigation block or support Full Site Editing. Both are currently available if you are using the Gutenberg plugin and will be added to WordPress in the future, likely version 5.9 (late 2021). So while this tutorial may not currently apply to your website, it definitely will soon, and we want to showcase just how powerful Block Visibility can be! 

Why Create Dynamic Menus in WordPress?

In the previous article, we reviewed why you might want dynamic navigation menus on your website. We did so within the context of the 100% free Block Visibility plugin. The Pro add-on provides additional use cases, especially for those with larger, more “complicated” websites. Here are a few examples.

1. Increase conversions by hiding specific menu links or showing a completely different navigation menu on the checkout page of your online store.
2. Display a specific navigation menu on all child pages of your website but not on parent pages or the homepage. 
3. Create unique sidebar navigation menus based on the current post’s categories and/or tags.

Hopefully, that gets the wheels turning. You’re limited only by creativity and the needs of your website.

How to Add Dynamic Menus Based on Location

Tutorial Setup

Theme

As mentioned in the intro, we are using a block theme for this tutorial. If you would like to follow along yourself, you’ll need to have Gutenberg installed, and we recommend using the TT1 Blocks theme. This is a block-based version of the Twenty Twenty-One WordPress theme.

The number of publicly available block themes is growing as we get closer to an official release. Another great option is the Quadrat theme by Automattic. Of course, all block themes are considered experimental at this time and should not be used on a production website.

Demo Content

For this tutorial, we are using the example of an online travel website. This fictional site offers many different types of travel excursions, including hiking excursions. When a user navigates to the “Hiking Excursions” page, we want to display a secondary navigation menu highlighting the different “types” of hikes offered.

Our block theme includes a block-based template part called “Header”. We will be using the new Site Editor to modify this template part and conditionally display the secondary navigation menu on the “Hiking Excursions” page.

Step 1: Review the Header Template in the Site Editor

We’ll assume the primary navigation for our website is already set up. In a block theme like TT1 Blocks, the easiest way to edit the website header is through the Site Editor. With a block theme installed and the Gutenberg plugin activated, you can access the Site Editor directly from the WordPress admin screen.

The Site Editor will default to the Homepage of the site. From there, we can navigate to the Header template part by selecting the header area of the page. Once selected, the rest of the page will become obscured, and “Header” will appear at the top of the page, letting us know that we are editing the Header template part.

If you are new to the Site Editor, don’t be alarmed. This is a very new technology and will likely continue through numerous iterations before being made public in WordPress core. Comprehensive documentation and training material are also yet to be created. But again, the purpose of this tutorial is to highlight the potential of Full Site Editing and the power of Block Visibility. This is the future of WordPress.

Step 2: Create the Secondary Navigation Menu

Next, we need to create a secondary navigation menu that will only be visible on the “Hiking Excursions” page. To do so, we will use the Navigation block and add the menu at the bottom of the Header template part. The result will look like the following:

At this point, the secondary menu is visible on every page that includes the Header template part. We will fix that in the next step.

Step 3: Make the Secondary Navigation Menu Conditional

Finally, we need to use the Location control in the Block Visibility plugin to restrict where the secondary menu should be rendered. As a reminder, the Location control is exclusive to Block Visibility Pro.

With the Navigation block selected, locate the Visibility panel in the Settings Sidebar. The Location control then needs to be enabled by clicking on the ellipsis icon and choosing “Location”. See the screenshot below for reference.

With the Location control enabled, we can add a new rule that restricts the block’s visibility to the “Hiking Excursions” page. We will use the “Post” rule and then choose the “Page” post type. Finally, we will select the “Hiking Excursions” page. The resulting rule setup should match the following.

Now, if we view the homepage of our demo site, we will see the following.

However, when we navigate to the “Hiking Excursions” page, we see our brand new conditional menu!

That’s it!

Using multiple rules and rule sets, the Location control can be configured in hundreds of different ways to match your needs. We chose a very simple example for this demo. You can learn more about the different options in the Knowledge Base.

---

We hope this article series has shown you how easy it is to create dynamic menus in WordPress using the Block Visibility plugin. If you haven’t already, download the plugin for free on WordPress.org. If you are interested in the Location control, that functionality is available in the Pro add-on.

In next week’s tutorial, we will be looking at responsive design and the Screen Size control. If you want to stay updated on all future tutorials and plugin news, please consider subscribing to our YouTube Channel or following us on Twitter.

Until next time…