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.

IMPORTANT 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

Translating the mobile toggle block text

Requires Max Mega Menu v2.3.7+.

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 (this plugin has not been updated for a while, but it is very basic and still works as it should).

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.

Translating the Logo mobile toggle block URL

Requires Max Mega Menu Pro 1.6.4+

As above, it is possible to use a shortcode for the logo URL (note, you will need to install the WPML Shortcodes plugin as described above). For example:

 

Related Articles