Skip Navigation
Home » WPML Documentation » Getting Started Guide » Language Setup » How to Add a Language Switcher to Your WordPress Site » Custom Language Switcher

Custom Language Switcher

Amir
Updated
March 2, 2023

When developing multilingual sites with WPML, you might need a custom language switcher. Learn how to do this with some simple PHP and CSS.

WPML allows you to add language switchers to your menus, widgets, footers, and to sites using the Site Editor (formerly known as Full Site Editing) complete with customization options and built-in flags. But you might need something more special for your site.

In this tutorial, we’ll show how to add a floating language switcher. A floating language switcher looks great and makes it easier for your customers to view your site in their language.

A site using the floating language switcher

Follow these three main steps:

  1. Add the PHP code that renders the language switcher
  2. Style your language switcher with CSS
  3. Update your language switcher settings

The PHP Part

The first step is to add the PHP code responsible for rendering the language switcher on your page. For that, you create a function that adds a div container with the language switcher inside it. We can use the wpml_add_language_selector action to render the language switcher. 

In this example, we want the new language switcher to be displayed in the footer, so we use our new function with the WordPress’s own wp_footer hook.

The complete PHP code will look like this.

Language switcher PHP 
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

You can copy and add it to your (child) theme’s functions.php file.

The Styling Part

With the previous code in place, we already have a new language switcher added to the footer of our website. Now, it’s time to customize it so that it is floating in the bottom right corner of the website. You can do this using the position: fixed CSS attribute.

Use the following steps to add the CSS code:

  1. Go to WPML → Languages.
  2. Scroll down to Language switcher options and expand the Additional CSS section.

Alternatively, you can add this CSS code by going to Appearance → Customize and clicking Additional CSS.

The following example adds some extra customization like rounded borders and box-shadow. Of course, you can customize it as you want.

Language Switcher Styling 
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

The Settings Part

Finally, you need to adjust some settings so the language switcher displays only the flags.

Use the following steps:

  1. Go to WPML → Languages.
  2. Scroll down to Custom language switchers and click Enable.
  3. Click the Customize button.
  4. For What to include in the language switcher, select Flag and uncheck the other options.
  5. Click Save.
Language switcher options
Displaying only the flag in the floating language switcher

That’s it! You should now have a nice custom language switcher on the website:

Horizontal language switcher
The language switcher on the front-end

Bonus: Vertical Floating Language Switcher

You could also create a vertical language switcher instead, like the screenshot below:

Vertical language switcher
Vertical language switcher

For this, just replace the previous CSS with the following code:

Vertical Language Switcher CSS 
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}