The WPML plugin is a popular choice for creating multilingual websites with WordPress. One common issue that users may encounter is when the language switcher provided by WPML is not showing up on their website. This can happen due to various reasons, such as incorrect settings or conflicts with other plugins or themes.
To troubleshoot and resolve this issue, you can follow these steps:
Verify WPML settings: Make sure that the language switcher is enabled in the WPML settings. Go to the WPML -> Languages page in your WordPress admin dashboard and check the “Language switcher options” section. Ensure that the “Display language switcher in the header” option is enabled.
Check theme compatibility: Some themes may not have built-in support for WPML’s language switcher. In such cases, you can manually add the language switcher code to your theme’s template files. Here’s an example of how you can add the language switcher to your theme’s header.php file:
<?php if (function_exists('wpml_switcher')) {
wpml_switcher();
} ?>
Check for conflicts with other plugins or themes: Deactivate all other plugins and switch to a default WordPress theme (e.g., Twenty Twenty-One). Then, check if the language switcher appears. If it does, there may be a conflict with one of the deactivated plugins or your theme. You can then reactivate each plugin/theme one by one to identify the conflicting one.
Use a custom language switcher: If the above steps don’t work, you can create a custom language switcher using WPML’s API functions. Here’s an example of how you can create a custom language switcher using a shortcode:
function wpsnippets_custom_language_switcher() {
$languages = apply_filters('wpml_active_languages', null, array('skip_missing' => 0, 'orderby' => 'code'));
if (!empty($languages)) {
$output = '<ul class="custom-language-switcher">';
foreach ($languages as $language) {
$output .= '<li><a href="' . esc_url($language['url']) . '">' . esc_html($language['native_name']) . '</a></li>';
}
$output .= '</ul>';
return $output;
}
return '';
}
add_shortcode('custom_language_switcher', 'wpsnippets_custom_language_switcher');
You can add this code to your theme’s functions.php file or a custom plugin. After adding the code, you can use the [custom_language_switcher] shortcode in your posts, pages, or widgets to display the custom language switcher.
By following these steps and using the provided code examples, you should be able to troubleshoot and resolve the issue of WPML language switcher not showing up on your WordPress website.
Examples
Example 1: Troubleshooting WPML Language Switcher Not Showing
This example demonstrates how to troubleshoot and fix the issue when the WPML language switcher is not showing on your WordPress website.
<?php
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages();
if ( ! empty( $languages ) ) {
foreach ( $languages as $language ) {
echo '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
}
}
}
?>
In this code example, we first check if the icl_get_languages() function exists, which is a function provided by the WPML plugin. If it exists, we retrieve the available languages using this function and loop through them to display the language switcher. Each language is displayed as a link with the native name and URL. This code snippet can be placed in your theme’s template file or a custom WordPress widget.
Example 2: Customizing WPML Language Switcher Output
This example demonstrates how to customize the output of the WPML language switcher by modifying the HTML markup and adding additional CSS classes.
<?php
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages();
if ( ! empty( $languages ) ) {
echo '<ul class="language-switcher">';
foreach ( $languages as $language ) {
echo '<li class="language-item">';
echo '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
echo '</li>';
}
echo '</ul>';
}
}
?>
In this code example, we wrap the language switcher in an unordered list (<ul>) with a custom CSS class language-switcher. Each language is displayed as a list item (<li>) with a custom CSS class language-item. This allows you to easily style the language switcher using CSS. You can modify the HTML markup and CSS classes to match your website’s design requirements.
Example 3: Adding Language Flags to WPML Language Switcher
This example demonstrates how to add language flags to the WPML language switcher by utilizing the language code provided by WPML.
<?php
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages();
if ( ! empty( $languages ) ) {
echo '<ul class="language-switcher">';
foreach ( $languages as $language ) {
$flag_url = 'https://example.com/flags/' . $language['language_code'] . '.png';
echo '<li class="language-item">';
echo '<a href="' . esc_url( $language['url'] ) . '">';
echo '<img src="' . esc_url( $flag_url ) . '" alt="' . esc_attr( $language['native_name'] ) . '">';
echo esc_html( $language['native_name'] );
echo '</a>';
echo '</li>';
}
echo '</ul>';
}
}
?>
In this code example, we construct the URL for the language flag image using the language code provided by WPML. You can replace 'https://example.com/flags/' with the actual URL of your flag images. The language flag is displayed as an <img> element before the language name. This allows you to enhance the visual representation of the language switcher by adding flags for each language.