Hướng dẫn code tạo form login với giao diện riêng

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

get_header(); ?>

<div class="custom-login-form">
    <?php
    if (isset($_POST['login'])) {
        // Kiểm tra nonce để bảo vệ chống CSRF
        if (!isset($_POST['custom_login_nonce']) || !wp_verify_nonce($_POST['custom_login_nonce'], 'custom_login_action')) {
            echo '<p class="error">Nonce verification failed.</p>';
            exit;
        }

        // Lấy và làm sạch thông tin đăng nhập
        $username = sanitize_text_field($_POST['username']);
        $password = sanitize_text_field($_POST['password']);

        // Thực hiện đăng nhập
        $creds = array(
            'user_login'    => $username,
            'user_password' => $password,
            'remember'      => true
        );

        $user = wp_signon($creds, false);

        if (is_wp_error($user)) {
            echo '<p class="error">Incorrect username or password.</p>';
        } else {
            // Đăng nhập thành công, chuyển hướng người dùng
            wp_redirect(home_url());
            exit;
        }
    }
    ?>

    <form action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" method="post">
        <?php wp_nonce_field('custom_login_action', 'custom_login_nonce'); ?>
        
        <p>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" required>
        </p>
        <p>
            <label for="password">Password</label>
            <input type="password" name="password" id="password" required>
        </p>
        <p>
            <input type="submit" name="login" value="Login">
        </p>
    </form>
</div>

<?php get_footer(); ?>

.custom-login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

.custom-login-form p {
    margin-bottom: 15px;
}

.custom-login-form label {
    display: block;
    margin-bottom: 5px;
}

.custom-login-form input[type="text"],
.custom-login-form input[type="password"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.custom-login-form input[type="submit"] {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

.custom-login-form input[type="submit"]:hover {
    background-color: #005177;
}

.custom-login-form .error {
    color: red;
}