Skip Navigation

Home › Support › English Support › [Resolved] Is there some language switcher code we can add to the header

[Resolved] Is there some language switcher code we can add to the header

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

Problem:
The client needed to add a language switcher to the header container without placing it in a menu, as the page in question was a standalone landing page with no navigation to other pages.
Solution:
We recommended the following steps to add a custom language switcher:
1. If the theme allows adding content or code to the desired position, use the following PHP code to display a custom language switcher:

do_action('wpml_add_language_selector');

2. Alternatively, use the following shortcode to add a language switcher:

[wpml_language_selector_widget]

Then, customize the language switcher by navigating to WPML >> Languages >> Custom language switchers. For detailed guidance, refer to our documentation on adding language switchers using PHP and shortcodes: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/adding-language-switchers-using-php-and-shortcodes/

Please note that the solution provided might be outdated or not applicable to your case. If the issue persists, we highly recommend checking the related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need help, please open a new support ticket.

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.

This topic is split from https://wpml.org/forums/topic/styling-the-language-switcher-sub-menu/

Tagged: 

This topic contains 8 replies, has 2 voices.

Last updated by Noman 1 year, 1 month ago.

Assisted by: Noman.

Author Posts
April 16, 2024 at 7:19 am #15522803

our-zanzibarG

Hey,

I'm thinking it isn't necessary to have the language switcher in a menu as this page is essential a landing page and there are no other pages to navigate to. So is there some language switcher code we can add to the header container?

Thanks
April 16, 2024 at 7:33 am #15522832

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. If your theme provides you the option to add content (for example a widget) or some code exactly on the position where you want to display the language switcher, please try the below steps:

1. You can use the below code in PHP files to show a custom language switcher on a specific position:

do_action('wpml_add_language_selector');

2. Or you can use the below shortcode:

[wpml_language_selector_widget]

And customize it from WPML >> Languages > Custom language switchers as you can see in the attached screenshot.

Here is the doc for the custom language switcher:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/adding-language-switchers-using-php-and-shortcodes/

3. If the issue persists, please provide temporary access (WP-Admin and FTP Login info) to your site (preferably staging site), so that I can look into your setup and debug the issue.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to deactivate and reactivate Plugins and the Theme and to change configurations on the site. This is also a reason the backup is really important.

Please let me know if this resolves your issue or if you need further assistance with this issue.

Thank you

Customize language switcher.png
April 16, 2024 at 8:28 am #15523305

our-zanzibarG

Hey Noman,

I don't think tis is possible with a shortcode as im struggling to find how to edit the header.

Your colleague helped me out with something similar a while back on another site. He added some custom code to the header. i tried copy this across but it didn't work. Please see the code in the screen of how it was used. The code is also below.

.wpml-ls-legacy-dropdown {
width: 48px;
padding: 0;
margin-left: 15px;
}

.wpml-ls-legacy-dropdown a {
padding: 5px 5px;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
border: none;
}

.wpml-ls-legacy-dropdown .wpml-ls-item:hover,
.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a, .wpml-ls-legacy-dropdown a:focus, .wpml-ls-legacy-dropdown a:hover {
background-color: transparent;
border: none;
}

.wpml-ls-legacy-dropdown a,
.wpml-ls-legacy-dropdown a:hover,
.wpml-ls-legacy-dropdown:hover {
border: none;
background-color: none;
}

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after {
content: "";
display: block;
position: absolute;
top: calc(50% - 12px);
right: 0;
width: 24px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='hidden link' width='24px' height='24px' viewBox='0 0 24 24' fill='%23434359'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") no-repeat;
opacity: 0.67;
pointer-events: none;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
background-color: transparent;
border: none;
padding: 0;
margin-left: 5px;
}
.sm-no-room{text-align:center; font-size: 1.875rem;
font-family: "Playfair Display", serif;
font-weight: 400;
line-height: 1.15;
letter-spacing: 0.01em}

#bookingResultList{
max-height: 600px;
overflow: auto;
margin-right: -24px;
padding-right: 24px;
min-height: 50px;
}

.sm-separator{
padding-bottom: 10px;
border-bottom: 3px solid #b1a375;
}

Thanks

Jack

Customize-Zanzibar-Hotels-Resorts-Our-Zanzibar-Hotel-Group (1).png
Customise-Babu-Villas-–-Karibu-Zanzibar.jpg
April 16, 2024 at 4:06 pm #15527074

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I’ll try my best to help you in this case, Can you please let me know a bit more details to better understand the issue:

1. In which place in your site header you want to display the language switcher?

2. Do you want to keep the same language switcher style as you have currently on your site as you can see in the attached screenshot?

3. At the moment, in mobile view, the language switcher shows by clicking the hamburger menu, is that fine or you want to display language switcher without clicking it as in the desktop view?

Thank you for your cooperation

Current desktop switcher style and position.png
hamburger menu.png
April 17, 2024 at 5:36 am #15529047

our-zanzibarG

Hey Noman,

1. I would like it in the exact same place it is, in the top right please.

2. Yes to the same style as it currently is.

3. I would like to have it WITHOUT the hamburger menu so like it is in the desktop.

I can provide access to the site?

Many thanks

Jack
April 17, 2024 at 6:59 am #15529600

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for the additional details. Yes, please provide temporary access (WP-Admin and FTP Login info) to your site (preferably staging site), so that I can look into your setup and debug the issue.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

Thank you
April 17, 2024 at 6:56 pm #15534567

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for sharing the login details. I’ve copied the desktop CSS in WPML >> Languages > Additional CSS section and removed the media query part so that it will not change the layout on mobile view. Now it should display like the desktop view. Could you please take a look and confirm if it's working?

Thank you

mobile view switcher.png
April 18, 2024 at 5:41 am #15535368

our-zanzibarG

Hey Noman,

Thanks for making the change. This is looking great. The only issue i have is that when on mobile I cannot select the other language in the drop down menu. When you tap the flag it just loads the same page. Please try changing the language yourself on mobile to see the issue.

If we can solve this then we are done :).

Many thanks

Jack
April 18, 2024 at 1:23 pm #15539026

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I’ve updated the CSS and now it works correctly for me on mobile as you can see in the attached screenshots. Could you please try to clear your browser cache and take another look at it and let me know if this resolves the issue.

Please understand that I'm helping you here with an issue that is out of the scope of our support forum and we will not be able to support this particular fix in the future. Because the theme or our code might have changed, so please always be aware of this. Right now it's working without any issue.

Thank you

mobile view de.JPEG
mobile view en.JPEG
April 19, 2024 at 5:44 am #15541742

our-zanzibarG

Hey Noman,

Many thanks for your help! All is working fine on both desktop and mobile.

Much appreciated!

Thanks

Jack