Floating language selector with WPML

If you use the WPML multilanguage website plugin , the standard used professionally , you may not be satisfied with the default options to display the language changer. If this is your case, let’s see how to make a really cool floating language selector.

WPML offers several ways to display the language selector, but they are not always well suited to the web, so the idea is to create a new floating language selector that is visible at all times .

The steps we will take to create it are, in this order, these:

1. Create a PHP code to generate the new floating language selector.
2. Add CSS to style the floating language selector.
3. Change the language selector settings from the WPML language settings page.

Create the floating language selector with PHP

The first step is to add the PHP code responsible for generating the language selector on your page.

To do this, you have to create a function that adds a div container with the language selector inside it. We can use the wpml_add_language_selector action to display the language selector.

In this example, we want the new language selector to display in the footer, so we use our new function with WordPress’ wp_footer

The complete PHP code would be like this:

 / * WPML floating language selector * /
add_action ('wp_footer', 'wpml_floating_language_switcher');
function wpml_floating_language_switcher () {
echo '
';
do_action ('wpml_add_language_selector');
echo '
';
}

The above code can be added to the end of the functions.php file of the active (child ) theme, to a specialized plugin or, as it is more convenient for you, to add codes to your website . However, since we are going to apply it to the current theme, with styles, my advice is that you add it to the functions.php of the theme.

Add CSS with the styles to the floating language selector

When you have added the previous PHP code, now it is time to give it some styles so that it is displayed in an elegant way on your website.

To make it float in the lower right corner of the web we will use the CSS position: fixed attribute.

Follow the steps below to add the CSS code:

1. Go to WPML → Languages .
2. Scroll down to the Language Selector Options and expand the Additional CSS section.
3. Paste the custom CSS code below into the box.

The following example adds some additional customization, such as rounded edges and box-shadow . Of course, you can customize it however you want.

 / * First we remove the default CSS from the language selector * /
.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;
}
/ * And now we customize the floating language selector to our liking * /
.wpml-floating-language-switcher {
position: fixed;
bottom: 10px;
right: 10px;
background: # f8f8f8; /*background color*/
border: 1px solid; / * border settings * /
border-color: #eee; / * border color * /
padding: 0px; / * container fill * /
border-radius: 6px; /*Rounded edges*/
/ * Shadow of the box * /
-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);
} 

If you prefer, you can also add this CSS code by going to Appearance → Customize and clicking on Additional CSS .

Configure WPML Custom Language Selector Settings

Now that we have created the PHP code that will display the floating language selector, and applied custom styles to make it more beautiful, we are going to configure some settings to our custom language selector .

In this case, simply because it will look better, we are going to configure it to show only the flags , without the name of the language.

The steps are simple, these:

1. Go to WPML → Languages .
2. Scroll down to Custom Language Selectors and click Activate .
3. Click the Customize button.
4. In the section called What to include in the language selector , check Flag and uncheck the rest of the options.
5. Click Save .

Let’s go like this:

And we are done! Did you think it would be more difficult?

It only remains to try our beautiful new floating language selector , which will look like this …

Of course, WPML’s floating language selector will always be visible, as it will move with the page , adding great functionality to the web when it comes to switching languages.

Did you like this article? You can’t imagine what you’re missing on YouTube !