How to add a custom floating language switcher to your WordPress site style2.track360.xyz (ok)

https://wpml.org/tutorials/2020/08/how-to-add-a-custom-floating-language-switcher-to-your-wordpress-site/

Follow this tutorial to add a floating language switcher to your WordPress site with WPML. A floating language switcher looks great and makes it easier for your customers to view your site in their language.Adding a floating language switcher

You can add a custom floating language switcher to your site in three steps:

1. Add the PHP code to render 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 our page. For that, we will create a function to add 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 will hook our new function to wp_footer.

The complete PHP code will look like this. You can copy and add it to your theme’s functions.php file.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>'; 
}

The Styling Part

With the previous code, we will 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, even if the user scrolls down the page. This can be done using CSS with the position: fixed attribute.

To add the CSS code:

1. Go to WPML → Languages

2. Scroll down to Language switcher options and expand the Additional CSS section.

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

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

This example adds some extra customization like rounded borders and a box shadow, but feel free to customize it as you want.Language Switcher Styling?

The Settings Part

Finally, we need to change some settings to have only the flags on our language switcher. To do this:

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.

Displaying only the flag in the floating language switcher

Language switcher options

That’s it! After these steps, you should have a nice floating language switcher on the website:The language switcher on the front-end

Horizontal language switcher

Bonus: Vertical Floating Language Switcher

If you want, you can also customize it further to create a vertical language switcher, like the screenshot below:Vertical language switcher

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

Vertical language switcher

For this, just replace the previous CSS with the code below:Vertical Language Switcher CSS?