WPML language switcher not working in header

The WPML language switcher is a commonly used feature in multilingual WordPress websites. However, sometimes it may not work properly when placed in the header. One possible solution is to manually add the language switcher code to the header template file. Here’s an example of how you can achieve this:

<?php if ( function_exists( 'wpml_add_language_selector' ) ) : ?>
    <div class="language-switcher">
        <?php wpml_add_language_selector(); ?>
    </div>
<?php endif; ?>

In this code snippet, we first check if the wpml_add_language_selector function exists to ensure compatibility with WPML. Then, we wrap the language switcher code within a conditional statement to display it only if the function exists. The language switcher is added within a <div> element with a class of “language-switcher” for styling purposes.

You can place this code snippet in your theme’s header template file (e.g., header.php) where you want the language switcher to appear. Remember to customize the HTML markup and CSS classes according to your theme’s design.

By manually adding the language switcher code to the header template, you can ensure that it is displayed correctly and avoid any conflicts with other elements or scripts on the page.

Examples

Example 1: Custom Language Switcher in Header

This example demonstrates how to create a custom language switcher in the header of a WordPress website when the WPML language switcher is not working as expected.

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>';
                echo '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
                echo '</li>';
            }
            echo '</ul>';
        }
    }
}

This code snippet creates a custom language switcher in the header by using the icl_get_languages() function provided by WPML. It retrieves the available languages and generates a list of language links using a foreach loop. The language switcher is wrapped in a <ul> element with a class of “language-switcher” for styling purposes.

Example 2: Language Switcher with Flag Icons

This example shows how to enhance the custom language switcher by adding flag icons next to each language link.

function wpsnippets_custom_language_switcher_with_flags() {
    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>';
                echo '<a href="' . esc_url( $language['url'] ) . '">';
                echo '<img src="' . esc_url( $language['country_flag_url'] ) . '" alt="' . esc_attr( $language['language_code'] ) . '">';
                echo esc_html( $language['native_name'] );
                echo '</a>';
                echo '</li>';
            }
            echo '</ul>';
        }
    }
}

This code example builds upon the previous example by adding flag icons to each language link. It utilizes the country_flag_url property provided by WPML to retrieve the URL of the flag icon for each language. The flag icon is displayed using an <img> tag within the language link.

Example 3: Language Switcher with Dropdown Menu

This example demonstrates how to create a language switcher with a dropdown menu instead of a list of links.

function wpsnippets_custom_language_switcher_dropdown() {
    if ( function_exists( 'icl_get_languages' ) ) {
        $languages = icl_get_languages( 'skip_missing=0' );
        if ( ! empty( $languages ) ) {
            echo '<div class="language-switcher">';
            echo '<select>';
            foreach ( $languages as $language ) {
                echo '<option value="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</option>';
            }
            echo '</select>';
            echo '</div>';
        }
    }
}

This code snippet modifies the custom language switcher to display the language options in a dropdown menu. It replaces the <ul> element with a <select> element and generates <option> tags for each language. The selected language can be changed by selecting an option from the dropdown menu.