WPML language switcher customization

The WPML language switcher is a useful feature for multilingual websites built with WordPress. By default, WPML provides a language switcher widget that you can add to your site’s sidebar or any widget-ready area. However, you may want to customize the appearance or behavior of the language switcher to better suit your website’s design or functionality requirements.

To customize the WPML language switcher, you can use the icl_get_languages() function provided by WPML. This function returns an array of all the languages enabled in WPML, along with their details such as language code, native name, and URL.

Here’s an example code snippet that demonstrates how to customize the WPML language switcher by creating a custom language switcher using a dropdown select menu:

function wpsnippets_custom_language_switcher() {
    $languages = icl_get_languages();

    if (count($languages) > 1) {
        echo '<form id="language-switcher" method="get" action="' . esc_url(home_url('/')) . '">';
        echo '<select name="lang" onchange="this.form.submit()">';

        foreach ($languages as $language) {
            $selected = ($language['active']) ? 'selected' : '';
            echo '<option value="' . esc_attr($language['language_code']) . '" ' . $selected . '>';
            echo esc_html($language['native_name']);
            echo '</option>';
        }

        echo '</select>';
        echo '</form>';
    }
}

To use this code snippet, you can add it to your theme’s functions.php file or create a custom plugin. Then, you can call the wpsnippets_custom_language_switcher() function wherever you want to display the custom language switcher. The function checks if there are more than one enabled languages and generates a dropdown select menu with the language options. The currently active language is pre-selected in the dropdown.

Remember to style the language switcher according to your website’s design using CSS. You can target the #language-switcher ID in your CSS to apply custom styles to the language switcher form.

This custom language switcher can be useful when you want to have more control over the appearance and behavior of the WPML language switcher. It allows you to create a custom language switcher using a dropdown select menu, which can be integrated into your website’s navigation menu or any other desired location.

Examples

Example 1: Customizing the WPML language switcher with a custom template

This example demonstrates how to customize the WPML language switcher by creating a custom template for it.

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

This code creates a custom language switcher template by using the icl_get_languages() function to retrieve the list of languages. It then loops through each language and generates the HTML markup for the language switcher. The resulting HTML is wrapped in a <ul> element with the class custom-language-switcher.

Example 2: Adding a custom CSS class to the active language in the WPML language switcher

This example demonstrates how to add a custom CSS class to the active language in the WPML language switcher.

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

This code is similar to the previous example, but it adds a custom CSS class active to the <span> element wrapping the active language. This allows you to style the active language differently using CSS.

Example 3: Displaying the language switcher in a specific location on the page

This example demonstrates how to display the WPML language switcher in a specific location on the page using a shortcode.

function wpsnippets_custom_language_switcher_shortcode() {
    ob_start();
    wpsnippets_custom_language_switcher();
    return ob_get_clean();
}
add_shortcode( 'custom_language_switcher', 'wpsnippets_custom_language_switcher_shortcode' );

This code creates a shortcode [custom_language_switcher] that can be used to display the custom language switcher anywhere in the content area of a WordPress page or post. The shortcode function wpsnippets_custom_language_switcher_shortcode() simply calls the wpsnippets_custom_language_switcher() function and captures its output using output buffering. The captured output is then returned as the shortcode’s content.