Polylang Multilingual Menus

Creating multilingual mega menus with Polylang

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

Step 1

In this step we assume you haven’t installed PolyLang yet, but you’ve already set up a menu in your native language and enabled Max Mega Menu for it.

English menu assigned to the Header menu location with Max Mega Menu enabled

In this example we’re using the TwentyTwentyFive theme. We’ve added the Max Mega Menu block to the header template and selected the Header location.

Max Mega Menu block in the Twenty Twenty-Five header template with the Header location selected

Step 2

Install PolyLang and set up your languages.

In our example, we’ll use English and French as our site languages.

Polylang Languages page with English and French

Step 3

Heading back to Appearance > Menus, you should now see that PolyLang has automatically added new menu locations for each of the languages you’ve set up:

Polylang language specific menu locations on the Manage Locations tab

Step 4

On the same page, click the “create a new menu” link, set up the menu and tag it to the “Header Français” location.

French menu assigned to the Header Français location

End Result

We now have 2 menus: one English and one French, each tagged to their respective menu locations.

The English menu will be automatically swapped out for the French menu when the site is viewed in French.

With the Language Switcher menu item added to each menu, we can switch between languages.

English menu with the Français language switcher

French menu with the English language switcher

Each menu can be configured independently using all of the available Mega Menu settings.

Note: the menu location is shared across all languages – PolyLang only swaps the menu structure, not the location itself. This means the menu theme and all other settings from the menu location apply universally, regardless of the active language. See below for guidance on translating elements within the menu theme.

Translating the Mobile Toggle Blocks

The menu theme from your default language will be used regardless of the language selected, which means we need to translate the text in the mobile toggle blocks separately.

First, add this to your themes functions.php file:

// https://wordpress.org/support/topic/shortcodes-for-translation-in-place/
// [polylang lang=en]English[/polylang][polylang lang=fr]Français[/polylang]
// Add this code in your functions.php
function polylang_shortcode($atts, $content = null) {
	if (empty($content)) {
		return ”;
	}
	
	extract( shortcode_atts( array(‘lang’ => ”), $atts ) );
	
	if (empty($lang)) {
		return “### You must specify ‘lang’ using shortcode: polylang”;
	}

	return ($lang == pll_current_language()) ? $content : ”;
}
add_shortcode(‘polylang’, ‘polylang_shortcode’);

// https://wordpress.org/support/topic/shortcodes-for-translation-in-place/

// [polylang lang=en]English[/polylang][polylang lang=fr]Français[/polylang]

// Add this code in your functions.php

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

if (empty($content)) {

return ”;

}

extract( shortcode_atts( array(‘lang’ => ”), $atts ) );

if (empty($lang)) {

return “### You must specify ‘lang’ using shortcode: polylang”;

}

return ($lang == pll_current_language()) ? $content : ”;

}

add_shortcode(‘polylang’, ‘polylang_shortcode’);

Then construct a shortcode similar to the following:

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

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

.. and paste it into the Toggle Block settings. Important: do not use quotes around the language code (use lang=fr, not lang=”fr”).

Polylang shortcodes in the Menu Toggle block text

Custom Styling

Max Mega Menu automatically generates a separate CSS file for each language. If your menu styling is not updating as expected, go to Mega Menu > Tools and clear the CSS cache.

Max Mega Menu Documentation