Translate login error messages

[arbolife]

Hi,

I’m having a hard time translating the login error message with WPML. When a user tries to login on the French interface with the Kleo ajax pop-up and enters a wrong password, this message comes:

 ERROR: Invalid username. Lost your password?

I can’t seem to find this in WPML string translation, what am I doing wrong ?

Thanks,

Marc

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

That string belongs to WordPress not to kleo_framework try to search that string in wordpress

An alternative it’s to use that function from second comment http://wordpress.stackexchange.com/questions/127702/how-to-translate-error-invalid-username-lost-your-password

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

It seems like you guys had it right for translation but then commented the code out to put something that can’t be translated easily.

in functions.php on line 1408:

COPY CODE

echo wp_json_encode( array(
				'loggedin' => false,
				'message'  => '<span class="wrong-response"><i class="icon icon-attention"></i> ' . $error_msg . '</span>',
			) );
			//echo json_encode(array( 'loggedin' => false, 'message' => '<span class="wrong-response"><i class="icon icon-attention"></i> ' . __( 'Wrong username or password. Please try again.', 'kleo_framework' ) . '</span>' ));

If I comment the first part and uncomment the second part, it works and can be translated. If this is intended to stay like this, could you guys add a filter there so the content of $error_msg could be easily customized?

Cheers,
Marc

[arbolife]

I couldn’t get any of it to work. I tried the filter you recommended with no effect.

I tried customizing your theme’s function in my child theme and the 2 WPML tricks I know don’t work:
1. $error_msg = __( 'Wrong username or password. Please try again.', 'kleo_framework' );
–> I translate it with WPML string editor but it has no effect on the French site
2. `if (ICL_LANGUAGE_CODE==’fr’) {
$error_msg = ‘Mauvais utilisateur ou mot de passe’;
}`
–> Looks like the if test is never true, even when on the French site.

I’m at a loss.

Cheers,
Marc

[Radu]

Hi,

If you try instead of if (ICL_LANGUAGE_CODE==’fr’) {}

this : if( get_locale() == ‘en_EN’ ) {}

It works ?

But you cannot translate ” ERROR: Invalid username” not “Wrong username or password. Please try again.” as you can see it uses a translate function __() having kleo_framework

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

So I tried 2 versions and still no success:

First with trying your suggestion, heres my code:

COPY CODE

if ( is_wp_error( $user_signon ) ) {
        $error_msg = $user_signon->get_error_message();
        if( get_locale() == 'fr_FR' ) {
            $error_msg = '<strong>ERREUR</strong>: Utilisateur ou mot de passe invalide.';
        }
        echo wp_json_encode( array(
            'loggedin' => false,
            'message'  => '<span class="wrong-response"><i class="icon icon-attention"></i> ' . $error_msg . '</span>',
        ) );
        //echo json_encode(array( 'loggedin' => false, 'message' => '<span class="wrong-response"><i class="icon icon-attention"></i> ' . __( 'Wrong username or password. Please try again.', 'kleo_framework' ) . '</span>' ));

No success, it stays in English.

Second attempt is with the old code from your function and WPML string translation:
echo json_encode(array( 'loggedin' => false, 'message' => '<span class="wrong-response"><i class="icon icon-attention"></i> ' . __( 'Wrong username or password. Please try again.', 'kleo_framework' ) . '</span>' ));

I found the exact string in WPML string translation, translated it… and still no success. The message stays in English no matter what I do.

What else do you suggest I try?

Cheers,
Marc

[Radu]

Hi,
Please follow those solutions https://wordpress.org/support/topic/how-do-i-translate-error-messageslogin/

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

This doesn’t work either.

I tried the most trivial test (from the code you suggested) and it doesn’t work:

COPY CODE

add_filter('login_errors','login_error_message');
function login_error_message($error){
    $error = "Test error message";
    return $error;
}

Cheers,
Marc

[Radu]

I see this is a wp thing, not a theme but you can try to add the priority parameter to the filter

So paste again the code with 999 value as priority value

COPY CODE

add_filter('login_errors','login_error_message', 999);
function login_error_message($error){
    $error = "Test error message";
    return $error;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

Actually it is a theme thing.
I tested those filters again and they work for wp-login. Where they don’t work is for Kleo’s ajax login pop-up which is multilingual. What I need is for the error message of this pop-up to also be multilingual.

If you guys don’t want to put it in the theme, that’s ok, I can customize function kleo_ajax_login() in my child theme. It’s just that every attempt I made a detecting the language from WPML or as you suggested with if( get_locale() == ‘en_EN’ ) {} didn’t work and the error message always come back in English.

Best,
Marc

[Radu]

Hi,

Please replace content of this file : /wp-content/themes/kleo/functions.php with this one : https://pastebin.com/raw/NfRdXjje

With that you will be able to use this function and filter to translate the error login message

COPY CODE

add_filter('login_errors','login_error_message', 999);
function login_error_message($error){
    $error = "Test error message";
    return $error;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

Great, thanks. I made a lot of progress with this. I can now customize the message and translate it with a filter in my child theme [by the way, the only way to detect language is through the referring URL as both get_locale() and ICL_LANGUAGE_CODE always bring the default site language].

Here’s the code if it can help someone:

COPY CODE

add_filter('login_errors','login_error_message');
function login_error_message($error){
    //check if that's the error you are looking for with the search string
    $pos = strpos($error, 'paramètres invalides');
    if (is_int($pos)) {
        $refer_url = explode('/', wp_get_referer() );
        $refer_lang = $refer_url[3];
        if ( strpos($refer_lang, 'en') !== false ) {
            $error = '<strong>ERROR</strong>: Invalid username. <a href="#kleo-lostpass-modal" class="kleo-show-lostpass kleo-other-action">Lost your password?</a>';
        } elseif ( strpos($refer_lang, 'fr') !== false ) {
            $error = '<strong>ERREUR</strong>: paramètres invalides. <a href="#kleo-lostpass-modal" class="kleo-show-lostpass kleo-other-action">Mot de passe oublié ?</a>';
        }
    }
    return $error;
}

Now I have 2 more issues with the kleo ajax login pop-up mechanism:

1. I set WPML to have show /fr/ in French and /en/ in English. I also switched the default language to French. Now the ajax login pop-up works everywhere on the site except from the home page. So If you go to https://www.arbolife.com/en/ and click on the login icon (top right), it opens wp-login.php which I want to avoid (can’t be translated). From any other page on the site, the kleo ajax pop-up works fine.

2. I changed the “lost password” link in the login error message (code above) to use the Kleo modal pop-up but it doesn’t work. My link looks like the other one with this: <a href="#kleo-lostpass-modal" class="kleo-show-lostpass kleo-other-action"> but clicking on it has no effect instead of switching to the kleo ajax lost password form. How to I make this link also switch. You can try if you try the ajax login from anywhere except the homepage and try to login with bogus information. Then the link shows up but doesn’t work

Cheers,
Marc

[arbolife]

Hi,

You can ignore request #1, it’s connected with my caching plugin. Will solve it on my own.

However, I still need to solve this one:

I changed the “lost password” link in the login error message (code above) to use the Kleo modal pop-up but it doesn’t work. My link looks like the other one with this: <a href="#kleo-lostpass-modal" class="kleo-show-lostpass kleo-other-action"> but clicking on it has no effect instead of switching to the kleo ajax lost password form. How to I make this link also switch. You can try if you try the ajax login from anywhere except the homepage and try to login with bogus information. Then the link shows up but doesn’t work.

Thanks,
Marc

[Radu]

Hi

Now it works on your site just I’ve tested

If you have modified page by adding

COPY CODE

<a href="#kleo-lostpass-modal">

live from browser console the html markup this will not works because the page should be reloaded, the JS should be re-initialized

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

Sorry, but it actually doesn’t work, that’s why I have this ticket still open.

How to reproduce:
1. Go to https://www.arbolife.com/en/
2. Click on the arrow next to the flag in the menu
3. try to login with fake credential from the kleo ajax pop-up
4. on the error message that gets loaded ( ERROR: Invalid username. Lost your password? ), click on “Lost your password link” that points to <a href="#kleo-lostpass-modal">.
5. Nothing happens, the ajax doesn’t switch
6. The same link below works fine.

How can I get the error message link to trigger the js script that will switch the form ?

Thanks,
Marc

[Radu]

Hi,

Please replace this file content: /wp-content/themes/kleo/assets/js/app.js with this one: https://pastebin.com/raw/1e4r21D1

You should enable development mode to can use un-minified version of app.js from wp-admin -> theme options -> miscellaneous

This will be fixed in next theme update

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

Thanks, now it works perfectly.

Cheers,
Marc

[Radu]

You’re welcome

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

I updated to 4.2.1 and the fix isn’t in the new release. Can you please provide the file content for 4.2.1 ?

Cheers,
Marc

[Radu]

IT works now on your site, and also on my local install using latest version.

Try to re-upload the theme files over the existing one by overwritten

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

Hi Radu,

I hadn’t rolled out 4.2.1 to my live site yet, so your testing it didn’t prove much 🙂

I confirm it doesn’t work in the release 4.2.1 and 4.2.1.1, even with overwriting the files from a fresh download.

I looked into this to prove why it wasn’t working and found that there’s a line with kleoPage.lostPassMagnific(); is misplaced in app.js.

It has to be moved from line 2471 to line 2438, and then it works. This is how you had it in the app.js code you sent me on April 4th.

Can you please confirm this will be fixed in the next theme update so the changes on my side won’t be erased again ?

Cheers,
Marc

[Radu]

Hi,

Sorry for that

Yes, you right there was a mistake in the code, it was placed somewhere else.

In the next version this will be included for sure !!!

Best Regards

R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[arbolife]

OK, thanks Radu.

[Radu]

No problem

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts