Translating a website requires more than a simple translation of the content. For instance, a major concern is how to translate a WordPress menu. The menu is one of the first elements of a site that users notice, and they base their first impression on it.
When building a multilingual WordPress menu, there are several aspects you need to pay attention to. Some of your pages or products may be related or available only to some countries, so you may have to hide those menu items for certain languages.
The translation also impacts the menu design. For example, it’s well known that German words are on average longer than English words, which influences the spacing between menu items.
TranslatePress helps you translate any WordPress menu, in a couple of clicks using a visual translation editor. Below we’ll go into the simple steps to achieve this.Related: How to Translate Custom Fields in WordPress
Setting Up a WordPress Menu
Due to the way it’s built, TranslatePress works out of the box with any theme or plugin, so you can use the theme of your choice, or even a menu plugin. Most themes support a primary and footer menu, but some give users more options for displaying menus.
To create a WordPress menu go to Appearance > Menus > Edit Menus determine its structure and add the desired menu items.
Next, go to Appearance > Menus > Manage Locations to choose the location of the menus. The available locations are defined by the theme you’re using.
Let’s assume that you already have a primary menu filled with items and subitems that needs to be translated. In our example here, we will translate the primary menu which is the main navigation of your website.
Install and Setup TranslatePress
After creating our WordPress menu, we’ll move forward to install and configure TranslatePress. Simply navigate to Plugins > Add New in the WordPress admin dashboard and type “TranslatePress” into the search form. Find the TranslatePress plugin, install and activate it.
Then go to Settings > TranslatePress > General to choose the proper configuration for your project.
Start with choosing the default language—British English in our example—and the language you want to translate the menu into—Romanian in our example. Next, set up the plugin to suit your needs. You can enable Google Translate for automatic translation, use directories for the default language, or customize the language switcher.
How to Translate WordPress Menu Items
In our example, we will translate the WordPress menu of a website selling online courses. Once you finish the creation of your menu, click the Translate Page link in the top admin bar. This will open a visual translation interface and allow you to translate your site content.
Next, simply hover the mouse over the first item in the menu and it will display a blue pencil icon. Click it and in the sidebar make sure to input the translated term from default language to the desired language (English to Romanian here). Do this for each main item on the menu.
You will notice that when hovering over some items, the blue pencil icon is replaced by a green arrow icon. That means that the plugin has detected the strings generated by the theme and plugins (gettext strings). Don’t worry, the translation process is similar.
At this stage, you should have all the main menu items—the ones visible by default—translated. Next, apply the same process for the submenu items. Hover over each submenu item and input the translation in the sidebar.
And as simple as that, your entire menu is now translated!
Show Different Menu Items for Different Languages
There are situations where you may want to have a different menu structure based on the selected language. This is useful when you want to display different pages for different languages. Or for when certain content is not translated in a specific language and you don’t want it to appear in the menu for that language.
TranslatePress comes with a few add-ons for extended functionality. For instance, Only Translate Certain Paths lets the users translate only the desired pages while the premium add-on Navigation Based on Language displays different menu items for different languages.
Setting Up the Navigation Based on Language Add-On
This is a premium addon, available in the paid versions of TranslatePress. After purchase, you can download the add-on from your account and install it just like any other plugin.
Head to the WordPress admin dashboard, go to Plugins > Add New, click on Upload plugin, and chose the path to the add-on. Install and activate it.
Next, go to Appearance > Menus > Menu Structure and by opening a certain menu item you will see the option to Limit this menu item to certain languages. Make sure to select only the languages where you want to show that menu item.
In our example, “Advanced English,” “Romanian for beginners,” and “Romanian for advanced users” fall under the Languages category.
For our example, I want to eliminate “Romanian for beginners” from the Romanian version of the site. Uncheck that box for the Romanian language, and this menu item will be hidden when visiting the Romanian version of the site.
Translate your entire Website
Turning your site multilingual doesn’t end with translating the WordPress menu. You have to translate all the elements of the website. The same visual translation process can be applied for any text on your site.
Simply navigate each page using TranslatePress translation editor, select and translate each piece of content, and head to the next one. You’ll have your site translated in no time.
Translating a WordPress menu is really straightforward using TranslatePress. In our example, I used only one translation language for learning purposes and to streamline your onboarding, but you can translate WordPress menu (and your whole site) into as many languages as you need.
On top of that, you can use the navigation based on language add-on to customize which menu items are displayed based on the active language.
Keep in touch!
We'll only notify you of new articles, special promotions and updates. No spam!