Creating multilingual mega menus with WPML

With Max Mega Menu and WPML you can create multilingual Mega Menus for your WordPress site.

In this example we will assume the site and menu has been set up already and WPML has subsequently been installed to add support for another language.

Our primary language is English and the language we’re adding is French.

Prerequisites

Under WPML > Languages, make sure “Adjust IDs for multilingual functionality” is enabled.

wpml-adjustids

Step 1

In this step we assume you’ve already set up a menu for your primary language (English) and enabled Max Mega Menu for it.

Ensure the “Language” setting for your English menu is set to “English”.

Ensure the menu is tagged to a Theme Location.

Finally, click the “French” link to create a new menu.

wpml-1

Step 2

We now have a new menu which will act as the French version of our English menu.

Give the menu an appropriate name and click ‘Create Menu’.

wpml-2

Step 3

We now need to tell WPML that this new menu is the French version of our English menu. To do this set the “Translation of” setting to your English menu.

Again, tag this menu to the same menu location as your English menu.

Finally click ‘Save Menu’.

wpml-3

Step 4

We now have 2 menus: an English menu and a French menu which are linked together.

You can now set up your French menu how you wish.

wpml-4

End Result

The English menu will be automatically swapped out for the French menu when the site is viewed in French. Max Mega Menu is enabled for both menus.

wpml

Fixing the language switcher

Update: The language switcher is fixed in WPML 3.6+. The code below is only relevant for versions of WPML below v3.6.

In the WPML settings there is an option to automatically add a language switcher to the menu. By default, the switcher will be malformed when used with Max Mega Menu.

To fix the switcher, add the following to your themes functions.php file.

Translating the mobile toggle block text

Requires Max Mega Menu v2.3.7+. At time of writing, this requires installing the development version of Max Mega Menu from this page.

The same menu theme will be used across both languages. As the text for the mobile toggle block is defined in the menu theme, it will appear the same for all of your languages.

We can use a shortcode to change the menu toggle text depending on the current language.

Step 1: Install the WPML Shortcodes plugin.

Step 2: Go to Mega Menu > Menu Themes. In the mobile section, edit the mobile toggle block settings and use the following shortcode to display different text depending on the current language.

Related Articles