Polylang Menu Translation and Adding a Language Switcher

Did you encounter issues with Polylang menu translation in a block theme while using the free version of the plugin? In this article, I'll show you how to display a separate menu for each language and how to add a language switcher to the menu.

I assume that you have already set up the Polylang plugin and added some languages to it

Step 1: Create a Separate Menu for Each Language

First, we need to add a separate menu for each language. To do this, navigate to Appearance > Menus in the WordPress admin panel.

Appearance > Menus tab in the Wordpress admin

Steps:

1. Open the Menus page.

2. Create a separate menu for each language you have. For example:

   • "menu-eng" for English

   • "menu-uk" for Ukrainian

Menu with name "test123", one link, and a language switcher.

Additionally, on the menu page, you should be able to add a language switcher to your menu. After adding the language switcher, click the expand icon to configure its appearance, such as adding country flags or a dropdown.

Step 2: Display Polylang Menu Translations on the UI

Install the "Site Editor Classic Features" Plugin

To display menus in the free version of Polylang, install the Site Editor Classic Features plugin provided by the Polylang developers. Go to the plugin page and install it.

Add menu widgetAdd Menu Widgets to Your Page

1. Navigate to Appearance > Editor in the WordPress theme editor.

2. Select your header (or any other location where you want to insert your menu).

3. Add a Legacy Widget to the desired location.
   

   

   Legacy widget in the wordpress editor

4. In the Legacy Widget dropdown, select "Navigation Menu".

Configure the Navigation Menu

1. After adding the navigation menu widget, select the appropriate menu from the dropdown and map it to the corresponding language. For example, menu-eng should be assigned to the English language.

   

   Navigation menu widget

   
   

2. Repeat this process for all languages.
   

You will end up with separate navigation menu blocks for each language, but only one will be displayed on the UI at a time.

Polylang menu with a language switcher

Conclusion

After saving your template, you should see the translated menus on your website. With this setup, your multilingual site will display the correct menu for each language, ensuring a seamless user experience.

In the next article, I'm going to describe how to use the "Navigation" widget menu with the mobile "burger" feature in the free version of Polylang.