How to switch between 2 languages with a button and not a dropdown with WPML?

Question

It's silly to have dropdown when you have only two languages. Makes sense if there are more. I want to have just a simple button that will switch to the other language and I can't find any guide on google.

Answer 1

You need to create a custom language switcher.

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.

//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.

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.

/*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);
}

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

Use the following steps:

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

You can find the complete documentation at WPML webiste.

Answer 2

I add the css here to include the | "Pipe" between two languages in the switcher

.wpml-ls-statics-shortcode_actions li:nth-of-type(1) .wpml-ls-link:after{
    content:"\00a0 \00a0|" !important;
    display:inline-block !important;
}
/*fix padding switcher WPML */
.wpml-ls-legacy-list-horizontal a{
    padding-left:2px !important;
    padding-right:2px !important;
}

Answer 3

Use this to show the buttons:

<?php
    do_action('wpml_add_language_selector');
?>

You can change the way it looks from the Admin panel -> WPML -> Languages -> Custom language switchers -> Customize.

If you don't see the Customize button, click Enable checkbox in the Custom language switchers section and it will appear.