The ability to have a different main menu on different pages based on conditions is extremely powerful stuff. This tutorial is going to show you exactly how you can do this without an extra plugin.
If you're not a reader, we're also going to be doing some Video Tutorials in anticipation for the Online Video Courses that we'll be releasing! (Click here to vote for an Online Course you'd like to see us produce to help you).
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
Here's our first video filmed with our new webcam - the Logitech c920 - which explains the content of this post.
Background: Why this tutorial on how to have a different main menu on different pages?
As with all great tutorials, there needs to be a reason why someone is wanting to learn what you're writing. So I thought I would show you a great example of where this menu strategy is used excellently out IRL to get you excited.
Below is a screenshot of the top section of the Commonwealth Bank of Australia's website.
Being one of the largest banks in Australia they naturally have lots of different types of customers they are optimizing their website for.
Users create complexity.
After lots and lots of research (I'm sure) the people at the Commonwealth Bank of Australia (from hereon CBA) have identified that they have 3 main types of users and each expect (and need) different services and thus different information and websites pages. These 3 types of users are shown up in the menu at the top left of their website.
- Corporate & Institutional
Most of the users are Personal, so the website loads with this type of user selected (shown above).
But if you select...say...Business, the main menu changes, as shown below.
And now the website is tailored to display information and services CBA are offering businesses.
They have a different main menu on different pages.
[clickToTweet tweet="Showing information tailored to the user on your website will make or break your website." quote="Showing information tailored to the user on your website will make or break your website."]
Why? Because it works to increase your conversion rate. Conversions = sales. We know this. Even grandma knows this.
In this tutorial we'll be recreating the below screenshot (done with the Beaver Builder Theme but you can apply this logic to any theme as I will show you below).
We are going to use the Top Menu to toggle the menu underneath.
So, if you are on the Personal page and you click Business, the menu underneath changes from Personal pages (Banking, Home Buying and Super & retiring) to Business pages (Products, Business support and tools), as shown below.
We are also going to implement the ScrollTo feature of the awesome Beaver Builder page builder for WordPress (click here to read our post on the ScrollTo feature in Beaver Builder) so that the following occurs:
- When you click from Personal to Business in the Top Menu, the menu below changes.
- If you click on one of the links in the below menu that has just changed, it will smoothly scroll to that section on that page.
Below is the final outcome of this tutorial. By learning this you'll be one more step closer to being a WordPress / Beaver Builder Master!
Let's do this!
Step 1: Create the pages that will be used to toggle the menu
The Top Menu has links to the Personal banking page and the Business banking page (see below image up in the top menu).
What we need to do is give each row that we need to smoothly scroll to a unique ID.
Our Personal banking page will have three rows on the page that we need to scroll to - Banking, Home Buying and Super & Retiring. Let's give each of these rows a unique ID.
To do this, edit the Personal banking page with Beaver Builder and then hover over the row that will be scrolled to when the user clicks on Banking in the menu and click the wrench icon, like below.
Next, click on the Advanced Tab and add an ID for the row. This is shown below.
This first row on the Personal banking page is all about Banking options and this is the row that the page will scroll to when the reader clicks on the word Banking in the menu, so let's give this row the ID of Banking, as shown below.
Repeat this step for the remaining rows on the Personal banking page that users will scroll to when they click a link in the menu.
Carrying on with the example, I repeat this step and add an ID to the Home Buying and Super & Retiring rows.
Once the Personal banking page is completed, we then add ID's to the rows on the Business banking page.
By the end of this step we now how both our Personal banking and Business banking pages designed and the divs that we'll need to scroll to all have ID's on them in Beaver Builder.
Step 2: Create the menus and assign them to the appropriate menu locations
Now that we've got our two pages set up and the rows in each page have IDs we can use to ScrollTo with the ScrollTo feature in Beaver Builder, we need to create the menus.
We create the menus like we normally would by going to your WordPress Dashboard > Appearance > Menus and creating them there.
For this tutorial, we need these three menus:
- The Top Menu that will act as our toggle for the different menus. In this example, it will have the links Personal and Business.
- The Personal Menu that contains the links for the pages on Personal banking.
- The Business Menu that contains the links for the pages on Business banking.
We create the Top Menu as per below and assign this new menu to the Top Bar Menu menu location in our theme (this is for the Beaver Builder theme, if you are using a different theme you will have to choose a menu location that is appropriate for your theme).
In this menu we add the Personal page and the Business page.
Then we create the Personal menu like below and assign the Personal menu to the Header Menu menu location.
IMPORTANT! By setting this Personal banking menu to the Header Menu (see image below) this menu will be our default menu that loads on our website. This is an important point of this tutorial. This tutorial will teach you how to change this default menu (Personal banking) to the Business banking menu when Business is clicked.
Now, because we're going to be smooth scrolling to rows on this page using the Beaver Builder page builder's built-in smooth ScrollTo, we make the URL for each link have the value of the # sign + the the ID of that row on the page.
For example, in the animation above in Step 1 we gave our first row on the Personal banking page the ID of banking so we add # + banking = #banking into the URL for this link, like below.
What this means is that when the Banking link is clicked on the Personal banking page, it will scroll to the row with the ID of banking.
Below you can see an example of how we have added #banking to the Banking link's URL.
We continue to add URLs for all the other links in the menu using this formula of # + the ID we gave each row we will need to scroll to.
Once complete, we preview the page on the front end and click through all the links to ensure they smoothly ScrollTo the row that they're support to scroll to.
The below screenshot shows that when I click on the Home Buying link it smoothly (and correctly) scrolls to the row that I gave the ID of homebuying. Also note that the URL for the Home Buying link in the Personal menu was #homebuying.
We repeat this step for the other pages in the menu. In my example, I edited the Personal banking menu and adjusted the URL's of the links in that menu to the ID's of the rows on the Personal banking page that need to be scrolledTo once clicked on.
Step 3: The Magic! Conditionally change the WordPress menu
So we've got our two pages set up (Personal and Business) and we've created all three menus (our Top Menu and then our Personal banking menu and the Business banking menu).
Now we just have to change the menu for each page so that each page shows the links appropriate to that section of the website.
Don't die on me here - we're doing this all for user experience and conversion optimization - the money maker! (let's not mention traffic just yet - that's for some later tutorials).
We know from Step 2 that because we set the Personal banking menu to be in the Header Menu location, it will be the default menu used on our website. We can check this by previewing our website and clicking around a bit, noticing that the Personal banking menu is shown all over our website.
Letl's now change the menu from the Personal banking menu to the Business banking menu when we are on the Business banking page.
Firstly, we need to get the ID for the Business menu. To do this we go to WordPress Dashboard > Appearance > Menus and then we select the Business menu in the menu dropdown, as shown below.
IMPORTANT! Even if you go to your Appearance > Menus and the Business menu is showing already, still complete this step to refresh the page and regenerate the Page's URL.
Click the Select button next to the drop down and the page will reload.
We then check the URL and the ID of the Business banking menu is at the end. For me, it is ID 32. This is important for the next step.
Go to your active Theme's functions.php file using cPanel or an FTP client and add the below PHP code into your active Theme's functions.php file.
For example, if you are using our Electro CHARGE child theme you would go to /wp-content/themes/electrocharge and add the below PHP to the functions.php file in this folder.
THINGS TO NOTE WITH THE ABOVE PHP CODE
- We are leveraging the wp_nav_menu_args WordPress filter (read more on this here) to trigger our function.
- $args['theme_location'] == 'header' ensures we are only changing the menu that is in the Header Menu position and not other menus like our Top Menu or Footer Menu.
- is_page('1159') checks to see if it is the Business page (the ID for the Business page is 1159). If this condition is met, we then change the menu to the menu with the ID of 32 (we know the ID for our Business banking menu is 32 because of the step just above).
And that's it!
Now when we view our website everything is working as expected. The menu changes between the Personal banking and Business banking pages and the links scroll to the sections on the page when clicked.
Wrapping it up
This is an extremely valuable tutorial in my eyes because it gets your hands dirty with some PHP code and also presents the endless possibilities with WordPress. It's so extremely flexible and the functions within it allow us to better our user experience every day.
Below you can have the Top Menu (the menu with Personal and Business) visible always on mobile devices so they aren't hidden behind a slide down menu. This is great because they act like tabs.
When we click Business in our example below, the links in the slide down menu change to the Business links. It's super cool!
Comment and share
Share this post to show that you're a master at conditionally changing the WordPress menu by clicking the Share buttons on this page.
Also, we're on social media so don't forget to follow us for more great tips, discounts and much much more.