How to create a WordPress Login Page with error checking with Elementor Pro!

Login Form

Elementor is a wonderful plugin, but as with any software under continued development (and what isn’t?), it does have a few shortcomings. The login form widget is no exception. It’s beautiful and easy to customize. Adding a custom login form element is an easy way to make a custom frontend for your users. However, it does have one fatal flaw: when you try to log in and fail, it redirects users to the unprofessional-looking default WordPress login page. Ouch.

Don’t worry, there’s an easy way around this! Just add the following code to your functions.php file. This will redirect the user back to the login page. It will also add a “$_GET” parameter (added to the end of the login page URL) that will let the page know that the login has failed. $_GET[‘login’] will equal “failed”. That way, if this variable equals “failed”, we can display a message. Here’s a tutorial on how to use $_GET and $_POST variables. It’s actually extremely easy.

  1. // Redirect the user back to the login page after the login failed, and add a $_GET parameter to let us know. Courtesy of WordPressFlow.com
  2. add_action( 'wp_login_failed', 'elementor_form_login_fail', 9999999 );
  3. function elementor_form_login_fail( $username ) {
  4. $referrer = $_SERVER['HTTP_REFERER']; // where did the post submission come from?
  5. // if there's a valid referrer, and it's not the default log-in screen
  6. if ((!empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') )) {
  7. //redirect back to the referrer page, appending the login=failed parameter and removing any previous query strings
  8. //maybe could be smarter here and parse/rebuild the query strings from the referrer if they are important
  9. wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' );
  10. exit;
  11. }
  12. }
  13. // This is also important. Make sure that the redirect still runs if the username and/or password are empty.
  14. add_action( 'wp_authenticate', 'elementor_form_login_empty', 1, 2 );
  15. function elementor_form_login_empty( $username, $pwd ) {
  16. $referrer = $_SERVER['HTTP_REFERER']; // where did the post submission come from?
  17. if ( empty( $username ) || empty( $pwd ) ) {
  18. if ((!strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') )) {
  19. //redirect back to the referrer page, appending the login=failed parameter and removing any previous query strings
  20. //maybe could be smarter here and parse/rebuild the query strings from the referrer if they are important
  21. wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' );
  22. exit;
  23. }
  24. exit();
  25. }
  26. }

Next, add a shortcode widget above your form and add. We’ll build out that shortcode to display the message on login fail.

Elementor Login

Once we’ve added that shortcode, we need to add more code to the Functions file. This code does a few things. First, it checks to see if $_GET[‘login’] equals “failed”. So basically, it’s checking to see if the user tried and failed to log in. If so, it displays a message. I’ve added the message in HTML with inline CSS (not considered best practice), since I simply want this widget to be portable. You can build out any HTML you want inside the “echo”!

  1. function generate_login_fail_messaging(){
  2. ob_start();
  3. if($_GET['login'] == 'failed'){
  4. echo '<div class="message_login_fail" style="background-color: #ca5151;color: #ffffff;display: block;margin-bottom: 20px;text-align: center;padding: 9px 15px; width: fit-content;margin: 0 auto;"><span style="color: #ca5151;background-color: #fff;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;font-weight: 900;border-radius: 50%;margin-right: 10px;">!</span>Oops! Looks like you have entered the wrong username or password. Please check your login details and try again.</div>';
  5. }
  6. $return_string = ob_get_contents();
  7. ob_end_clean();
  8. return $return_string;
  9. }
  10. add_shortcode('login_fail_messaging', 'generate_login_fail_messaging');
Elementor Login 2

CONTENT BY WORDPRESSFLO

Share on facebook
Share on whatsapp
Share on twitter
Share on linkedin