Creating a Minimalist Language Switcher with GTranslate

Many WordPress websites require multilingual functionality, but the default language switchers often clash with clean, minimalist designs. This guide will show you how to customize the free GTranslate plugin to create a sleek, zen-like language switcher that integrates seamlessly with your header or menu.

We’ll transform the standard dropdown into a more elegant solution that displays only uppercase language codes, features a subtle arrow, and removes unnecessary borders and backgrounds. This approach not only improves the aesthetic but also enhances user experience by providing a clear, concise language selection interface.

In this tutorial, we’ll use the free versions of two plugins:

1. GTranslate for language switching functionality
2. WPCode for easy implementation of custom JavaScript

By the end of this guide, you’ll have a refined language switcher that complements your website’s design while maintaining full functionality.

Step 1: Install and Activate Required Plugins

1. Go to your WordPress dashboard
2. Navigate to Plugins > Add New
3. Search for and install both “GTranslate” and “WPCode”
4. Activate both plugins

Step 2: Configure GTranslate Settings

1. Go to Settings > GTranslate in your WordPress dashboard
2. Set the widget look to “Dropdown”
3. Choose “Show in menu” and select your desired menu location
4. Save changes

Step 3: Add Custom CSS

Add the following CSS to your theme’s stylesheet or through a custom CSS plugin:

.gt_selector {
  border: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: transparent !important;
  padding-right: 20px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
}

.gt_selector-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.gt_selector-wrapper::after {
  content: '' !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 5px solid #000 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.gt_selector:active,
.gt_selector:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

Step 4: Add Custom JavaScript Using WPCode

1. In your WordPress dashboard, go to Code Snippets > Add New
2. Give your snippet a title (e.g., “GTranslate Customization”)
3. Select “JavaScript” as the code type
4. Paste the following code into the code editor:

document.addEventListener('DOMContentLoaded', function() {
  var gtSelector = document.querySelector('.gt_selector');
  if (gtSelector) {
    var wrapper = document.createElement('div');
    wrapper.className = 'gt_selector-wrapper';
    gtSelector.parentNode.insertBefore(wrapper, gtSelector);
    wrapper.appendChild(gtSelector);

    var options = gtSelector.getElementsByTagName('option');
    for (var i = 0; i < options.length; i++) {
      var langCode = options[i].value.split('|').pop().toUpperCase();
      options[i].textContent = langCode;
    }
  }
});

5. In the “Insertion” section, choose “Footer” to load the script at the end of your pages
6. Set the “Code Status” to “Active”
7. Click “Save Snippet” to apply the changes

Step 5: Test and Adjust

1. Visit your website’s frontend and check the language switcher
2. Ensure it displays only uppercase language codes
3. Verify that the arrow appears and there are no borders or backgrounds
4. Make any necessary adjustments to the CSS for perfect alignment and styling

By following these steps, you’ll create a minimalist language switcher using GTranslate, displaying only uppercase language codes with a custom arrow, and without any borders or background. This sleek design will integrate seamlessly with your header or menu, providing a zen-like approach to language selection on your WordPress website.