How to Add a WordPress Language Switcher

Are you thinking about adding a WordPress language switcher to your website? If so, keep reading!

Adding a language switcher to your WordPress site and translating your content so visitors can read it in their own language can help you reach new markets, provide greater opportunities for SEO and online visibility, and help you establish trust with new audiences. Not sure which plugin to use? Check out our comparison of best WordPress language switcher plugins.

With Weglot, you can add multiple languages to your WordPress site or WooCommerce store in less than 5 minutes, with no code required.

In this article, we’ll provide a detailed step-by-step guide on how to add a WordPress language switcher to your site and how to customize it to fit your site’s design.

Tutorial: Add a WordPress Language Switcher with Weglot

A WordPress language switcher is a navigation element that lets visitors select their preferred language and switch between translated versions of your site. You can add one to any WordPress site by installing a translation plugin, selecting your languages, and placing the switcher in your menu, widget area, or page via shortcode.

Weglot is an AI-powered translation plugin for WordPress that adds a language switcher automatically, translates your site in minutes with no code, and creates SEO-ready language subdirectories with hreflang tags.You can choose to add a WordPress language switcher to your site in a variety of locations, including your menu, to a widget, or in the source code of your HTML page. 

In this tutorial, we’ll add a language switcher to your site's navigation. By default, Weglot adds the language switcher to the bottom left of your site. We’ll then show you how to move it either via your settings or using Weglot’s language switcher visual editor. 

Step 1: Install and Activate the Weglot Plugin

Install and activate the Weglot plugin on your WordPress site. Then, create a Weglot account, where you’ll manage and edit your translations and get your unique API key for the integration.

Step 2: Connect Weglot and Select Your Languages

Click into the Weglot tab in your WordPress dashboard and add your API key, select the original language of your site and the language(s) you want to add, and click save. 

Step 3: Check Your Site and Language Switcher

Your WordPress website is now multilingual! Weglot has automatically detected your site’s content, used AI to translate it, and displayed it under language subdirectories.  

Take a look at the front end of your site, and you’ll see a new WordPress language switcher at the bottom-right corner.

When you click it, it’ll expand to display your available languages and let you choose and display your preferred translation.

This is the default design that comes with Weglot, and you can now customize the look and location of your WordPress language switcher in a few different ways.

Customize Your WordPress Language Switcher

To start making basic customizations, go to Weglot > Language button design (Optional) in the WordPress back end. On this screen, you can choose:

• Whether to use a drop-down menu
• Whether you will use flags within your switcher, and the type
• If you display the names of your languages
• To display only the language code

There’s also a section for overriding CSS and replacing it with your own custom selectors—we’ll come to this in a second. For now, let’s customize the language switcher to display language names without flags but keep the drop-down menu.

To do this, uncheck “With flags” and check “Is fullname”, then take a look at your site:

‍

You may also want to carry out some advanced customizations. For example, let’s display the language switcher in the navigation menu or the sidebar.

Language Switcher Placement Options

You can display the Weglot language switcher in five places:

• Menu: Go to Appearance > Menus, select your menu, tick Weglot Switcher, and drag it into position.
• Widget: Go to Appearance > Widgets and add the Weglot Widget to any widget area (header, sidebar, or footer).
• Shortcode: Paste [weglot_switcher] into any page, post, or template where you want the switcher to appear.
• HTML / source: Add the switcher directly in your page’s HTML for full placement control.
• Floating button: Keep the switcher in a fixed corner that stays visible as users scroll (Weglot’s default).

Weglot's switcher works with all WordPress themes, including FSE and block themes.

To control where your language switcher appears using Weglot, head to the Weglot screen in the WordPress dashboard and scroll down the page until you see options to display the language switcher:

Simply follow the prompt depending on where you want the language switcher to be. In this instance, we’ll go to Appearance > Menu and drag and drop the switcher to change the order of the items in the menu. 

When you’re ready and have saved your changes, take a look at your front end once more:

While the language switcher is within the header, it’s not displaying in the right way. Also, you could also use inline language codes, rather than a drop-down menu.

Advanced Language Switcher Styling

This is where you use CSS. First, turn off the drop-down setting within the Weglot menu in WordPress. Then, check the box to display language codes.

From here, you can use the Override CSS text area to set selectors for your fonts, colors, and text weight so it fits your site design:

Finally, take a look at your design on the front end:

With the right placement and a few lines of CSS, you can quickly and easily style Weglot’s language switcher to match your site without the need for complex template editing, HTML, or PHP coding skills. 

Note that custom CSS modifications are entirely optional. You can move and change the design through the options available in the Weglot tab section of your WordPress admin. 

You can also use Weglot’s language switcher visual editor if you prefer to do things more visually: 

The language switcher visual editor allows you to control the same settings as within your WordPress dashboard. You can simply drag the switcher to the position you’d like it to appear, then click “Save” to make the changes live on your WordPress site. 

Best Practices for Displaying WordPress Language Switchers

Language switchers often fall into two camps with relevant attributes:

• Non-existent. In other words, the website doesn’t offer translations at all.
• It is difficult to find. The language switcher might be hidden in the navigation or some other location, forcing the user to play hide-and-seek and provides a terrible user experience..
• Easy to find. In contrast, you might find the WordPress language switcher in a clear, relevant place, such as the header or footer.
• Very easy to find. You’ll have good fortune if the WordPress language switcher is in prominent screen real estate, such as the header. This lets you choose the right language fast.

As such, it’s crucial you make it easy for your site’s visitors to choose a preferred language and provide a user-friendly experience for your international site visitors. In an ideal world, you should be able to do this without the need for add-ons. With that in mind, consider the following:

1. Choose your languages options carefully. Just because you can enable every language doesn’t mean you should; you should only look to activate the languages you need. 
2. Make your language switcher easy to find. It’s a good idea to place your language switcher in the header or footer of your page, both are great locations. For mobile devices, you often find language switchers in the main navigation as a menu item.
3. Style your WordPress language switcher to match your design. While it may be tempting to stick with the generic language switcher provided, customizing it to match the look and feel of your site is a great idea.
4. Select flags or names for your chosen languages. While flags are tempting for designers to use for many reasons (they’re colorful, iconic, and space-efficient), flags aren’t designed to depict languages. This throws up various problems.

Achieve a Well-Designed WordPress Language Switcher

Adding a WordPress language switcher to your site is simple with the right tools. With Weglot, you get a language switcher added automatically, full AI translation from day one, and complete editing control – no developer needed. The translation tool runs in the background, keeping your translations up-to-date, on-brand and hands-off. You can also enable auto-redirection from your Weglot Dashboard – it detects a visitor's browser language and automatically serves them the correct language version of your site.

Weglot is also built with multilingual SEO in mind. It automatically creates language subdirectories for each translated version of your site. It adds hreflang tags and translates your metadata. Search engines can find and index every language version from day one.

Choose a WordPress translation plugin that’s also built with multilingual SEO in mind. Thanks to automatically created language subdirectories, translated metadata, hreflang tag implementation, Weglot handles the technical, SEO and translation of your multilingual site.

Ready to add a WordPress language switcher to your site? Get started with Weglot’s free plan, no credit card required.