WPML Multilingual Menus – Max Mega Menu

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 have 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 (in the “Make themes work multilingual” section).

Step 1: The English menu

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

Go to Appearance > Menus and select your English menu. Ensure the “Language” setting is set to “English” and that the menu is assigned to a menu location. Then click the “+ French” link next to “Translations” to create the French version of the menu.

Step 2: Create the French menu

Give the new menu an appropriate name. WPML automatically sets the “Language” to French and the “Translation of” setting to your English menu.

Assign the menu to the same menu location as your English menu, then click “Create Menu”.

Step 3: Set up the French menu

We now have 2 menus (one English, one French) which are linked together. Add your French menu items and configure the Mega Menu settings for each item as required.

End Result

The English menu will automatically be swapped for the French menu when the site is viewed in French. Max Mega Menu is enabled for both menus, and each menu can be configured independently.

Note: The menu location (and therefore the menu theme and location settings) is shared across all languages. Max Mega Menu automatically generates a separate CSS file for each language.

Translating the mobile toggle block text

The same menu theme is used for all languages. As the text for the mobile toggle blocks is defined in the menu theme, it will appear the same for all of your languages. We can use a shortcode to change the text depending on the current language.

Step 1: Add the following code to your theme’s functions.php file (or use a code snippets plugin):

/**
 * Display content for a specific WPML language.
 *
 * Usage: [mmm_wpml_if lang=fr]Texte en français[/mmm_wpml_if]
 */
function mmm_wpml_if_shortcode( $atts, $content = null ) {
	$atts = shortcode_atts( array( 'lang' => '' ), $atts );

	if ( $atts['lang'] === apply_filters( 'wpml_current_language', null ) ) {
		return do_shortcode( $content );
	}

	return '';
}
add_shortcode( 'mmm_wpml_if', 'mmm_wpml_if_shortcode' );

/**

* Display content for a specific WPML language.

* Usage: [mmm_wpml_if lang=fr]Texte en français[/mmm_wpml_if]

function mmm_wpml_if_shortcode( $atts, $content = null ) {

$atts = shortcode_atts( array( 'lang' => '' ), $atts );

if ( $atts['lang'] === apply_filters( 'wpml_current_language', null ) ) {

return do_shortcode( $content );

}

return '';

}

add_shortcode( 'mmm_wpml_if', 'mmm_wpml_if_shortcode' );

Step 2: Go to Mega Menu > Menu Themes > Mobile Menu. In the Toggle Bar Designer, edit the toggle block and use the shortcode to display different text for each language:

[mmm_wpml_if lang=en]Close[/mmm_wpml_if][mmm_wpml_if lang=fr]Fermer[/mmm_wpml_if]

1	[mmm_wpml_if lang=en]Close[/mmm_wpml_if][mmm_wpml_if lang=fr]Fermer[/mmm_wpml_if]

Important: Do not use quotes around the language code (use lang=fr, not lang=”fr”).

Translating the Logo mobile toggle block URL

Requires Max Mega Menu Pro.

The same shortcode can be used in the URL field of the Logo toggle block. For example:

[mmm_wpml_if lang=en]https://example.com/[/mmm_wpml_if][mmm_wpml_if lang=fr]https://example.com/fr/[/mmm_wpml_if]

1	[mmm_wpml_if lang=en]https://example.com/[/mmm_wpml_if][mmm_wpml_if lang=fr]https://example.com/fr/[/mmm_wpml_if]

Max Mega Menu Documentation

Creating multilingual mega menus with WPML