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.
Here is how the menu looks on the front end:
Step 2
Install PolyLang and set up your languages.
In our example, we’ll use English and German 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 Deutsch” location.
End Result
We now have 2 menus: one English and one German, each tagged to their respective menu locations.
The English menu will be automatically swapped out for the German menu when the site is viewed in German.
Each menu can be configured independently using all of the available Mega Menu settings.
Note: the menu theme belonging to the default language menu will always be used, regardless of the language selected. Scroll down for information 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.