WPML lets you customize your 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. Using the wpml.config.xml, you can configure a number of attributes, such as: CSS styling, display settings, and shortcodes.
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. 1
<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
The wpml-config.xml can also be used 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 on 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: