I would like to create my own reset password form and page, I mean this page:
I have already created a page template for the reset password form, the code:

<?php
/*
 * Template Name: Page - Reset Password
 */
if( !is_user_logged_in() ) {
    wp_redirect( site_url( 'login' ) );
}
get_header();
?>

<div id="content" class="content-area" role="main">
    <div class="forms-wrapper">
        <div class="form-reset-password-wrapper">
            <h1>Reset your password</h1>
            <form id="form-reset-password" name="resetpassform" class="form-reset-password" action="<?php echo site_url( '/wp-login.php?action=resetpass', 'https' ); ?>" method="post" autocomplete="off">
                <input type="hidden" id="user_login" value="<?php echo $_GET['login']; ?>" autocomplete="off">
                <p class="form-row">
                    <label for="user_pass">New password
                    <input type="password" name="user_pass" id="user_pass">
                </p>
                <p class="form-row">
                    <label for="user_pass_confirm">Confirm new password
                    <input type="password" name="user_pass_confirm" id="user_pass_confirm">
                </p>
                <p class="reset-password-submit">
                    <input type="submit" id="reset-password-btn" class="reset-password-btn" value="Submit"/>
                </p>
                <div class="form-reset-password-errors"></div>
            </form>
        </div>
    </div>
</div>

<?php get_footer(); ?>

This is how it looks:

On form submit I fire a function using Ajax to validate these passwords and change them if everything goes well, so far so good.

How do people get to see this page? basically there is the request a password reset using email address form that looks like this:

After the email is received the user can click on a link that looks similar to this:

.php?action=rp&key=tkFUnvcJmhu30nRxqjpt&login=example%gmail

Now, in functions PHP I used this function to redirect users to my custom page with the $_GET variables but it's not working, I need your help please! here is the code:

/*
 * Redirect to custom reset password page
 */
function override_reset_password_form_redirect() {
    $action = isset( $_GET['action'] ) ? $_GET['action'] : '';
    $key = isset( $_GET['key'] ) ? $_GET['key'] : '';
    $login = isset( $_GET['login'] ) ? $_GET['login'] : '';

    if ( 'wp-login.php' === $GLOBALS['pagenow'] && ( 'rp' == $action  || 'resetpass' == $action ) ) {
        wp_redirect( site_url( '/reset-password/' ) . '?key=' . $key . '&login=' . $login );
        exit;
    }
}
add_action( 'init', 'override_reset_password_form_redirect' );

I would like to create my own reset password form and page, I mean this page:
I have already created a page template for the reset password form, the code:

<?php
/*
 * Template Name: Page - Reset Password
 */
if( !is_user_logged_in() ) {
    wp_redirect( site_url( 'login' ) );
}
get_header();
?>

<div id="content" class="content-area" role="main">
    <div class="forms-wrapper">
        <div class="form-reset-password-wrapper">
            <h1>Reset your password</h1>
            <form id="form-reset-password" name="resetpassform" class="form-reset-password" action="<?php echo site_url( '/wp-login.php?action=resetpass', 'https' ); ?>" method="post" autocomplete="off">
                <input type="hidden" id="user_login" value="<?php echo $_GET['login']; ?>" autocomplete="off">
                <p class="form-row">
                    <label for="user_pass">New password
                    <input type="password" name="user_pass" id="user_pass">
                </p>
                <p class="form-row">
                    <label for="user_pass_confirm">Confirm new password
                    <input type="password" name="user_pass_confirm" id="user_pass_confirm">
                </p>
                <p class="reset-password-submit">
                    <input type="submit" id="reset-password-btn" class="reset-password-btn" value="Submit"/>
                </p>
                <div class="form-reset-password-errors"></div>
            </form>
        </div>
    </div>
</div>

<?php get_footer(); ?>

This is how it looks:

On form submit I fire a function using Ajax to validate these passwords and change them if everything goes well, so far so good.

How do people get to see this page? basically there is the request a password reset using email address form that looks like this:

After the email is received the user can click on a link that looks similar to this:

https://example/wp-login.php?action=rp&key=tkFUnvcJmhu30nRxqjpt&login=example%gmail

Now, in functions PHP I used this function to redirect users to my custom page with the $_GET variables but it's not working, I need your help please! here is the code:

/*
 * Redirect to custom reset password page
 */
function override_reset_password_form_redirect() {
    $action = isset( $_GET['action'] ) ? $_GET['action'] : '';
    $key = isset( $_GET['key'] ) ? $_GET['key'] : '';
    $login = isset( $_GET['login'] ) ? $_GET['login'] : '';

    if ( 'wp-login.php' === $GLOBALS['pagenow'] && ( 'rp' == $action  || 'resetpass' == $action ) ) {
        wp_redirect( site_url( '/reset-password/' ) . '?key=' . $key . '&login=' . $login );
        exit;
    }
}
add_action( 'init', 'override_reset_password_form_redirect' );

• forms
• password
• reset

• Is init called on the password reset form? That seems like a security risk to me. – Josh Commented Nov 15, 2018 at 18:11

1 Answer 1

You can add the following to your functions.php to achieve what you are after. The action init doesn't seem to fire in time for what you are looking for.

if($_GET['action']==='rp' && strpos($_SERVER['REQUEST_URI'],'wp-login.php')) {
    $key = isset( $_GET['key'] ) ? $_GET['key'] : '';
    $login = isset( $_GET['login'] ) ? $_GET['login'] : '';
    wp_redirect( site_url( '/reset-password/' ) . '?key=' . $key . '&login=' . $login );
    exit;
}