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.
In this example we’re using the TwentyTwentyFive theme. We’ve added the Max Mega Menu block to the header template and selected the Primary Menu location.
Step 2
Install PolyLang and set up your languages.
In our example, we’ll use English and French as our site languages.
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:
Step 4
On the same page, click the “create a new menu” link, set up the menu and tag it to the “Primary Menu 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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// https://wordpress.org/support/topic/shortcodes-for-translation-in-place/ // [polylang lang="en"]English[/polylang][polylang lang="de"]Deutsch[/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:
|
1 |
[polylang lang="en"]Menu[/polylang][polylang lang="de"]Menü[/polylang] |
.. and paste it into the Toggle Block settings:
Custom Styling with Max Mega Menu Pro
If you are having problems with custom styling being applied erratically to your menus, make sure the language selector in your admin bar is set to “Show all languages”, then go to Mega Menu > Tools and Clear the CSS cache.