🎉 Biggest Summer Sale Yet! Up to 70% Off Lifetime Plans + 50% Off Membership Deals!  Learn more >>

How to make your WordPress website multilingual using the GTranslate plugin [Video 14:47]

By
Fabrizio Van Marciano

In this tutorial, I’ll show you a simple and cost-effective way to make your WordPress website multilingual or bi-lingual, using a free WordPress plugin called GTranslate.

Before we get started, I want to mention that I’m adding this to a dummy WordPress website that’s built on my local server. So, if you want to add this plugin to your live site, please either back up your site or test it in your developer environment website first.

OK, the first thing you need to do is to download the GTranslate plugin, and you’ll find it in the WordPress repository. So navigate to Plugins> Add New Plusing > then search GTranslate.

The one you’re looking for is the Translate WordPress with GTranslate plugin. You can also find it here. Just install and activate the plugin, then navigate to Settings > GTranslate.

GTranslate Bi-lingual Language Settings

Since we’re using the free version of this plugin, there are some limitations as to what you can do. A premium service is available starting from $9 per month, and I’ll talk about why you might be interested in going pro in just a second.

Continue the rest of this tutorial by watching the video below –

Code snippet

Here is the code snippet to copy and paste into your WordPress site’s stylesheet. The code is used to style certain elements of the translate switch widget.

/* Gtranslate Mods
------*/
#gt_float_wrapper {
    top: 15px !important;
}
.gt_float_switcher .gt-selected {
    background-color: #f1f1f1 !important;
}
.gt_float_switcher {
    font-size: 16px !important;
    color: #ffffff !important;
    box-shadow: none !important;
    background-color: #004c63 !important;
}
.gt_float_switcher .gt_options a {
    color: #ffffff !important;
}

Hiding the widget on smaller screen sizes

If you are experiencing overcrowding on smaller screen sizes, you can hide the widget using the CSS below –

@media only screen and (max-width: 767px) {
    .gt_float_switcher .gt-selected .gt-current-lang {
        display: none;
    }
}

Did this tutorial work? Do you need assistance?

If you enjoyed watching this free tutorial, check out our premium members-only tutorials here and get help with implementation.

Go straight to the main video