Tag: Language

Language call different style.css in WPML Multilingual

Method #1

If the language code is en, get stye-en.css and if it is es, get style-es.css.

I just do not know where to add the stylesheet for each. I tried fiddling around but was unsuccessful.

I will post here my setup so you can see what i have:

Language codes:
en (main English page)
es (main Spanish page)
pt-br (main Portuguese page)
en_bol (Bolivia English Page)
es_bol (Bolivia Spanish page)
en_ar (Argentina English page)
es_ar (Argentina Spanish page)
etc…(more countries)

The main website has “en”, “es” and “pt-br” as languages that will use the same stylesheet, main-style.css.

“en_bol” and “es_bol” will use another stylesheet, bol-style.css.

“en_ar” and “es_ar” will use another stylesheet, ar-style.css…etc..

You can do this with the code below. This will insert a class in the body tag:

1
2
3
4
5
6
7
8
9
//functions.php
function wpml_lang_body_class($classes) {
    if(defined('ICL_LANGUAGE_CODE')) {
        $classes[] = "lang-" . ICL_LANGUAGE_CODE;
    }
    
    return $classes;
}
add_filter('body_class','wpml_lang_body_class');

You can also use the ICL_LANGUAGE_CODE:

1
2
3
4
5
6
7
//header.php
if(ICL_LANGUAGE_CODE == 'en'){
     //load english style - style-en.css.
     //<style....
} else if(ICL_LANGUAGE_CODE == 'es'){
     //load spanish style - style-es.css.
}

<code>

//functions.php
function wpml_lang_body_class($classes) {
    if(defined('ICL_LANGUAGE_CODE')) {
        $classes[] = "lang-" . ICL_LANGUAGE_CODE;
    }
    
    return $classes;
}
add_filter('body_class','wpml_lang_body_class');

</code>