How to Create a WordPress Custom Login Popup Modal without any plugin.

#webdev #wordpress #php

sign in Step-1:
Create Cusom login form shortcode:


// custom sign in popup form shortcod
function custom_login_form() {

    // Display the login form
    ob_start();

    ?>
    <form method="post" class="formValidationQuery login-form">
        <div class="form-group">
            <label for="">*User Name</label>
            <input type="email" id="youremail" name="useremail" placeholder="Email Address" required />
            <span class="formError" id="youremailError"></span>
        </div>
        <div class="form-group">
        <label for="">*Password</label>
            <input type="password" name="password" id="loginPassword" placeholder="Password" required />
            <span class="formError" id="loginPasswordError"></span>
        </div>
        <div class="d-flexinline">                    
            <input type="checkbox" id="checkbox" name="checkbox" />
            <span class="checkboxtext" id="logincheckboxtex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
        </div>
        <button type="submit" name="login" class="btn" id="login-btn">
            <span>Sign In</span>
            <span class="spinner" style="display: none;"></span>
        </button>                   

    </form>
    <?php
}
add_shortcode('custom_login', 'custom_login_form');

sign in Step-2:
Create login form handle function:


// custom sign in poup form handle
function handle_custom_login() {
    if (isset($_POST['login'])) {
        $useremail = sanitize_user($_POST['useremail']);
        $password = sanitize_text_field($_POST['password']);
        $creds = array(
            'user_login'    => $useremail,
            'user_password' => $password,
            'remember'      => isset($_POST['remember']),
        );

        $user = wp_signon($creds, false);

        if (is_wp_error($user)) {
            echo '<script>alert("Login failed: ' . $user->get_error_message() . '");</script>';
        } else {
            wp_redirect(home_url());
            exit;
        }
    }
}
add_action('init', 'handle_custom_login');

sign in Step-3:
add shortcod in your popup modal.

Custom Sign up

sign up Step-1:
Create function for Cusom Sign up form shortcode:


// custom registration form

function custom_registration_form() {

    ?>
    <form method="post" class="formValidationQueryRegister login-form">
        <div class="form-group">
            <label for="">*User Name</label>
            <input type="text" id="yourname" name="username" placeholder="Username" required />
        </div>
        <div class="form-group">
            <label for="">*User Email</label>
            <input type="email" id="youremail" name="email" placeholder="Email" required />
        </div>
        <div class="form-group">
        <label for="">*Password</label>
            <input type="password" name="password" id="loginPassword" placeholder="Password" required />
            <span class="formError" id="loginPasswordError"></span>
        </div>
        <div class="d-flexinline">                    
            <input type="checkbox" id="checkbox" name="checkbox" />
            <span class="checkboxtext" id="logincheckboxtex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
        </div>
        <button type="submit" name="register" class="btn" id="login-btn">
            <span>Sign In</span>
            <span class="spinner" style="display: none;"></span>
        </button>                   

    </form>
    <?php
}
add_shortcode('custom_registration', 'custom_registration_form');

sign up Step-2:
Create function for handle Sign up form request:


// custom sign up form handle
function handle_custom_signup() {
    if (isset($_POST['register'])) {
        $username = sanitize_user($_POST['username']);
        $email = sanitize_email($_POST['email']);
        $password = sanitize_text_field($_POST['password']);

        // Check if the username and email already exist
        if (username_exists($username)) {
            echo '<script>alert("Username already exists.");</script>';
            return;
        }
        if (email_exists($email)) {
            echo '<script>alert("Email is already registered.");</script>';
            return;
        }

        // Create a new user
        $user_id = wp_create_user($username, $password, $email);

        if (is_wp_error($user_id)) {
            echo '<script>alert("Error: ' . $user_id->get_error_message() . '");</script>';
        } else {
            echo '<script>alert("Registration successful! You can now log in.");</script>';
        }
    }
}
add_action('init', 'handle_custom_signup');

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide