WPML lets you customize the language switcher to meet your specific needs by configuring settings in the wpml-config.xml file.
The wpml-config.xml is a configuration file that lets you customize how your WPML language switcher appears and behaves on your website. You can configure a number of attributes, such as CSS styling, display settings, and shortcodes.
This guide is for developers who want to customize the built-in WPML language switcher. If you want to build a custom one, read our page about creating a custom language switcher.
Need to generate a wpml-config.xml file? Visit our step-by-step guide for automatically generating a configuration file using the Multilingual Tools plugin.
What Can I Customize in my Language Switcher?
WPML lets you customize a number of variables in your language switcher. This includes:
- Inline CSS Styles – Add custom CSS directly to the language switcher
- Link to Untranslated Content – Decide whether to show or hide links to untranslated content
- URL Parameters to Copy – Specify URL parameters that should be copied when switching languages
- Sidebar / Footer Language Switcher – Configure the appearance of the language switcher in sidebar and footer, including:
- Whether to display flags and/or language names
- If the current language should be displayed as a link
- Setting a title for the language switcher widget
- Choosing a template for the switcher’s layout
- Customizing colors for text, background, and borders using hex color codes
- Shortcodes Actions – Define the appearance of language switchers added via shortcodes
Example of adding custom configuration for the built-in WPML language switcher
<wpml-config>
<language-switcher-settings>
<key name="additional_css">{inline CSS styles}</key>
<key name="link_empty">{0 or 1}</key>
<key name="copy_parameters">{parameter1, parameter2}</key>
<key name="sidebars">
<key name="{sidebar slug}">
<key name="display_flags">{0 or 1}</key>
<key name="display_names_in_current_lang">{0 or 1}</key>
<key name="display_names_in_native_lang">{0 or 1}</key>
<key name="display_link_for_current_lang">{0 or 1}</key>
<key name="widget_title">{widget title}</key>
<key name="template">{template slug}</key>
<!-- color picker keys -->
<key name="background_normal">#{hex color}</key>
<key name="border_normal">#{hex color}</key>
<key name="font_current_normal">#{hex color}</key>
<key name="font_current_hover">#{hex color}</key>
<key name="background_current_normal">#{hex color}</key>
<key name="background_current_hover">#{hex color}</key>
<key name="font_other_normal">#{hex color}</key>
<key name="font_other_hover">#{hex color}</key>
<key name="background_other_normal">#{hex color}</key>
<key name="background_other_hover">#{hex color}</key>
</key>
</key>
<key name="statics">
<key name="footer">
<key name="show">{0 or 1}</key>
<key name="display_flags">{0 or 1}</key>
<key name="display_names_in_current_lang">{0 or 1}</key>
<key name="display_names_in_native_lang">{0 or 1}</key>
<key name="display_link_for_current_lang">{0 or 1}</key>
<key name="template">{template slug}</key>
<!-- color picker keys -->
<key name="background_normal">#{hex color}</key>
<key name="border_normal">#{hex color}</key>
<key name="font_current_normal">#{hex color}</key>
<key name="font_current_hover">#{hex color}</key>
<key name="background_current_normal">#{hex color}</key>
<key name="background_current_hover">#{hex color}</key>
<key name="font_other_normal">#{hex color}</key>
<key name="font_other_hover">#{hex color}</key>
<key name="background_other_normal">#{hex color}</key>
<key name="background_other_hover">#{hex color}</key>
</key>
<key name="post_translations">
<key name="show">{0 or 1}</key>
<key name="display_flags">{0 or 1}</key>
<key name="display_names_in_current_lang">{0 or 1}</key>
<key name="display_names_in_native_lang">{0 or 1}</key>
<key name="display_link_for_current_lang">{0 or 1}</key>
<key name="display_before_content">{0 or 1}</key>
<key name="display_after_content">{0 or 1}</key>
<key name="template">{template slug}</key>
<key name="availability_text">{string like "See post translations: %s"}</key>
</key>
<key name="shortcode_actions">
<key name="display_flags">{0 or 1}</key>
<key name="display_names_in_current_lang">{0 or 1}</key>
<key name="display_names_in_native_lang">{0 or 1}</key>
<key name="display_link_for_current_lang">{0 or 1}</key>
<key name="template">{template slug}</key>
<!-- color picker keys -->
<key name="background_normal">#{hex color}</key>
<key name="border_normal">#{hex color}</key>
<key name="font_current_normal">#{hex color}</key>
<key name="font_current_hover">#{hex color}</key>
<key name="background_current_normal">#{hex color}</key>
<key name="background_current_hover">#{hex color}</key>
<key name="font_other_normal">#{hex color}</key>
<key name="font_other_hover">#{hex color}</key>
<key name="background_other_normal">#{hex color}</key>
<key name="background_other_hover">#{hex color}</key>
</key>
</key>
</language-switcher-settings>
</wpml-config>
Not all of these sections have to be present in your configuration file. Just the ones that apply to your plugin or theme.
Resetting WPML Language Switcher to Default Settings
You can also use wpml-config.xml for resetting the language switcher configuration if it was changed from the backend (from its initial values).
To see new changes, make sure to click the Restore default button at the bottom of the WPML → Languages page.
Additional Resources
To learn more about the wpml-config.xml file, visit the Language Configuration Files guide.
For customizing other elements using the wpml-config.xml file, visit our additional guides:
- Translate Custom Shortcodes with WPML
- Register Page Builder Content for Translation
- Register Custom Page Builder Widgets for Translation
- Set Translation Options for Custom Fields Using WPML Configuration File
- Register Custom Terms, Types and Taxonomies as Translatable
- Make Custom Gutenberg Blocks Translatable
- Translate Texts that Theme and Plugins Save in wp_options