WPML language switcher in header not updating

The WPML language switcher in the header not updating can be a common issue when using the WPML plugin in WordPress. This issue occurs when the language switcher does not reflect the current language or does not update when switching languages.

To resolve this issue, you can use the wpml_add_language_selector() function provided by the WPML plugin. This function generates the language switcher HTML code based on the current language settings.

Here’s an example code snippet that you can use to display the WPML language switcher in the header:

<?php
function wpsnippets_display_language_switcher() {
    if (function_exists('wpml_add_language_selector')) {
        wpml_add_language_selector();
    }
}

You can place this code snippet in your theme’s header file, such as header.php, where you want the language switcher to appear. This function checks if the wpml_add_language_selector() function exists (provided by WPML plugin) and then calls it to display the language switcher.

Make sure you have the WPML plugin installed and activated before using this code snippet. Additionally, ensure that you have configured the language settings and translated content properly in WPML for the language switcher to work correctly.

By using this code snippet, the WPML language switcher in the header should update and reflect the current language when switching between different languages on your WordPress site.

Examples

Example #1: Adding a custom language switcher in the header

This use case demonstrates how to add a custom language switcher in the header of a WordPress site using WPML. The code example below adds a language switcher to the header template file (header.php) of your theme.

<?php
function wpsnippets_custom_language_switcher() {
    if (function_exists('icl_get_languages')) {
        $languages = icl_get_languages('skip_missing=0');
        if (!empty($languages)) {
            echo '<ul class="language-switcher">';
            foreach ($languages as $language) {
                echo '<li>';
                if ($language['active']) {
                    echo '<span class="active">' . $language['native_name'] . '</span>';
                } else {
                    echo '<a href="' . $language['url'] . '">' . $language['native_name'] . '</a>';
                }
                echo '</li>';
            }
            echo '</ul>';
        }
    }
}
?>

The code above defines a custom function wpsnippets_custom_language_switcher() that retrieves the available languages using the icl_get_languages() function provided by WPML. It then loops through each language and generates the language switcher HTML markup. The active language is displayed as plain text, while the other languages are wrapped in anchor tags with their respective URLs.

Example #2: Updating the language switcher dynamically

This use case demonstrates how to update the language switcher in the header dynamically when the language is changed using WPML. The code example below uses JavaScript to listen for language change events and update the language switcher accordingly.

jQuery(document).ready(function($) {
    $(document).on('icl_language_switched', function(event) {
        var languageSwitcher = $('.language-switcher');
        var newLanguage = event.language;
        languageSwitcher.find('li').removeClass('active');
        languageSwitcher.find('a[href="' + newLanguage.url + '"]').parent().addClass('active');
    });
});

The code above uses the icl_language_switched event triggered by WPML when the language is changed. It selects the language switcher element and updates the active class based on the new language URL.

Example #3: Customizing the language switcher output

This use case demonstrates how to customize the output of the language switcher in the header. The code example below modifies the wpsnippets_custom_language_switcher() function to add custom CSS classes and additional markup to the language switcher.

<?php
function wpsnippets_custom_language_switcher() {
    if (function_exists('icl_get_languages')) {
        $languages = icl_get_languages('skip_missing=0');
        if (!empty($languages)) {
            echo '<ul class="language-switcher">';
            foreach ($languages as $language) {
                echo '<li>';
                if ($language['active']) {
                    echo '<span class="active-language">' . $language['native_name'] . '</span>';
                } else {
                    echo '<a href="' . $language['url'] . '" class="language-link">' . $language['native_name'] . '</a>';
                }
                echo '</li>';
            }
            echo '</ul>';
        }
    }
}
?>

The code above adds custom CSS classes to the language switcher elements (active-language and language-link). It also wraps the active language in a <span> tag instead of plain text. These modifications allow for easier styling and customization of the language switcher output.