facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

WordPress: Different main menu on different pages to better user experience

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).

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

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.

cba-home-page

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.

They are:

  1. Personal
  2. Business
  3. 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.

cba-business-home-page

And now the website is tailored to display information and services CBA are offering businesses.

They have a different main menu on different pages.

Showing information tailored to the user on your website will make or break your website.Click To Tweet

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.

Different main menu on different pages

This animation displays how we can click on the link titled Business and the menu underneath changes from the Personal banking topics to match the Business banking topics.

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:

  1. When you click from Personal to Business in the Top Menu, the menu below changes.
  2. 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!

different-menu-banking-complete-outcome

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).

top-menu-links-for-different-menus-banking

The only thing we need to do here is setup our pages for the smooth ScrollTo feature of the Beaver Builder page builder for WordPress (which you can read more about by clicking here).

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.

click-and-scroll-row-wrench

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.

adding-id-to-row-for-smooth-scrolling-personal

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:

  1. The Top Menu that will act as our toggle for the different menus. In this example, it will have the links Personal and Business.
  2. The Personal Menu that contains the links for the pages on Personal banking.
  3. 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.

different-menu-on-different-pages-top-menu

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.

different-menu-on-different-pages-personal-banking-menu

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.

Different main menu on different pages

Ensure you add the # symbol at the start of the URL box and BEFORE the ID of the row.

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.

personal-banking-click-scrollto

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.

selecting-the-business-banking-menu

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.

showing-business-banking-menu-id

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.

  • thumb-bewell

    BeWell

    $69.00
    Live PreviewAdd to cart
  • thumb-electrician

    Electro CHARGE

    Rated 5.00 out of 5
    $69.00
    Live PreviewAdd to cart
  • thumb-fitness-direct-template

    FitnessDirect

    Rated 5.00 out of 5
    $69.00
    Live PreviewAdd to cart

THINGS TO NOTE WITH THE ABOVE PHP CODE

  1. We are leveraging the wp_nav_menu_args WordPress filter (read more on this here) to trigger our function.
  2. $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.
  3. 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.
different-menu-banking-complete-outcome

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.

This menu method you’ve just learn is also great for mobile devices, especially with the Beaver Builder Theme or one of our easy-to-install Beaver Builder Child Themes.

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!

Different main menu on different pages

This technique is extremely good on mobile devices.

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.

13 Comments

  1. Dirkje on September 25, 2016 at 8:34 am

    Awesome, as always. So YES, please. I vote for the follow up tutorial!

  2. granatdesign on October 26, 2016 at 10:18 am

    awesome tutorial!! Just posted a question on FB user group and then saw this. Hacked my way around and was able to show a different menu on home, etc!

    thank you!!!

    • Grant Ambrose on October 26, 2016 at 11:38 am

      awesome!!!!! I’d love to see a link to your completed implementation once done!

  3. joska90 on January 11, 2017 at 10:08 am

    Great Tutorial and video very helpful……Is there a way of using the php code so it will effect more then just one page (i.e in your example the business page)? . I tried adding another post id to the is_page part of the code but that dose not seem to work. example …… == ‘header’ && is_page( ‘1159 , 86’ )

    • Grant Ambrose on January 11, 2017 at 10:23 am

      Hi mate! You have to pass an array into it.
      is_page(array(‘1159′,’86’))

  4. Empty_Mindz on January 23, 2017 at 1:25 pm

    Hi, Thanks for the tutorial. But i need something a bit different.
    I’m currently making a theme using html5blank, and it uses this piece of code to call the nav “”.
    Is there an easy way to tell this line of code to grab lets say menu id 2? something like this “”. I have little knowledge of PHP, so i dont know if it is gonna be this easy.

    • Grant Ambrose on January 23, 2017 at 9:42 pm

      Hi there! Sorry, your code didn’t come through. You’ll have to paste it in http://pastebin.com/ and then send me the link to the code 🙂

  5. Azhar on January 27, 2017 at 12:46 pm

    Sir, I have developed a website with X-theme and cornerstone, I have three pages, each of different languages. And three menus as well(in different languages). I want to changes the primary menu based on page. I used your code but it isn’t working. Help me….

  6. Azhar on January 27, 2017 at 12:50 pm

    This is my child theme’s function.php :-

    add_filter(‘theme_mod_x_topbar_content’,’x_topbar_do_shortcode’);

    function x_topbar_do_shortcode($content) {
    return do_shortcode( $content );
    }

    • Grant Ambrose on January 29, 2017 at 2:48 pm

      Hi there! The best thing you can do here is to reach out to the X theme developers and ask them as they’ll know their theme the best and their support may cover it. Sorry I cannot help in regards to the X theme.

  7. andrewpeters on March 17, 2017 at 9:25 am

    Awesome tutorial man.

    Is there a way to show one menu automatically on most pages but then on a store page (and all product pages) show another menu setup.

    So you know, I’m trying right now to recreate a menu structure like messengerinternational.org. They have a main menu, off canvas menu and then a menu for store stuff on store pages.

Leave a Comment

You must be logged in to post a comment.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x