Really custom language switcher

This thread is resolved. Here is a description of the problem and solution.

Problem:
You need a simple language switcher with your own styling, but WPML is loading 90 default styles that you have to override.
Solution:
If you're implementing a custom language switcher and need to prevent WPML's default styles from loading, you can modify the code in your site. Specifically, you can edit the

styleLanguageSwitcher

function in the file

/wp-content/plugins/sitepress-multilingual-cms/classes/block-editor/Loader.php

. Here's how you can adjust the function:

private function styleLanguageSwitcher() {<br />    if ( in_array( self::BLOCK_LANGUAGE_SWITCHER, $this->cssLoaded, true ) ) {<br />        return \'\';<br />    }<br /><br />    this->cssLoaded[] = self::BLOCK_LANGUAGE_SWITCHER;<br />    $css = file_get_contents(<br />        WPML_PLUGIN_PATH . \'/dist/css/blocks/language-switcher.css\'<br />    );<br /><br />    return $css ?: \'\';<br />}<br />

Add the following code within this method to check if the constant

ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS

is defined, and if so, return nothing, effectively stopping the CSS from loading:

if (defined('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS')) {<br />    return \'\';<br />}

This solution might be outdated or not applicable to your specific case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If this does not resolve your issue, please open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: Documentation request

This topic contains 30 replies, has 1 voice.

Last updated by wdburgdorf 1 week, 2 days ago.

Assisted by: Paola Mendiburu.

Author	Posts
May 2, 2025 at 2:31 pm #16989942
wdburgdorf	Background of the issue: I need a very simple language switcher with links side by side in my own simple styling. I used the Custom Language Switcher as described in the WPML documentation: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/. Symptoms: There are already 90 styles loading, and I have to override all of these to apply my own styles. Questions: How can I stop these preset styles from loading?
May 2, 2025 at 2:41 pm #16990091
Bruno Kos WPML Supporter since 12/2018 Languages: English (English ) German (Deutsch ) French (Français ) Timezone: Europe/Zagreb (GMT+02:00)	Hi, Can you check this? https://wpml.org/documentation/support/wpml-coding-api/#disabling-wpmls-css-and-js-files
May 2, 2025 at 2:57 pm #16990107
wdburgdorf	Hi Bruno, Thanks for the quick and helpful answer. That's great, that it is so simple. It does work well for the switcher in the main navigation. But it does not seem to do anything for the custom switcher that I added as a Gutenberg block. The same styles still appear there.
May 6, 2025 at 7:27 am #16999521
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Hello, My name is Carlos, and I will continue working on this ticket In this case, I'd recommend adding the CSS in WPML -> Languages -> Language switcher options -> Additional CSS section as described in this section of the documentation: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/#the-styling-part If you added a custom code to your functions.php file to create the language switcher, I would recommend adding an ID so you can easily change the CSS. Please let me know if you need further help/
May 6, 2025 at 7:55 am #16999611
wdburgdorf	Hi Carlos, Thanks for coming in. The issue is not adding or changing CSS. This was my Question: How can I stop these preset styles from loading? I just don't want WPML to load any styles of it's own that I then have to work against. I know how to do that, but it causes extra effort that I don't think should be necessary. Thank you.
May 6, 2025 at 8:05 am #16999763
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Hi, Thank you for your clarification. At the moment, the only available option WPML provides to disable its CSS and JS files is the one shared earlier by my colleague Bruno, which is outlined here: https://wpml.org/documentation/support/wpml-coding-api/#disabling-wpmls-css-and-js-files However, as you’ve correctly noticed, this method only affects the default language switcher in the menu. It does not apply to custom language switchers, which are not currently covered by this setting. If you're implementing a custom switcher and need more granular control over assets, you might consider deregistering specific styles or scripts via custom code.
May 8, 2025 at 1:13 pm #17011960
wdburgdorf	Thanks Carlos. Deregistering is really what I'd like to do. But since these specific styles do not seem to be registered anywhere, I would not know how to deregister. Maybe you can put this down as a feature request, to offer a clean possibility to stop these styles from loading? I cannot imagine being the first one having issues with that. Thanks, Ralf
May 9, 2025 at 8:41 am #17015206
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Hi Ralf, I'm consulting my colleagues about this. I will get back to you as soon as I get an answer.
May 12, 2025 at 8:30 am #17021496
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Hi Ralf, After following the steps described in the guide shared by Bruno: https://wpml.org/documentation/support/wpml-coding-api/#disabling-wpmls-css-and-js-files can you share the code you added to your functions.php file?
May 13, 2025 at 9:24 am #17026229
wdburgdorf	Hi Carlos, this is it: define('ICL_DONT_LOAD_NAVIGATION_CSS', true); define('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true); define('ICL_DONT_LOAD_LANGUAGES_JS', true); Edit: When this is active, then there is actually one file less loaded in the frontend: /wp-content/plugins/sitepress-multilingual-cms/templates/language-switchers/legacy-list-horizontal/style.min.css?ver=1 But the inline <style> code is still there.
May 13, 2025 at 9:36 am #17026285
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Hi Ralf, Thank you very much for your message 1. Please share the site access credentials in your next message, which I have set private. Confirm that you create a full site backup that you can restore if necessary. 2.- Also, please share a screenshot or the steps to follow to find the language switcher. My goal is to reproduce the issue on your site.
May 13, 2025 at 12:39 pm #17027554
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Thank you very much for sharing the credentials requested. I double-checked the HTML and the inline styles in the HTML are not coming from WPML. I consulted a colleague and he recommended checking if there is any cache memory or CSS optimizer that embeds the CSS into the HTML.
May 14, 2025 at 8:59 am #17031067
wdburgdorf	Well, I do use perfmatters, but not inlining styles, and no optimizer would do it like this, at the actual element. The style tag contains code from this file: wp-content/plugins/sitepress-multilingual-cms/dist/css/blocks/language-switcher.css Not similar, it is exactly that code. So I assumed it is injected from there. And the plugin code looks like it does that. But I can't be sure ... So I wonder if your colleague could perhaps have another look? Thanks, Ralf
May 14, 2025 at 9:53 am #17031296
Carlos Rojas WPML Supporter since 03/2017 Languages: English (English ) Spanish (Español ) Timezone: Europe/Madrid (GMT+02:00)	Hi Ralf, We tested it on a sandbox site with a minimal installation. Using this link: hidden link you can access the backend of the sandbox site. The language switcher was added in the footer, so you can see it here: hidden link I can see you have a multisite installation, maybe that is what's causing this behavior. However, I would recommend deactivating/activating the WPML plugins on the site and double-checking if the issue has disappeared.
May 14, 2025 at 11:40 am #17031911
wdburgdorf	Hi Carlos, Thanks for setting up the testing site. Your switcher looks like the default one, not the custom one that I am having the issue with. There is no issue with the default one, I've been able to remove the WPML CSS, too, for that one, with the forementioned constant settings. That inline styling only appears with the custom switcher. When deactivating WPML Multilingual CMS, it is gone.