Change WP “Log In” Button Text On Click

You can change the text of the button with a hook:

add_action('login_form', 'wpse17709_login_form');
    function wpse17709_login_form()
    {
      add_filter('gettext', 'wpse17709_gettext', 10, 2);
    }

    function wpse17709_gettext($translation, $text)
    {
      if ('Log In' == $text) {
        return 'My New Button Text';
      }
      return $translation;
    }

Found here: https://wordpress.stackexchange.com/questions/110659/how-to-change-wordpress-log-in-text

Works for me on a test-system.

In the same way you can adjust the other texts.

If you use a language other than English, you could also use the Loco Translate plugin to change the texts: https://www.ads-software.com/plugins/loco-translate/

Hi @threadi,

Thank you for your assistance.

Yes, aware of that filter but does not solve what I need.

To clarify, not looking to change the buttons’ text upfront. I’m looking for a code that will change the text when I click the button by adding an “onclick = function()” to the affected HTML element.

So,for example, when I click the button “Log In” the button text changes momentarily to “Processing…” until the login step is completed. Does that make more sense?

If you know a way to do this, that would be great.

Again, thank you.

Therefor I think you have to develop a custom login page. The original login-page is not more customizable thought. Here is an howto for this:
https://www.hongkiat.com/blog/wordpress-custom-loginpage/

Alternative you can choose one of dozens of plugins which customize the login-page, some are listed and described here: https://www.wpbeginner.com/plugins/how-to-create-custom-login-page-for-wordpress/
One example: https://de.www.ads-software.com/plugins/login-customizer/

@threadi,

Thanks again. I checked the URLs you provided. None of them provide what I’m looking for.

We already have a custom login page that retains WordPress’ original backend codes.

The only way I believe we can make this happen is with a special hook or filter from WordPress and/or using Javascript/JQuery as noted here (by the way, none of the codes provided in the link worked for us, unless we missed something)

The HTML for the “Log In” button is:

<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />

I’m trying to modify it to look like this: (notice the onclick=change() parameter)

<input onclick="change()" type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />

If you know of someone that can provide the hook, filter, and/or code that will add the onclick=change() parameter to the HTML entry, I can handle the rest.

Cheers!

As onclick is a JavaScript-event you should not add it as attribute in HTML. Just set it via jQuery. The following code I tested for you:

Add in your functions.php:

add_action( 'login_enqueue_scripts', 'yourplugin_enqueue_js' );
function yourplugin_enqueue_js() {
 wp_enqueue_script(
            'test',
            plugins_url('/js.js', __FILE__),
            ['jquery'],
            '1.0.0',
            true
        );
}

Create a file js.js in your plugins directory with following content:

(function($){
    $(function() {
        $("#wp-submit").on('click', function() {
            $(this).val("Processing ..");
        });
    });
})(jQuery);

There you can also manipulate any other content of the login-page via jQuery.

• This reply was modified 2 years, 9 months ago by threadi.
• This reply was modified 2 years, 9 months ago by threadi.
• This reply was modified 2 years, 9 months ago by threadi.

Hi @threadi,

Can’t thank you enough for your time and effort.

I followed EXACTLY what you provided. Unfortunately, it did not work.

To ensure nothing interfered with your codes, I disabled all plugins except our theme’s core plugin, and also cleared all cache.

Also, I tested your js.js file code with both “#wp-submit” and “wp-submit”. Still, not working.

These are the affected file paths that I modified (per your instructions):

First Part of Your Instruction: public_html/wp-includes/functions.php

Second Part of Your Instruction: public_html/wp-content/plugins/js.js

You said you tested your code and it worked, correct? Also, what is the meaning of the array (or parameter) ‘test’ noted in your functions.php snippet provided above?

Hopefully, one more iteration and we’ll get there ??

Thank you!

You edited the wrong files. With functions.php I meant the functions.php of your Child-theme. If you are working with plugins than you have to add the codes above in the main file of your plugin. If your plugin is called “change-login-button” it has to be here: public_html/wp-content/plugin/change-login-button/change-login-button.php

The file js.js has to be under public_html/wp-content/plugin/change-login-button/js.js

I suspect the code was not loaded because you assigned it to the wrong file. I assumed until now that you are already familiar with plugin development based on your previous descriptions. If you want to know more about it, have a look at the manual: https://developer.www.ads-software.com/plugins/

@threadi,

Your story changed ??

I’m not using nor working with a custom plugin for this particular issue. The affected HTML code is contained in the /wp-admin folder of my site directory.

I have the plugin, Code Snippets, installed which allows me to add any php code to our functions.php file (should take care of part I of your instructions). For Part II, the js.js file — most likely — will need to be located somewhere else (not in our plugins directory). Not sure where.

We’ll keep researching this and/or wait for an alternate solution.

Much appreciated.

Now I understand the context. I have put together the following code in Code Snippet which also works successfully for me. You don’t have to drop a file to do this:

add_action( 'login_enqueue_scripts', 'yourplugin_enqueue_js' );
function yourplugin_enqueue_js() {
	wp_register_script( 'test-handle', '', array("jquery"), '', true );
	wp_enqueue_script( 'test-handle' );
	wp_add_inline_script( 'test-handle', '(function($){$("#loginform input#wp-submit").on("click", function() {$(this).val("Processing ..");});})(jQuery);');
}

The solution for this is the function to insert inline script: https://developer.www.ads-software.com/reference/functions/wp_add_inline_script/

I made an additional protection in the jQuery so that only the button in the login form is hit. This is imho necessary because this script is executed via code snippet in the whole frontend.

Hi @threadi,

You did it! It worked. Thank you so much.

Based on your code snippet, I created code snippets to cover WordPress’ login, registration, and lost password buttons. See below.

Note: Your code snippet works great as long as Wordfence (security plugin) is not activated. When Wordfence is activated, the login form button “Log In” changes to “Processing…” when it’s clicked but does not revert back to “Log In” if login errors are detected or error messages are displayed. It just hangs. The same happens — to some degree — for the “Get New Password” (lost password) button. If you care to challenge yourself even more, a fix for this would be icing on the cake.

In short, your code works great.

Danke sehr. Ich schulde dir ein bier.

Auf wiedersehen!

—————–

Code Snippet for “Log In” Button:

add_action( 'login_enqueue_scripts', 'login_enqueue_js' );
function login_enqueue_js() {
	wp_register_script( 'test-handle', '', array("jquery"), '', true );
	wp_enqueue_script( 'test-handle' );
	wp_add_inline_script( 'test-handle', '(function($){$("#loginform input#wp-submit").on("click", function() {$(this).val("Processing...");});})(jQuery);');
}

Code Snippet for “Register” Button:

add_action( 'login_enqueue_scripts', 'register_enqueue_js' );
function register_enqueue_js() {
	wp_register_script( 'test-handle', '', array("jquery"), '', true );
	wp_enqueue_script( 'test-handle' );
	wp_add_inline_script( 'test-handle', '(function($){$("#registerform input#wp-submit").on("click", function() {$(this).val("Processing...");});})(jQuery);');
}

Code Snippet for “Get New Password” Button:

add_action( 'login_enqueue_scripts', 'password_enqueue_js' );
function password_enqueue_js() {
	wp_register_script( 'test-handle', '', array("jquery"), '', true );
	wp_enqueue_script( 'test-handle' );
	wp_add_inline_script( 'test-handle', '(function($){$("#lostpasswordform input#wp-submit").on("click", function() {$(this).val("Processing...");});})(jQuery);');
}

Unfortunately, I cannot reproduce the problem you describe with Wordfence. I have activated Wordfence for testing without any further customized configuration. The button always changes back to “Login” no matter what error I cause during login.

If you need further support, my advice would be to find someone who can support you as a developer. You can do that for example here: https://jobs.wordpress.net

Hi @threadi,

Again, thanks for your assistance.

To reproduce the issue, perform the following (confirmed at my end):

(1) Install and activate the above code snippets.
(2) Install and activate Wordfence.
(3) After activating Wordfence, enable Brute Force Protection (all options)
(4) Visit your website login page and leave the Username and Password fields blank.
(5) Click the “Log In” button.
(6) After clicking on “Log In” button, your button text should switch to “Processing…” followed by a Wordfence-generated error message at the top that says:
ERROR: A username and password must be provided. Lost your password?
(7) Issue (caused by Wordfence): The button text “Processing…” does not revert back to “Log In” after the Wordfence-generated error message is displayed.

Notes:

(1) The above does not occur with the “Register” nor “Get New Password” buttons.
(2) Deactivating Wordfence fixes the above.

Hope the above helps. I’ll continue to work at my end to see if there’s a way to disable the Wordfence-generated Log In error messages and use, instead, the native WordPress error messages (which may fix the above).

Cheers!

Sorry, I cannot reproduce it with the given steps. If you can’t get it working with Wordfence I would advice again to search for a developer who could help you with that.

Hi @threadi,

No worries. Eventually, it will be fixed.

One last favor … if you don’t mind … can you share a video grab of your login form displaying both the Error Messages and your login button text switching from “Processing…” to “Log In”?

Loom works great for quick video grabs.

Thank you!