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

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

![](https://cdn.wpml.org/wp-content/uploads/2020/08/language-switcher-gif.gif)

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](https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions).&#x20;

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.![](https://cdn.wpml.org/wp-content/plugins/code-snips/res/img/code_icon.png)Language switcher PHP[?](https://wpml.org/tutorials/2020/08/how-to-add-a-custom-floating-language-switcher-to-your-wordpress-site/#)

```
//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.![](https://cdn.wpml.org/wp-content/plugins/code-snips/res/img/code_icon.png)Language Switcher Styling[?](https://wpml.org/tutorials/2020/08/how-to-add-a-custom-floating-language-switcher-to-your-wordpress-site/#)

### 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](https://cdn.wpml.org/wp-content/uploads/2020/08/language-switcher-options-1-1024x527.png)

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](https://cdn.wpml.org/wp-content/uploads/2020/08/horizontal-language-switcher-1024x626.png)

```
```

```
```

### 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](https://cdn.wpml.org/wp-content/uploads/2020/08/vertical-language-switcher-1024x626.png)

For this, just replace the previous CSS with the code below:![](https://cdn.wpml.org/wp-content/plugins/code-snips/res/img/code_icon.png)Vertical Language Switcher CSS[?](https://wpml.org/tutorials/2020/08/how-to-add-a-custom-floating-language-switcher-to-your-wordpress-site/#)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/wordpress/how-to-add-a-custom-floating-language-switcher-to-your-wordpress-site-style2.track360.xyz-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.