WordPress Multilingual: How to translate and display your website in different languages with Weglot

Learn how to translate a WordPress website with the Weglot plugin

Weglot Tutorial - Homepage
Image Source: Screenshot – Weglot.com

Weglot is a translation API that offers integrations for several platforms. We’re going to focus on the Weglot Translate WordPress plugin in this tutorial. Check out our Weglot review if you’d like to learn more about the API in general. Let’s get started with this Weglot tutorial.

Installation & configuration

Setting up the Weglot plugin is easy. It starts with a simple installation process, which you can do in the WordPress admin area by downloading the plugin from the WordPress repository.

Weglot Installation
Image Source: Screenshot – WordPress Dashboard

You can also download it here and upload the ZIP folder to the backend of WordPress or the plugin folder to your file system via FTP. You’ll need an API key to configure the plugin, so your next step should be to create an account (you only need an email and password).

Weglot Sign Up
Image Source: Screenshot – Weglot.com

Let’s go over configuring the Weglot plugin.

Configuration

You’ll be greeted with your API key after you create an account and confirm your email address.

Weglot Copy API Key
Image Source: Screenshot – Weglot.com

Copy and paste this key into the API key box on the Weglot configuration page. Make sure you save your changes before leaving this page.

Weglot API Key Box
Image Source: Screenshot – WordPress Dashboard

Next, use the Original Language setting to choose the primary language your site uses. Use the Destination Languages box to enter the language(s) you want to translate your site into. Select a language by selecting it from the drop-down menu or by entering its name.

Weglot Destination Languages
Image Source: Screenshot – WordPress Dashboard

Click Save Changes, and head to the homepage of your website. You should now have a language button in the bottom, right-hand corner.

Weglot Button
Image Source: Screenshot

Let’s talk about customizing the appearance of this button.

Customizing the language button

Weglot Language Button Appearance Settings
Image Source: Screenshot – WordPress Dashboard

If you look at the Language Button Appearance section, you’ll notice a handy little preview feature at the top. Refer to this as you adjust the settings to ensure the button appears the way you want it to. Let’s start with how the menu in the button appears. The default setting you see in the screenshots is the drop-down setting. You can use an inline style instead by unchecking the box.

Weglot Button No Dropdown
Image Source: Screenshot – WordPress Dashboard

The setting after that allows you to do decide whether or not you want to have flags represent each language in the menu. All you need to do is uncheck the box if you don’t. If you do decide to keep the flags, you can change their appearances with the next setting. This one allows you to choose one of four styles.

Weglot Flag Type
Image Source: Screenshot – WordPress Dashboard

The next two settings control the way the text of the language appears. You can choose to omit text altogether by unchecking the “With name?” box. You can also display the full word of a language, as opposed to an abbreviation, by checking the “Full name?” box.

Weglot Language Button Text
Image Source: Screenshot – WordPress Dashboard

The last setting can be used by those experienced in CSS. It’s a text editor you can use to add custom styles to the language button. The filler text in the box provides a couple hints as to how to edit the appearance using the class “country-selector”. You can use this CSS class to change the background color and font style in under a minute:

Weglot Override CSS
Image Source: Screenshot – WordPress Dashboard

Let’s go over how to control where the button is placed.

Configuring the language button position

The default location for the language button is in the bottom, right-hand corner of the screen. It’s a sticky menu, so it’ll stay with your visitors as they scroll. You can change the location of this button using a few different methods. The first allows you to add it to your navigation menu by checking the box for the “In menu?” setting.

Weglot Language Button Navigation Menu
Image Source: Screenshot

You’ll likely need to add a bit more code to the Override CSS box to get the button to appear properly in your own menu. If you have several navigation menus on your site, you’ll need to add a CSS rule to hide the ones you don’t want to display. You can ask the support team for help with this. You can also add the button to any widget area with the Weglot Translate widget.

Weglot Widget
Image Source: Screenshot – WordPress Dashboard

Lastly, you can use the shortcode:

[weglot_switcher]

or ID selector:

<div id="weglot_here"></div>

to place the code wherever you wish.

Weglot Shortcode
Image Source: Screenshot

Let’s move on to the next section.

Excluding specific pages and elements

Weglot Translation Exclusions
Image Source: Screenshot – WordPress Dashboard

There may be a few pages and posts you don’t want translated as well as a few elements. For example, the title of our test website (MH Themes) was translated, which isn’t ideal as it’s our brand name. You can solve these minor issues by adding the URLs of specific pages and posts in the Exclude URL here box. You can also prevent certain elements from being translated by adding their CSS selectors to the Exclude Blocks box.

Redirecting visitors automatically

Weglot Auto Redirect
Image Source: Screenshot – WordPress Dashboard

Auto redirects are a feature you’ll have access to when you subscribe to any premium plan. All you need to do is scroll to the bottom of the plugin’s settings page in WordPress, and check the box labelled “Auto redirect?”. It’ll redirect visitors to translated pages automatically depending on their browser language preferences.

What to do after you install Weglot

Creating Sample Content
Image Source: Unsplash – Pixabay.com / License: CC0 Public Domain

Weglot does a pretty good job at translating content automatically, but it’s important to remember that automatic translations will never be as accurate as manual translations conducted by someone experienced in the language. This is true no matter who’s writing the code. This is why we recommend taking this process as slow as possible.

After you install Weglot, you can do a few different things to ensure the translations are as accurate as possible before you go through the trouble of hiring professionals. It may be a good idea to create a copy of your website on another server using a dummy domain.

If you can round up a group of international / bilingual visitors, you can receive feedback (and maybe even user-supported translations) on translated content without affecting your actual site, so long as you tell search engines not to index the dummy site. This method allows you to optimize translations before you add them to your site by exposing them to a small group of beta users first.

You can just as easily translate your actual site and get feedback on the go, however. Keep reading if you’re interested in working with a professional translator.

Using the Weglot dashboard

Weglot Dashboard Home
Image Source: Screenshot – Weglot.com

This is the Weglot dashboard. The home screen gives you a snapshot of the plan you’re using, the number of words the plugin has translated on your site, the number of human translations made, the number of languages your site is translated into and statistics for translated content.

Translations List

Head to the Translations List section first and foremost to view a complete list of all of the translated content on your site. It makes it easy to perform actions on these items in bulk. You can either check the boxes for multiple items to edit them in bulk or perform the actions on an individual basis. Either way, go through the list, and perform one of these actions with each item:

Edit – Edit a translation manually.

Weglot Edit Translation
Image Source: Screenshot – Weglot.com

Mark as Reviewed – Archives the item.

Weglot Mark Reviewed
Image Source: Screenshot – Weglot.com

Delete – Deletes the item.

Weglot Delete
Image Source: Screenshot – Weglot.com

If you’re having trouble figuring out which text belongs to which URL, use the URL filter on the left-hand side.

Weglot Filters
Image Source: Screenshot – Weglot.com

Add to professional order – Adds the item to your cart, which you’ll use to purchase professional translations.

Weglot Add Professional Order
Image Source: Screenshot – Weglot.com

Translations are available from Weglot’s professional translators at a starting rate of €0.08 / word. You’ll need to be subscribed to their Starter plan or higher to gain access to this service. In any case, once you add items to a professional order, you can view your cart where a total cost will be tallied for you.

Weglot Professional Order
Image Source: Screenshot – Weglot.com

Let’s go over the Visual Editor.

Visual Editor

Weglot Visual Editor
Image Source: Screenshot

The Visual Editor makes it easy for anyone to edit translations manually with Weglot. It autosaves edits, so your changes are added in real time. All you need to do is launch the visual editor, navigate to the URL you want to edit (or enter it in the URL box in the bottom, left-hand corner) and select individual items to edit.

Translation Tools

Weglot Translation Exceptions
Image Source: Screenshot – Weglot.com

The last feature we’re going to go over are the translation tools. They’re fairly straightforward. Use the Translation Exceptions tool to exclude or force the inclusion of specific words in translations.

Weglot Search & Replace
Image Source: Screenshot – Weglot.com

If you’ve already translated your site and accidentally included words that shouldn’t have been translated or were translated incorrectly, use the Search and Replace tool.

Expanding your translation team

Weglot Add Team Member
Image Source: Screenshot – Weglot.com

When you subscribe to the Weglot Pro plan or higher, you’ll have the ability to add an unlimited number of members to your team. All you need to do is enter their email address, assign the Manager or Translator role to them, and click Add Member.

That’s it for this Weglot tutorial. Be sure to read our review if you’d like to learn more about the features and plans Weglot offers. How do you like Weglot? Have you used this WordPress plugin for multilingual websites already? Please share your feedback in the comments below.

Disclosure: This Weglot tutorial has been sponsored by Weglot.

Share this with your friends

Leave a Comment

Your email address will not be published.


*