Create a Custom WordPress Login Without wp-login.php

Hello, fellow WordPress enthusiasts! Today, I'm going to share with you a little adventure I embarked on in the realm of WordPress customization. Why did I decide to do this? Well, because the default WordPress login page (wp-login.php) lacks a certain flair and isn't always the best option for every site. And as someone who loves to tinker and optimize, I just couldn't resist the urge to create a more streamlined login process.

So, I decided to design a custom login page that you can embed directly within your WordPress posts or pages. What makes it better? You won't have to redirect your users to wp-login.php anymore! This means a smoother, more integrated user experience. The best part is, you can do this with a simple PHP script and the Snippets plugin.

Let's dive in!

Don't get me wrong, wp-login.php does the job. However, it's often an abrupt change from the main site's branding, layout, and overall user experience. Users are yanked out of the environment they were in, which can be jarring. That's why I thought it'd be great to let users log in without ever leaving the page they're on.

Using the Snippets Plugin

First thing's first—install the Snippets plugin. This gem lets you run PHP code snippets directly in your WordPress dashboard without having to modify your theme files.

Breaking Down the Code

Let's look at each section of our custom login script.

Function Declaration

// Declare a function that'll be turned into a shortcode
function custom_login_form_shortcode() {

Here we declare a function called custom_login_form_shortcode. This function will be turned into a shortcode later.

Logged-in Check

// Check if the user is already logged in
if ( is_user_logged_in() ) {
    return 'You are already logged in!';
}

The is_user_logged_in() function checks if the user is already logged in. If so, it simply returns a message stating that the user is already logged in.

HTML Form

// The HTML form for login
$output = '
<form action="" method="post">...</form>';

This part of the code generates the HTML login form. We use the post method to send form data.

// Logic for authenticating the user
if (isset($_POST['custom_login'])) {...}

The if statement checks whether the form was submitted. If it was, the script attempts to log the user in.

Sign-On

// WordPress function to sign-on the user
$user = wp_signon( $creds, false );

wp_signon is a WordPress function that tries to log the user in with the credentials ($creds) provided. If successful, it redirects to the current page.

Error Handling

// Check for errors and display messages
if ( is_wp_error($user) ) {...}

This section checks for login errors and displays error messages if necessary.

Shortcode Registration

// Register the shortcode
add_shortcode('custom_login_form', 'custom_login_form_shortcode');

Finally, add_shortcode registers our function as a shortcode, making it available to be used anywhere in WordPress.

Here's the complete code:

function custom_login_form_shortcode() {
    if ( is_user_logged_in() ) {
        return 'You are already logged in!';
    }

    $output = '
    <form action="" method="post">
        <div>
            <label for="username">Username:</label>
            <input type="text" name="username" id="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" required>
        </div>
        <input type="submit" name="custom_login" value="Login">
    </form>';

    if (isset($_POST['custom_login'])) {
        $creds = array(
            'user_login'    => sanitize_text_field($_POST['username']),
            'user_password' => $_POST['password'],
            'remember'      => true
        );

        $user = wp_signon( $creds, false );

        if ( is_wp_error($user) ) {
            $output .= '<div class="error">' . $user->get_error_message() . '</div>';
        } else {
            wp_redirect($_SERVER['REQUEST_URI']);
            exit();
        }
    }

    return $output;
}
add_shortcode('custom_login_form', 'custom_login_form_shortcode');

And there you have it! You can now add the [custom_login_form] shortcode to any page, and your custom login form will appear. Use the Snippets plugin to add this function and let your website’s login shine!

Cheers and happy coding! 🎉

Crafting a Custom WordPress Login Page With Shortcodes

Why Ditch the Default Login Page?