Skip to content Skip to sidebar

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

Problem:
The client needs a language switcher similar to the one on a specific website but struggles with limited customizability using standard options. They have purchased WPML and seek guidance on implementing a custom UI for the language switcher.
Solution:
We recommend creating a custom language switcher using WPML's PHP functions or shortcodes, which allow for full customization. You can use the wpml_active_languages filter to retrieve an array of all active languages, including their codes, URLs, and active states. This enables you to loop through these languages and apply custom classes for styling, thus gaining complete control over the HTML structure and appearance. For further guidance, please refer to the following documentation:

If this solution does not apply to your case, or if it seems outdated, 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. Should you need further assistance, 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: 

This topic contains 6 replies, has 0 voices.

Last updated by Marcel 3 weeks, 6 days ago.

Assisted by: Marcel.

Author Posts
February 9, 2026 at 11:00 pm #17806980

michalG-35

I need a language switcher identical to the one on hidden link
I’ve explored multiple approaches, but none have worked due to limited customizability. I even purchased WPML, as I noticed this site is using it, but I still need guidance on implementing this UI correctly. Could you please guide me on the best way to achieve this?

February 10, 2026 at 8:23 am #17807479

Marcel
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Europe/Madrid (GMT+01:00)

Hi,

The UI is custom-built specifically for that Elementor design. The best way to understand how it was implemented is to review the site’s stylesheet—particularly the inline Elementor styles—from the link you shared.

Recreating this setup requires a substantial amount of custom CSS along with multiple media queries. Below is what the site itself uses as a reference:

/* Start custom CSS for shortcode, class: .elementor-element-4b8703c */
/* === KONTENER === */
.ww-wpml-dropdown {
    position: relative;
    display: inline-block;
    z-index: 999;
}

/* === TRIGGER – kółko z flagą === */
.ww-wpml-dropdown .ww-trigger {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid rgba(17,17,17,.12);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    padding: 0;
    cursor: pointer;
}

.ww-wpml-dropdown .ww-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* === DROPDOWN === */
.ww-wpml-dropdown .ww-menu {
    position: absolute;
    top: 120%;
    left: 0;
    background: #fff;
    border-radius: 14px;
    padding: 10px 8px;
    min-width: 180px;
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
    margin-top: 6px;
    list-style: none;
    display: none;
    /* ukryte domyślnie */
    flex-direction: column;
}

/* Desktop: pokaż dropdown na hover */
@media (hover: hover) {
    .ww-wpml-dropdown:hover .ww-menu {
        display: flex;
    }
}

/* Mobile: pokaż dropdown tylko, jeśli kliknięto i dodana jest klasa .is-open */
@media (hover: none) {
    .ww-wpml-dropdown.is-open .ww-menu {
        display: flex;
    }
}

/* === POZYCJE W MENU === */
.ww-wpml-dropdown .ww-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #6b7280;
    /* szary */
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.ww-wpml-dropdown .ww-item:not(.is-current) .ww-link:hover {
    background: #f3f4f6;
    color: #111827;
    /* ciemny szary/czarny */
}

/* Current język zawsze na górze */
.ww-wpml-dropdown .ww-item.is-current {
    order: -1;
}

/* Current język – pogrubiony, nieklikalny */
.ww-wpml-dropdown .ww-item.is-current .ww-link {
    color: #111827;
    font-weight: 700;
    pointer-events: none;
    cursor: default;
}

/* Usuń niechciane obrysy focus */
.ww-wpml-dropdown a:focus, .ww-wpml-dropdown button:focus {
    outline: none;
    box-shadow: none;
}

.ww-wpml-dropdown:hover .ww-menu::before {
    content: "";
    position: absolute;
    top: -20px;
    /* wysokość bufora */
    left: 0;
    right: 0;
    height: 30px;
}

However, I recommend reaching out to a freelancer who can assist you with creating a custom integration like this, as custom coding falls outside the scope of our support policy.

Best regards,
Marcel

February 10, 2026 at 10:22 am #17808198

michalG-35

Hi Marcel,

I’m a web developer and I’m comfortable extracting and implementing the required elements. I actually extracted it yesterday. You can see my progress here:
hidden link

The main issue I’m facing is that the HTML structure on delante.com differs from the structure being rendered on our site (growston.com). Because of this difference, the implementation isn’t working dynamically as expected.

Could you please advise on how to handle this? Alternatively, could you share the exact shortcode or code snippet that generates the required HTML structure so I can replicate it properly on our end?

Thanks in advance.

February 10, 2026 at 11:05 am #17808361

Marcel
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Europe/Madrid (GMT+01:00)

Hi,

yes, but you can't copy/paste the existing implementation. This site uses their own classes (.ww-*, .ww-wpml-*;) you will need to create your own language switcher based on these classes or adjust the CSS of the existing switcher.

WPML provides PHP functions (as well as shortcodes) that allow you to create a fully custom language switcher. This lets you wrap it in your own HTML and apply your own classes. For example, see this filter: wpml_active_languages.

This filter returns an array of all active languages, including their codes, URLs, and active states. You can loop through this array to add custom classes for styling, giving you complete control over the HTML structure and appearance—without having to rely on the default language switcher.

I also recommend checking these guides for more details:
- https://wpml.org/documentation/support/wpml-coding-api/shortcodes/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/adding-language-switchers-using-php-and-shortcodes/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/

Best Regards,
Marcel

February 10, 2026 at 9:52 pm #17811197

michalG-35

Ok, if I keep the classes same, how can I get the same user experience? I just want to know where to paste which code so it will work dynamically. Can you please guide me a bit on this?

February 10, 2026 at 9:53 pm #17811199

michalG-35

Any video or work that is already done similar to this one, you can share. Thanks

February 11, 2026 at 7:05 am #17811460

Marcel
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Europe/Madrid (GMT+01:00)

Hi,

I’m sorry, but there isn’t a video of a finished solution that I can share, nor is there a way to simply copy and paste the existing implementation.

On your site, you’re currently using the standard WPML language switcher. The site you referenced is using a custom-built switcher, injected via shortcode (See class="elementor-shortcode") and structured with its own specific HTML and class names. For that reason, the two implementations are technically different.

What you’re referring to is a fully custom language switcher. To replicate it, it would need to be first developed specifically for your site so that the HTML structure matches the expected .ww-* classes and behavior.

WPML provides the necessary functions and documentation (such as wpml_active_languages and shortcode options) to build this properly. However, matching the exact structure and styling requires custom development work.

Please note that we’re not able to provide custom coding services and can only share with you the available APIs and documentation, as I’ve already done, but the final implementation would need to be handled on your side.

Best regards,
Marcel