Completion page template

Overview

The completion page template (lost_password_reset_complete.php) is the final stage of the password reset workflow. This simple template displays a success message and provides a link to the login page after a user successfully changes their password.

File location: templates/lost_password_reset_complete.php

Stage: 3 (Completion)

When displayed: After user successfully submits new password. The URL contains som_password_reset=true parameter.

Template structure

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<div id="password-lost-form-wrap">
    <div id="password-reset-complete">
        <h3><?php echo $form_title; ?></h3>
        
        <p class="som-password-sent-message">
            <?php echo $success_text; ?>
        </p>
        
        <p>
            <a href="<?php echo esc_url( $login_url ); ?>">
                <?php echo $login_text; ?>
            </a>
        </p>
    </div>
</div>

This is the simplest of the three templates, containing only static content with no form elements or JavaScript.

Available variables

The template receives these variables from the plugin:

`$form_title`

Type: String

Source: General settings (somfrp_form_title)

Default: "Reset Password"

Purpose: Heading displayed at the top of the page

Usage: <h3><?php echo $form_title; ?></h3>

`$success_text`

Type: String (HTML allowed)

Source: General settings (somfrp_success_message)

Default: "Your password has been reset successfully."

Purpose: Success message confirming password was changed

Usage: <p><?php echo $success_text; ?></p>

`$login_url`

Type: String (URL)

Source: General settings (somfrp_login_page) or wp_login_url()

Purpose: URL to login page where user can sign in with new password

Usage: <a href="<?php echo esc_url( $login_url ); ?>">

Note: If no login page is set in settings, defaults to WordPress default login URL.

`$login_text`

Type: String

Source: General settings (somfrp_login_link_text)

Default: "Click here to login"

Purpose: Text for the login link

Usage: <a href="..."><?php echo $login_text; ?></a>

Template elements

Main wrapper

ID: #password-lost-form-wrap

Purpose: Consistent wrapper used across all three templates

Completion container

ID: #password-reset-complete

Purpose: Container for success message and login link

Success message

Class: .som-password-sent-message

Purpose: Displays success confirmation

Note: Uses same class as email confirmation message in lost password form for consistent styling

Element: <a> tag

Purpose: Directs user to login page

Attributes: Uses esc_url() for security

CSS classes and IDs

Main wrapper

ID: #password-lost-form-wrap

Purpose: Container for entire completion page

Completion container

ID: #password-reset-complete

Purpose: Inner container for success content

Success message

Class: .som-password-sent-message

Purpose: Success message styling (shared with other templates)

Heading

Element: <h3>

Purpose: Page title (form title from settings)

User flow to completion page

User submits new password: On reset password form
Plugin validates password: Server-side validation passes
Plugin updates password: Calls reset_password() to update user
Plugin redirects: Redirects to same page with som_password_reset=true parameter
Template loads: Completion page displays success message
User clicks login link: Navigates to login page
User logs in: Uses new password to access account

Customization examples

Add automatic redirect

Automatically redirect to login page after 5 seconds:

<div id="password-reset-complete">
    <h3><?php echo $form_title; ?></h3>
    
    <p class="som-password-sent-message">
        <?php echo $success_text; ?>
    </p>
    
    <p>
        <a href="<?php echo esc_url( $login_url ); ?>" id="login-link">
            <?php echo $login_text; ?>
        </a>
    </p>
    
    <p class="redirect-notice">
        <?php esc_html_e( 'Redirecting to login page in 5 seconds...', 'your-theme' ); ?>
    </p>
</div>

<script>
setTimeout(function() {
    window.location.href = '<?php echo esc_js( $login_url ); ?>';
}, 5000);
</script>

Add countdown timer

Display countdown before redirect:

<p class="redirect-notice">
    <?php esc_html_e( 'Redirecting to login page in', 'your-theme' ); ?>
    <span id="countdown">5</span>
    <?php esc_html_e( 'seconds...', 'your-theme' ); ?>
</p>

<script>
let seconds = 5;
const countdownEl = document.getElementById('countdown');

const interval = setInterval(function() {
    seconds--;
    countdownEl.textContent = seconds;
    
    if (seconds <= 0) {
        clearInterval(interval);
        window.location.href = '<?php echo esc_js( $login_url ); ?>';
    }
}, 1000);
</script>

Add success icon

Include visual confirmation:

<div id="password-reset-complete" class="text-center">
    <div class="success-icon">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="#4CAF50" stroke-width="2"/>
            <path d="M8 12l2 2 4-4" stroke="#4CAF50" stroke-width="2"/>
        </svg>
    </div>
    
    <h3><?php echo $form_title; ?></h3>
    
    <p class="som-password-sent-message">
        <?php echo $success_text; ?>
    </p>
    
    <p>
        <a href="<?php echo esc_url( $login_url ); ?>" class="btn btn-primary">
            <?php echo $login_text; ?>
        </a>
    </p>
</div>

Add additional help links

Provide more navigation options:

<div id="password-reset-complete">
    <h3><?php echo $form_title; ?></h3>
    
    <p class="som-password-sent-message">
        <?php echo $success_text; ?>
    </p>
    
    <div class="action-links">
        <p>
            <a href="<?php echo esc_url( $login_url ); ?>" class="primary-link">
                <?php echo $login_text; ?>
            </a>
        </p>
        
        <p>
            <a href="<?php echo esc_url( home_url() ); ?>">
                <?php esc_html_e( 'Return to homepage', 'your-theme' ); ?>
            </a>
        </p>
        
        <p>
            <a href="<?php echo esc_url( home_url( '/support' ) ); ?>">
                <?php esc_html_e( 'Need help? Contact support', 'your-theme' ); ?>
            </a>
        </p>
    </div>
</div>

Customize for membership site

Add member-specific messaging:

<div id="password-reset-complete" class="membership-success">
    <h3><?php esc_html_e( 'Welcome Back!', 'your-theme' ); ?></h3>
    
    <p class="som-password-sent-message">
        <?php echo $success_text; ?>
    </p>
    
    <p>
        <?php esc_html_e( 'Your account is secure and ready to use.', 'your-theme' ); ?>
    </p>
    
    <div class="next-steps">
        <h4><?php esc_html_e( 'What would you like to do?', 'your-theme' ); ?></h4>
        <ul>
            <li>
                <a href="<?php echo esc_url( $login_url ); ?>">
                    <?php esc_html_e( 'Log in to your account', 'your-theme' ); ?>
                </a>
            </li>
            <li>
                <a href="<?php echo esc_url( home_url( '/dashboard' ) ); ?>">
                    <?php esc_html_e( 'View your dashboard', 'your-theme' ); ?>
                </a>
            </li>
            <li>
                <a href="<?php echo esc_url( home_url( '/courses' ) ); ?>">
                    <?php esc_html_e( 'Browse courses', 'your-theme' ); ?>
                </a>
            </li>
        </ul>
    </div>
</div>

Common issues

Problem: Success page displays, but user can't log in with new password.

Causes:

Password wasn't actually updated in database
User is trying to log in with old password
Caching issue showing old login state

Solution: Check WordPress debug log for errors during password update. Verify user is using the NEW password. Clear all caches.

Success message doesn't display

Problem: Page loads but success message is blank.

Causes:

$success_text variable not set
CSS hiding the message
Template override missing variable output

Solution: Verify $success_text is output in template. Check CSS isn't hiding .som-password-sent-message. Compare to plugin default template.

Problem: Login link redirects to unexpected location.

Causes:

Wrong login page set in General settings
Theme or plugin filtering login URL
Custom login page not configured correctly

Solution: Check General settings for login page assignment. Verify the page exists and is published. Test with default WordPress login URL.

Page shows after failed password reset

Problem: Completion page displays even though password wasn't changed.

Causes:

URL parameter manually added
Redirect logic error
Caching showing old page state

Solution: This shouldn't happen with normal plugin flow. Check for custom code modifying the redirect. Clear all caches.

Accessibility considerations

Semantic HTML

Use proper heading hierarchy:

<div id="password-reset-complete">
    <h2><?php echo $form_title; ?></h2>
    <!-- Use h2 if this is the main page heading -->
</div>

ARIA live region

Announce success to screen readers:

<div role="status" aria-live="polite">
    <p class="som-password-sent-message">
        <?php echo $success_text; ?>
    </p>
</div>

Focus management

Set focus to success message for screen readers:

<div id="password-reset-complete">
    <h3 id="success-heading" tabindex="-1">
        <?php echo $form_title; ?>
    </h3>
    <!-- ... -->
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('success-heading').focus();
});
</script>

Link accessibility

Ensure login link is descriptive:

<a href="<?php echo esc_url( $login_url ); ?>" 
   aria-label="<?php esc_attr_e( 'Log in to your account with your new password', 'frontend-reset-password' ); ?>">
    <?php echo $login_text; ?>
</a>

Security best practices

Always escape output

// Good
<?php echo esc_html( $form_title ); ?>
<?php echo esc_url( $login_url ); ?>

// Bad
<?php echo $form_title; ?>
<?php echo $login_url; ?>

Validate URL parameters

If you add custom logic based on URL parameters, validate them:

<?php
if ( isset( $_GET['som_password_reset'] ) && $_GET['som_password_reset'] === 'true' ) {
    // Display success message
}
?>

Don't expose sensitive information

Don't display username, email, or other sensitive data on success page:

// Bad - exposes username
<p>Password reset successful for user: <?php echo $username; ?></p>

// Good - generic message
<p><?php echo $success_text; ?></p>

Testing checklist

After customizing this template:

Integration with other systems

WooCommerce

Redirect to My Account page instead of login:

<?php
$login_url = function_exists( 'wc_get_page_permalink' ) 
    ? wc_get_page_permalink( 'myaccount' ) 
    : $login_url;
?>

BuddyPress / BuddyBoss

Redirect to member profile:

<?php
if ( function_exists( 'bp_loggedin_user_domain' ) ) {
    $login_url = bp_loggedin_user_domain();
}
?>

Custom membership plugins

Integrate with your membership system:

<?php
// Example: Redirect to member dashboard
if ( function_exists( 'your_membership_dashboard_url' ) ) {
    $login_url = your_membership_dashboard_url();
}
?>

What's next

Templates overview - Overview of all three templates
General settings - Customize success message and login link
Template overrides guide - Create custom templates

Overview​

Template structure​

Available variables​

$form_title​

$success_text​

$login_url​

$login_text​

Template elements​

Main wrapper​

Completion container​

Success message​

Login link​

CSS classes and IDs​

Main wrapper​

Completion container​

Success message​

Heading​

User flow to completion page​

Customization examples​

Add automatic redirect​

Add countdown timer​

Add success icon​

Add additional help links​

Customize for membership site​

Common issues​

Page displays but user can't login​

Success message doesn't display​

Login link goes to wrong page​

Page shows after failed password reset​

Accessibility considerations​

Semantic HTML​

ARIA live region​

Focus management​

Link accessibility​

Security best practices​

Always escape output​

Validate URL parameters​

Don't expose sensitive information​

Testing checklist​

Integration with other systems​

WooCommerce​

BuddyPress / BuddyBoss​

Custom membership plugins​

What's next​

Overview

Template structure

Available variables

`$form_title`

`$success_text`

`$login_url`

`$login_text`

Template elements

Main wrapper

Completion container

Success message

Login link

CSS classes and IDs

Main wrapper

Completion container

Success message

Heading

User flow to completion page

Customization examples

Add automatic redirect

Add countdown timer

Add success icon

Add additional help links

Customize for membership site

Common issues

Page displays but user can't login

Success message doesn't display

Login link goes to wrong page

Page shows after failed password reset

Accessibility considerations

Semantic HTML

ARIA live region

Focus management

Link accessibility

Security best practices

Always escape output

Validate URL parameters

Don't expose sensitive information

Testing checklist

Integration with other systems

WooCommerce

BuddyPress / BuddyBoss

Custom membership plugins

What's next