How To Remove The Login Shake Effect in WordPress

Last updated on
Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on email
Email
In the past, I’ve walk you through different ways how to secure your WordPress login page. And one of those methods was to hide or modify the login error message.
In this post, I will teach you how you can remove the WordPress login shake effect.

What Is WordPress Login Shake Effect

The login shake feature is a JavaScript file that WordPress adds on every login page.
You’ve probably noticed that, when logging in to WordPress, if your username or password is incorrect, the login form kind of shakes back and forth.
Below is the code that outputs the JavaScript to handle the form shaking on the login page. You can find the code somewhere on line 65 of the wp-login.php file.
				
					if ( $shake_error_codes && $wp_error->has_errors() && in_array( $wp_error->get_error_code(), $shake_error_codes, true ) ) {
	add_action( 'login_footer', 'wp_shake_js', 12 );
}

				
			
Here, we’ve got this add-action and a hook called login_footer and then hooked to that is a function called wp_shake_js.
Moving forward, and if you search wp-shake-js function you’ll find this code on line 344.
				
					function wp_shake_js() {
	?>
	<script type="text/javascript">
	document.querySelector('form').classList.add('shake');
	</script>
	<?php
}
				
			
This is the code that actually fires up when an erroneous login occurred.
I find this annoying. Thankfully, WordPress gives us a way to make it stop. All we need to do is add back some action to this hook.
Please note that this feature is just aesthetic decision. You might find this irrelevant but for others don’t. So this should be made completely based on your personal preference.
Alright. Let’s keep going.

How to Remove Login Shake Effect

All you need to do is get rid of those JavaScript mentioned above.
We just need to add this code to your theme’s functions.php file or in a site-specific plugin
				
					add_action( 'login_footer', 'wpms_remove_login_shake' );
function wpms_remove_login_shake() {
	remove_action( 'login_footer', 'wp_shake_js', 12 );
}
				
			
Using the following snippet will let you remove the login shake effect when error occurs.
Basically what the code means is that, it unhook the function wp_shake_js from ever happening by adding the remove_action hook. As you can see highlighted on line 3
				
					remove_action( 'login_footer', 'wp_shake_js', 12 )
				
			
Now, to be able to make this remove action hook work, we need to execute this hook back to our login_footer.
And of course the function I want to hook to that is this wpms_remove_login_shake.
Once, that done. Save your changes.
So now if you go back to your website login page, and if you have an incorrect username or password there, you can see that the shake was actually removed.

Frequently Asked Question on WordPress Login Shake Effect

I already added the above code but why it’s still shaking. Do you have any ideas how I could figure out the reason?
The reason being is that, you might be using an older version of WordPress. So, instead of using the login_footer, replace it with login_head.
If you’re WordPress version is earlier than 5.4, shall we say 5.3 and below this code don’t work. Use the login_head instead as you can see below.
				
					add_action( 'login_head', 'wpms_remove_login_shake' );
function wpms_remove_login_shake() {
	remove_action( 'login_head', 'wp_shake_js', 12 );
}
				
			
So that’s it. At this point, we’ve added a very simple code snippet showing you how to customize your login page by removing the login shake effect of your WordPress website using some action hooks.
If you liked this article, then please subscribe to my YouTube Channel for WordPress video tutorials. You can also find me on LinkedIn, Facebook, and Twitter.
Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on email
Email
Our Most Popular Post Right Now!
Disclosure: Some of the links on this site are “affiliate links”, which allow me to earn a small referral payment if you choose to purchase the product or service.

2 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Blog via Email
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
This field is for validation purposes and should be left unchanged.

Don’t worry, we hate spam as much as you do.
Do you need help setting up WordPress?
I can help you with blog and site setup, full website build, performance & security, maintenance and support, and many more.