Display language switcher in header for mobile

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

Problem:
The client wanted to add a language switcher to the header of their website, specifically in a mobile view, to make it appear just with flags and a dropdown the size of the flags, similar to the WPML site.
Solution:
We recommended two approaches:
1. Add a language switcher in a custom location using PHP by inserting the following code:

do_action('wpml_add_language_selector')

. We advised contacting the theme developer for guidance on where to place this code within the theme files. More information on this method can be found here: Adding Language Switchers using PHP.
2. If the client is using Elementor, they can add a shortcode directly in the header using the Elementor templates. The shortcode to use is:

[wpml_language_selector_widget]

. After adding the shortcode, adjustments can be made with CSS to style the switcher similarly to the WPML site.

If these solutions do not resolve your issue or if they seem 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. If further assistance is needed, 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.

This topic is split from https://wpml.org/forums/topic/automatic-translations-arent-showing/

Tagged: Custom Work, Exception

This topic contains 1 reply, has 2 voices.

Last updated by Bobby 1 month, 3 weeks ago.

Assisted by: Bobby.

Author	Posts
September 16, 2024 at 5:07 pm #16185074
keithT-7	Thank you so much!! this was very helpful. my site is now translated! thank you for helping clarify all of that. I could not have figured it out myself. I do have a new question if thats ok to do here. I added a language switcher to the top of my home page because it is more visible than as either a main menu option or in the footer, where I also have it. but, i would prefer to have it in the Header area, but I cant figure out how to do that. I attached a screenshot from my phone screen of my home page, and also screenshots of the language switcher on this very WPML website. i like the location, the fact that its just the flags, and the drop down that is only the size of the flags. i would like it to appear exactly like that on my site if possible
September 16, 2024 at 5:11 pm #16185080
Bobby Supporter Languages: English (English ) Timezone: America/Los_Angeles (GMT-08:00)	The language switcher by default is placed within the menu. In mobile and most likely tablet views the menu switches to a mobile menu (shows after clicking the hamburger icon) which is why the menu is within there. In order to add the menu to the header in mobile view you can do the following: #1 Add a language switcher in a custom location using PHP by adding the following do_action('wpml_add_language_selector') My recommendation is to contact the theme developer, explain where you want the switcher to display and ask them where can you place this code within their code as they will know to give you the exact location. More information can be found here: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/adding-language-switchers-using-php-and-shortcodes/#language-switchers-using-php #2 If you can edit the header you can add a shortcode directly in the header. Usually you can do this with Elementor templates. [wpml_language_selector_widget] Once that is done, we can then adjust it using CSS to make it similar to the one from our site in regards of style. Let me know your results, please.
September 20, 2024 at 4:30 am #16201113
keithT-7	thank you Bobby for pointing me in the right direction. i went to Elementor and got more tips and learned how to edit the header, then i was able to drop the language switcher widget there and after tooling with it for awhile, everything is how i want it now. much thanks!

keithT-7 confirmed that the issue was resolved on 2024-09-20 04:30:54.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.