WPML language switcher custom CSS

The WPML plugin is a popular choice for creating multilingual websites with WordPress. One of the common requirements when using WPML is to customize the appearance of the language switcher. This can be achieved by adding custom CSS to your WordPress theme.

To add custom CSS for the WPML language switcher, you can use the wp_enqueue_style() function in combination with the wp_add_inline_style() function. The wp_enqueue_style() function is used to enqueue a stylesheet, and the wp_add_inline_style() function allows you to add inline CSS to the enqueued stylesheet.

Here’s an example of how you can add custom CSS for the WPML language switcher:

function wpsnippets_custom_wpml_css() {
    // Enqueue the WPML stylesheet
    wp_enqueue_style( 'wpml-style', WPML_PLUGIN_URL . '/frontend/css/language-selector.css' );

    // Add custom CSS for the language switcher
    $custom_css = "
        /* Your custom CSS rules here */
        .wpml-ls-item {
            /* Custom styles for language switcher items */
        }
        .wpml-ls-current-language {
            /* Custom styles for the current language */
        }
    ";

    wp_add_inline_style( 'wpml-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_custom_wpml_css' );

In this example, we first enqueue the WPML stylesheet using the wp_enqueue_style() function. We specify the handle as 'wpml-style' and provide the URL to the WPML language selector stylesheet.

Next, we define our custom CSS rules inside the $custom_css variable. You can add any CSS rules you want to customize the appearance of the language switcher. In this example, we target the .wpml-ls-item class for language switcher items and the .wpml-ls-current-language class for the current language.

Finally, we use the wp_add_inline_style() function to add the custom CSS to the enqueued stylesheet. We pass the handle of the enqueued stylesheet ('wpml-style') and the $custom_css variable as arguments.

By using this code snippet, you can easily customize the appearance of the WPML language switcher by adding your own CSS rules.

Examples

Example 1: Adding Custom CSS to WPML Language Switcher

This example demonstrates how to add custom CSS styles to the WPML language switcher. By using the wp_enqueue_style() function, we can enqueue a custom CSS file and apply styles to the language switcher.

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

In this code example, we define a custom function wpsnippets_wpml_language_switcher_custom_css() that uses the wp_enqueue_style() function to enqueue a custom CSS file named custom.css. The get_stylesheet_directory_uri() function retrieves the URL of the current theme’s stylesheet directory. Finally, we hook this function to the wp_enqueue_scripts action to ensure the CSS file is loaded on the front-end.

Example 2: Adding Inline CSS to WPML Language Switcher

This example demonstrates how to add inline CSS styles directly to the WPML language switcher. By using the wp_add_inline_style() function, we can inject custom CSS rules into the language switcher.

function wpsnippets_wpml_language_switcher_inline_css() {
    $custom_css = "
        .wpml-ls-item {
            color: #ff0000;
        }
    ";
    wp_add_inline_style( 'wpml-language-switcher', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_wpml_language_switcher_inline_css' );

In this code example, we define a custom function wpsnippets_wpml_language_switcher_inline_css() that uses the wp_add_inline_style() function to add inline CSS rules to the wpml-language-switcher stylesheet. The $custom_css variable contains the CSS rules we want to apply to the language switcher. We hook this function to the wp_enqueue_scripts action to ensure the inline CSS is added when the language switcher stylesheet is enqueued.

Example 3: Modifying WPML Language Switcher CSS Classes

This example demonstrates how to modify the CSS classes of the WPML language switcher elements. By using the wpml_ls_languages filter hook, we can modify the output of the language switcher and apply custom CSS classes.

function wpsnippets_wpml_language_switcher_css_classes( $output, $args ) {
    $output = str_replace( 'wpml-ls-item', 'custom-ls-item', $output );
    $output = str_replace( 'wpml-ls-link', 'custom-ls-link', $output );
    return $output;
}
add_filter( 'wpml_ls_languages', 'wpsnippets_wpml_language_switcher_css_classes', 10, 2 );

In this code example, we define a custom function wpsnippets_wpml_language_switcher_css_classes() that takes the $output and $args parameters. We use the str_replace() function to replace the default CSS classes (wpml-ls-item and wpml-ls-link) with our custom classes (custom-ls-item and custom-ls-link). Finally, we hook this function to the wpml_ls_languages filter hook to modify the output of the language switcher.