Create a conditional menu for WordPress website pages

Create conditional menu for WordPress website pages

In this article, we will see how to create a conditional menu for WordPress website pages. Having different menus on various pages can make things more user-friendly and help with easy navigation. Sometimes, especially on a one-page website, you might need special sections like a dedicated shop or contact page. In such cases, the usual navigation links might not work well on these separate pages.

The need for conditional or dynamic menus

For instance, if your navigation is set up to guide users through different sections on a single-page layout, it won’t be as effective on individual pages like a shop or contact page.

Likewise, when users visit your shop page, its role is unique compared to the rest of your website. To enhance their experience, you may want to use the top menu specifically to showcase product categories or provide essential information for potential buyers. This way, you can tailor the navigation to suit the specific needs of each page.

Unlocking Possibilities with Conditional Menus

To achieve the possibility of having the conditional menu on your WordPress site pages, we can use the free plugin Conditional Menus.

Step 1 – Install the Free Plugin

  1. Navigate to your WordPress Dashboard.
  2. Go to Plugins → Add New.
  3. Search for “Conditional Menus” and install it.
  4. After installation is done, activate the plugin.
Conditional Menu

Step 2 – Create Menus for Each Page

In the example, there is another short home page “Safety Home”. We want the left side menu to be the same but the links to be different so that users can navigate the pages related to “Safety Home”.

In the following screenshot, we have displayed the primary menu which is configured on the site level for all pages.

Left Side Primary

Now let’s create an alternative menu to appear on the desired pages e.g. “Safety Home”.

  1. Go to WordPress Dashboard → Appearance → Customize → Menus.
  2. Create a new menu, e.g., “LeftSide Safety Home”
  3. Add relevant menu items or custom links.
Left Side Safety Home

Once the menu links are finalized save and publish it.

Step 3 – Set the Menu Locations

Navigate to the Manage Locations as:

Appearance → Menus → Manage Locations.

In the primary menu, select both the conditional menus that we created in the above steps.

Menu location

Now click on the “+ Conditions” link in front of the alternative menu we want on the other page and select the desired pages.

Select page

As we need a different menu on the “Safety Home” page we have selected it in this example.

Once the desired page(s) are selected, click “SAVE”.

Thats all!

Conclusion

Now, the site will load the “LeftSide” (primary) menu while the “Safety Home” page will show the menu links defined in the “LeftSide Safety Home” menu.

With this approach, you can manage and optimize menus for specific pages, providing a more tailored and user-friendly experience.

Related Posts