How to Implement a Custom Login Form in WordPress

Creating a Custom WordPress Login Form

Basic Implementation

Let's start with creating a basic custom login form using WordPress's built-in functions:

Creating a basic login form template:

function custom_login_form() {
    $args = array(
        'redirect' => home_url(),
        'form_id' => 'custom_login_form',
        'label_username' => 'Username',
        'label_password' => 'Password',
        'label_remember' => 'Remember Me',
        'label_log_in' => 'Log In'
    );
    
    wp_login_form($args);
}

Adding the Form to a Page

Create a custom page template to display the login form:

<?php
/*
Template Name: Custom Login Page
*/

get_header();

if (!is_user_logged_in()) {
    custom_login_form();
} else {
    wp_redirect(home_url());
    exit;
}

get_footer();

Styling the Login Form

Add custom CSS to style your login form:

function custom_login_styles() {
    wp_enqueue_style('custom-login', get_template_directory_uri() . '/css/custom-login.css');
}
add_action('login_enqueue_scripts', 'custom_login_styles');

Handling Login Redirection

Custom redirect function after successful login:

function custom_login_redirect($redirect_to, $request, $user) {
    if (isset($user->roles) && is_array($user->roles)) {
        if (in_array('administrator', $user->roles)) {
            return admin_url();
        } else {
            return home_url('/dashboard/');
        }
    }
    return home_url();
}
add_filter('login_redirect', 'custom_login_redirect', 10, 3);

Security Considerations

1. Always validate and sanitize user input
2. Use nonces for form submission
3. Implement rate limiting for login attempts

Here's a security enhancement example:

function secure_login_form() {
    if (isset($_POST['wp-submit'])) {
        if (!verify_nonce($_POST['login_nonce'], 'custom_login_nonce')) {
            wp_die('Security check failed');
        }
        
        // Rate limiting check
        if (get_transient('login_attempts_' . $_SERVER['REMOTE_ADDR'])) {
            wp_die('Too many login attempts. Please try again later.');
        }
    }
}
add_action('login_init', 'secure_login_form');

Best Practices

1. Use WordPress core functions instead of writing custom SQL queries
2. Keep the login form responsive
3. Implement proper error handling
4. Add CAPTCHA for additional security
5. Use SSL/HTTPS for the login page

Error Handling

Custom error messages implementation:

function custom_login_errors($errors) {
    if (isset($errors->errors['invalid_username'])) {
        $errors->remove('invalid_username');
        $errors->add('invalid_credentials', 'Invalid login credentials');
    }
    return $errors;
}
add_filter('wp_login_errors', 'custom_login_errors');

Recommended Plugins

1. Custom Login Page Customizer - Easy customization of login page with live preview [https://wordpress.org/plugins/custom-login-page-customizer/]

2. Theme My Login - Complete login page customization solution [https://wordpress.org/plugins/theme-my-login/]

Common Pitfalls to Avoid

1. Don't store passwords in plain text
2. Don't disable WordPress's built-in security features
3. Don't use deprecated functions
4. Don't forget to handle mobile responsiveness
5. Don't skip input validation and sanitization

Additional Tips

• Test your login form thoroughly in different browsers
• Implement password reset functionality
• Add social login options if needed
• Consider implementing two-factor authentication
• Keep tracking of login attempts for security purposes

This solution provides a solid foundation for a custom login form while maintaining security and following WordPress best practices.