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 thread is resolved. Here is a description of the problem and solution.

Problem: I want to show language changer on the header toolbar with only flags, or flags with with names of the language.

Solution: Please follow this steps:
- Go to WPML -> Languages -> Custom language switchers -> Enable this option -> Save the changes -> Click on Customize button -> In 'Language switcher style' select 'Dropdown' -> In 'What to include in the language switcher' select 'Flag' option and 'Current language' option -> Save the changes.
- Conenct to your site via FTP -> Go to wp-content/themes/jupiter/views/header/holders/toolbar.php line 44 -> Comment from line 44 to line 46 -> Add the following code: do_action('wpml_add_language_selector'); -> Save the changes.
- Go to Appearance -> Customize -> Additional CSS -> Add this CSS code:

.wpml-ls-legacy-dropdown {
    width: auto;
    max-width: 100%;
    display: inline-block;
}

- Save the changes.

Relevant Documentation:

This topic contains 9 replies, has 2 voices.

Last updated by Carlos Rojas 1 year ago.

Assigned support staff: Carlos Rojas.

Author Posts
October 4, 2018 at 5:55 pm #2788480

erneeraqF

Hi all

I want to show language changer on the header toolbar with only flags, or flags with with names of the language.

Here is my existing code:

<?php

/**
* Template part for header toolbar WPML/Polylang Language Switcher. views/header/toolbar
*
* @author Artbees
* @package jupiter/views
* @since 5.0.0
* @since 5.9.3 Renamed file.
*/

$languages = icl_get_languages( 'skip_missing=0&orderby=id' );
$output = '';
if ( is_array( $languages ) ) {

$output .= '<div class="mk-language-nav"><a href="#">' . Mk_SVG_Icons::get_svg_icon_by_class_name( false, 'mk-icon-globe', 16 ) . __( 'Languages', 'mk_framework' ) . '</a>';
$output .= '<div class="mk-language-nav-sub-wrapper"><div class="mk-language-nav-sub">';
$output .= "<ul class='mk-language-navigation'>";

foreach ( $languages as $lang ) {
$output .= "<li class='language_" . esc_attr( $lang['language_code'] ) . "'><a href='" . esc_url( $lang['url'] ) . "'>";
$output .= "<span class='mk-lang-flag'><img title='" . esc_attr( $lang['native_name'] ) . "' src='" . esc_url( $lang['country_flag_url'] ) . "' /></span>";
$output .= "<span class='mk-lang-name'>" . esc_html( $lang['native_name'] ) . '</span>';
$output .= '</a>';
}

$output .= '</div></div></div>';
}

echo $output;

How can i achieve this?

Regards

Erneeraq Fleischer

October 5, 2018 at 9:49 pm #2791753

Carlos Rojas
Supporter

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

Timezone: America/Montevideo (GMT-03:00)

Hello,
Thank you for contacting WPML support.

1.- I would like to ask you to visit this link where you will find the official documentation related to the language switcher: https://wpml.org/tutorials/language-switchers/

Specially this link: https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

Please let me know if you need further assistance and I will be more than happy to help.

2.- Please increase the PHP Memory Limit. Minimum requirements are 128Mb: https://wpml.org/home/minimum-requirements/
You can add this to wp-config.php to increase WP memory:

/** Memory Limit */
define('WP_MEMORY_LIMIT', '128M');
define( 'WP_MAX_MEMORY_LIMIT', '128M' );

- Add it above the line /* That's all, stop editing! Happy blogging. */

Note: Please remember to update all outdated plugins, specially WPML plugins to their latest version. Outdated functionalities can cause conflicts in the code.

Kind regards,
Carlos

October 8, 2018 at 11:44 am #2795842

erneeraqF

I think the one i need is this:

https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/?utm_source=tutorials&utm_medium=email&utm_campaign=wpml-tutorials&utm_term=custom-language-switcher#language-selector-with-flags-only

So how do i implement this on my existing code?

Regards

Erneeraq

October 8, 2018 at 7:48 pm #2797197

Carlos Rojas
Supporter

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

Timezone: America/Montevideo (GMT-03:00)

Hi Erneeraq,

Before we take a deeper look at the code, I would like to ask you to attach a screenshot of the site and point out where do you desire to how this language switcher.

This way I can have more information and select the best way to show this language switcher.

Looking forward to your answer.
Best regards,
Carlos

October 9, 2018 at 12:31 am #2797604

erneeraqF

Ok i have now attached screenshot.

Regards
Erneeraq

October 9, 2018 at 1:03 am #2797629

Carlos Rojas
Supporter

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

Timezone: America/Montevideo (GMT-03:00)

Hi Erneeraq,
Thank you very much for the screenshot.

I would like to request temporary access (wp-admin and FTP) to your site to take better look at the issue. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Our Debugging Procedures

I will be checking various settings in the backend to see if the issue can be resolved. Although I won't be making changes that affect the live site, it is still good practice to backup the site before providing us access. In the event that we do need to debug the site further, I will duplicate the site and work in a separate, local development environment to avoid affecting the live site.

Best regards,
Carlos

October 9, 2018 at 1:39 am #2797642

Carlos Rojas
Supporter

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

Timezone: America/Montevideo (GMT-03:00)

Hi Erneeraq,
Thank you very much for the information provided.

I just made a copy of the site using the Duplicator plugin. My next step will be check the code in a local environment and make it work, this way I won't affect the live site.

I will get back to you as soon as I have an answer.
Best regards,
Carlos

October 9, 2018 at 6:24 pm #2801540

Carlos Rojas
Supporter

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

Timezone: America/Montevideo (GMT-03:00)

Hi Erneeraq,

Please follow this steps:
- Go to WPML -> Languages -> Custom language switchers -> Enable this option -> Save the changes -> Click on Customize button -> In 'Language switcher style' select 'Dropdown' -> In 'What to include in the language switcher' select 'Flag' option and 'Current language' option -> Save the changes.
- Conenct to your site via FTP -> Go to wp-content/themes/jupiter/views/header/holders/toolbar.php line 44 -> Comment from line 44 to line 46 -> Add the following code: do_action('wpml_add_language_selector'); -> Save the changes.
- Go to Appearance -> Customize -> Additional CSS -> Add this CSS code:

.wpml-ls-legacy-dropdown {
	width: auto;
    max-width: 100%;
    display: inline-block;
}

- Save the changes.

Could you tell me if the language switcher is shown as you expect after the steps above?

Note: I recommend you to apply this changes in the child theme (and activate/use the child theme instead of the parent theme) because this changes might be lost in the next theme update. Also the CSS is not finished for the language switcher, but I just want to test that it works correctly. We can finish the CSS in the next message if you need it.

Best regards,
Carlos

October 9, 2018 at 11:47 pm #2802368

erneeraqF

My issue is resolved now. Thank you!

October 10, 2018 at 1:29 am #2802436

Carlos Rojas
Supporter

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

Timezone: America/Montevideo (GMT-03:00)

Hi Erneeraq,

I'm glad to hear that the issue is solved 🙂

Please don't hesitate to contact us if you need our help in the future with WPML. We will be more than happy to help.
Best regards,
Carlos