Fabrizio Van Marciano

available for hire

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


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

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

OK so the first thing you need to do is download the GTranslate plugin, and you’ll find it in the WordPress repository. So just 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 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 that you can 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;
    }
}

Get access to my courses and expert tutorials!

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, Bricks Builder, plus over 100 video tutorials, code snippets, templates, Discord Community, and more.

Join Van Marciano Pro

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER