Error message on incorrect login attempt using wp_login_form

1 Views

So i’m using wp_login_form to allow users to login on the fron-end of my website. I use wp_login_form in a widget which allows PHP code.

( i do this because my login form is sliding down when you click the login
button. )

Read More

The entire login function works fine but i was wondering how to display an (custom) error message when you input incorrect information. Currently you get redirected to the home page. Getting redirected is fine but i want the users to know what they did wrong.

A screenshot is below, so is the code.

Sliding PHP code 

<?php 
$args = array(
        'redirect'       => site_url( $_SERVER['REQUEST_URI'] ), 
        'form_id'        => 'loginform',
        'label_username' => __( 'GEBRUIKERSNAAM' ),
        'label_password' => __( 'WACHTWOORD' ),
        'label_log_in'   => __( 'Log In' ),
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_submit'      => 'wp-submit',
        'value_username' => NULL,
);

add_action( 'wp_login_failed', 'pippin_login_fail' );
// hook failed login
function pippin_login_fail( $username ) {
     $referrer = $_SERVER['HTTP_REFERER'];  
// where did the post submission come from?
     // if there's a valid referrer, and it's not the default log-in screen
     if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
echo"U heeft verkeerde gegevens ingevuld.";
        wp_redirect(home_url() . '/?login=failed' );
echo"U heeft verkeerde gegevens ingevuld.";
  // let's append some information (login=failed) to the URL for the theme to use
          exit;
     }
}



add_action( 'login_form_middle', 'add_lost_password_link' );
function add_lost_password_link() {
    return '<a href="/wp-login.php?action=lostpassword">Wachtwoord vergeten?</a>';
}

wp_login_form($args); 

?>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Use following shortcode to put custom login box.

    Shortcode : [custom-login-box]

    Put following code in your functions.php file. 

    /*
 * Shortcode for 'Custom Login Box'
 */

function custom_login_box_shortcode() {
   ob_start();
   $login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;
   if ($login === "failed") {
        echo '<p class="error"><strong>ERROR:</strong> Invalid username and/or password.</p><br><br>';
    } elseif ($login === "empty") {
        echo '<p class="error"><strong>ERROR:</strong> Username and/or Password is empty.</p><br><br>';
    } elseif ($login === "false") {
        echo '<p class="success"> You are logged out now.</p><br><br>';
    }    
   wp_login_form();
   return ob_get_clean();   
} 
add_shortcode( 'custom-login-box', 'custom_login_box_shortcode' );

/*
 * Following 3 functions used to show login error message in same page
 */

function redirect_login_page() {
    $login_page = get_home_url();
    $page_viewed = basename($_SERVER['REQUEST_URI']);

    if ($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init', 'redirect_login_page');

function login_failed() {
    $login_page = get_home_url();
    wp_redirect($login_page . '?login=failed');
    exit;
}
add_action('wp_login_failed', 'login_failed');

function verify_username_password($user, $username, $password) {
    $login_page = get_home_url();
    if ($username == "" || $password == "") {
        wp_redirect($login_page . "?login=empty");
        exit;
    }
}
add_filter('authenticate', 'verify_username_password', 1, 3);

  2. Have you looked at the filter 'login_errors'? I’ve not tried it but it seems to me that you should be able to create a function in your functions.php that looks at what the errors message currently is and change it to be whatever you want it to be. The error message should then be displayed in the next login form displayed. If I understand your flow correctly, that would be after they are redirected to the home page and then they dropped down the login box again.

    HTH,

    =C=