WPML custom language switcher CSS

A custom language switcher is a useful feature to have on a multilingual WordPress website. It allows users to easily switch between different languages on your site. To style the custom language switcher using CSS, you can follow these steps:

1. First, you need to enqueue a custom CSS file in your theme or plugin. You can do this by using the wp_enqueue_style() function in WordPress. Here’s an example of how to enqueue a custom CSS file named custom-language-switcher.css:

function wpsnippets_enqueue_custom_css() {
    wp_enqueue_style( 'custom-language-switcher', get_stylesheet_directory_uri() . '/custom-language-switcher.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );

2. Create a new CSS file named custom-language-switcher.css in your theme or plugin directory. This file will contain the CSS code to style the custom language switcher. Here’s an example of how the CSS code might look like:

/* Custom language switcher styles */
.custom-language-switcher {
    /* Add your custom styles here */
}

.custom-language-switcher a {
    /* Add your custom styles here */
}

.custom-language-switcher a.current {
    /* Add your custom styles here */
}

3. Replace the .custom-language-switcher class and its child elements with your own CSS selectors and add your desired styles. You can target the language switcher container, individual language links, and the current language link separately.

4. Save the custom-language-switcher.css file and upload it to your theme or plugin directory.

5. Finally, you can use the custom language switcher CSS class in your HTML markup to apply the styles. For example:

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

In this example, we’re using the icl_get_languages() function from the WPML plugin to retrieve the available languages. We then loop through each language and output the language switcher HTML markup using the .custom-language-switcher class.

Remember to customize the HTML markup and CSS styles according to your specific requirements and design preferences.

Examples

Example 1: Adding Custom CSS to WPML Language Switcher

This use case demonstrates how to add custom CSS styles to the WPML language switcher. By adding custom CSS, you can modify the appearance of the language switcher to match your website’s design.

function wpsnippets_wpml_custom_language_switcher_css() {
    wp_enqueue_style( 'custom-wpml-language-switcher', get_stylesheet_directory_uri() . '/custom-wpml-language-switcher.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_wpml_custom_language_switcher_css' );

In this code example, we use the wp_enqueue_style() function to enqueue a custom CSS file named custom-wpml-language-switcher.css. The get_stylesheet_directory_uri() function retrieves the URL of the current theme’s stylesheet directory. By hooking this code to the wp_enqueue_scripts action, the custom CSS file will be loaded on the front-end.

Example 2: Modifying WPML Language Switcher CSS Classes

This use case demonstrates how to modify the CSS classes of the WPML language switcher elements. By modifying the CSS classes, you can target specific elements of the language switcher and apply custom styles.

function wpsnippets_wpml_custom_language_switcher_css_classes( $css_classes, $language_code ) {
    $css_classes[] = 'custom-language-switcher-class';
    return $css_classes;
}
add_filter( 'wpml_ls_languages', 'wpsnippets_wpml_custom_language_switcher_css_classes', 10, 2 );

In this code example, we use the wpml_ls_languages filter to modify the CSS classes of the language switcher elements. The $css_classes parameter is an array of CSS classes, and the $language_code parameter contains the language code of the current language. By adding our custom CSS class 'custom-language-switcher-class' to the $css_classes array, we can target and style specific elements of the language switcher.

Example 3: Changing WPML Language Switcher Flags

This use case demonstrates how to change the flags used in the WPML language switcher. By changing the flags, you can use custom flag images or icons that better represent the languages on your website.

function wpsnippets_wpml_custom_language_switcher_flags( $flags ) {
    $flags['en'] = 'path/to/custom-flag-en.png';
    $flags['fr'] = 'path/to/custom-flag-fr.png';
    return $flags;
}
add_filter( 'wpml_ls_flag_mapping', 'wpsnippets_wpml_custom_language_switcher_flags' );

In this code example, we use the wpml_ls_flag_mapping filter to change the flags used in the language switcher. The $flags parameter is an associative array where the keys are language codes and the values are the paths to the custom flag images. By modifying the values of specific language codes, we can replace the default flags with our custom flag images.