WPML custom language switcher

A custom language switcher can be useful when you want to provide a more personalized and visually appealing language switcher for your WPML-powered multilingual website. By creating a custom language switcher, you have full control over its design and functionality.

To create a custom language switcher in WordPress using WPML, you can use the icl_get_languages() function to retrieve the available languages and their details. Then, you can loop through the languages and display them as a list or dropdown menu.

Here’s an example code snippet that demonstrates how to create a custom language switcher using WPML:

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

    if (!empty($languages)) {
        echo '<ul class="language-switcher">';

        foreach ($languages as $language) {
            $url = $language['url'];
            $code = $language['language_code'];
            $name = $language['native_name'];

            echo '<li><a href="' . esc_url($url) . '">' . esc_html($name) . '</a></li>';
        }

        echo '</ul>';
    }
}

In this example, we define a custom function called wpsnippets_custom_language_switcher(). Inside the function, we use the icl_get_languages() function to retrieve an array of available languages and their details. We then check if there are any languages available and proceed to display them.

The language details are stored in the $languages variable, which we loop through using a foreach loop. For each language, we extract the URL, language code, and native name. We then output an HTML list item (<li>) containing an anchor (<a>) tag with the language name as the link text and the URL as the link destination.

Finally, we wrap the entire language switcher in a <ul> element with the class language-switcher for styling purposes.

You can place this code snippet in your theme’s functions.php file or in a custom plugin. To display the custom language switcher, simply call the wpsnippets_custom_language_switcher() function wherever you want it to appear in your theme or template files.

Examples

Example #1: Creating a Custom Language Switcher using WPML

This example demonstrates how to create a custom language switcher using WPML. The code example below uses the icl_get_languages() function to retrieve all the available languages and their respective URLs. It then loops through the languages and displays a list of language links.

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

    if (!empty($languages)) {
        echo '<ul>';

        foreach ($languages as $language) {
            echo '<li><a href="' . esc_url($language['url']) . '">' . esc_html($language['native_name']) . '</a></li>';
        }

        echo '</ul>';
    }
}

Explanation:

• The icl_get_languages() function retrieves an array of all the available languages and their respective URLs.
• The code then checks if there are any languages available and if so, it loops through each language and displays a list item with a link to the language URL.
• The language URL is properly escaped using the esc_url() function, and the language name is escaped using the esc_html() function to prevent any potential security vulnerabilities.

Example #2: Adding Flags to the Custom Language Switcher

This example builds upon the previous example and adds flags to the custom language switcher. The code example below retrieves the language code for each language and uses it to display the corresponding flag image.

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

    if (!empty($languages)) {
        echo '<ul>';

        foreach ($languages as $language) {
            $flag_url = WP_PLUGIN_URL . '/sitepress-multilingual-cms/res/flags/' . $language['language_code'] . '.png';
            echo '<li><a href="' . esc_url($language['url']) . '"><img src="' . esc_url($flag_url) . '" alt="' . esc_attr($language['native_name']) . '"></a></li>';
        }

        echo '</ul>';
    }
}

Explanation:

• The code is similar to the previous example, but it adds an additional step to retrieve the flag image URL based on the language code.
• The flag image URL is constructed using the WP_PLUGIN_URL constant and the language code.
• The flag image URL and the language name are properly escaped using the esc_url() and esc_attr() functions respectively.

Example #3: Customizing the Output of the Language Switcher

This example demonstrates how to customize the output of the language switcher by modifying the HTML markup and adding CSS classes. The code example below adds a CSS class to the active language link and wraps the language switcher in a div with a custom CSS class.

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

    if (!empty($languages)) {
        echo '<div class="custom-language-switcher">';

        foreach ($languages as $language) {
            $class = ($language['active']) ? 'active' : '';
            echo '<a href="' . esc_url($language['url']) . '" class="' . esc_attr($class) . '">' . esc_html($language['native_name']) . '</a>';
        }

        echo '</div>';
    }
}

Explanation:

• The code is similar to the previous examples, but it adds an additional step to add a CSS class to the active language link.
• The $class variable is set to 'active' if the language is currently active, and an empty string otherwise.
• The CSS class is added to the language link using the class attribute.
• The language switcher is wrapped in a div with the CSS class 'custom-language-switcher'.