How to Easily Add a Custom Login Page to Your WordPress Site Without Using a Plugin?

Creating a custom login page for your WordPress site can make your site look more professional and provide a better user experience. You can do this without using a plugin by following these simple steps. Let’s break it down step-by-step to make it super easy to understand.

Why Customize Your Login Page?

Making your custom login page is a good idea because:

• Brand Consistency: Your site will look the same everywhere, including the login page.
• Better User Experience: A well-designed login page makes users feel more comfortable.
• Improved Security: Not using plugins can reduce the risk of security problems.

Setting Up Your WordPress Site

Before you start, you need to create a child theme. This will keep your custom changes safe when your main theme updates. Here’s how to do it:

• Create a Child Theme Folder: Go to wp-content/themes and make a new folder for your child theme.
• Create a Stylesheet: Inside your new child theme folder, make a file named style.css and add this code to it:

  /*
    Theme Name: Your Child Theme
    Template: parent-theme-folder-name
   */

 Adding a Custom Login Page Without Using a Plugin

 Step 1: Create a Custom Login Page Template

Make a new file in your child theme folder called custom-login.php. Add this code to create the basic layout of your custom login page:

<?php
/* Template Name: Custom Login Page */
get_header();
?>
<div class="login-container">
    <h1>Login to Your Account</h1>
    <form action="<?php echo wp_login_url(); ?>" method="post">
        <label for="username">Username</label>
        <input type="text" name="log" id="username" required>
        <label for="password">Password</label>
        <input type="password" name="pwd" id="password" required>
        <button type="submit">Login</button>
    </form>
</div>
<?php get_footer(); ?>

Step 2: Style Your Custom Login Page

Now, you need to add some CSS to style your login page. Create a new file named login-style.css in your child theme folder and add these styles:

.login-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}
.login-container h1 {
    text-align: center;
    margin-bottom: 20px;
}
.login-container label {
    display: block;
    margin-bottom: 5px;
}
.login-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}
.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #0073aa;
    color: #fff;
    border: none;
}

Step 3: Add the Custom Stylesheet to Your Site

To make sure your custom styles are used, add this code to your child theme’s functions.php file:

function enqueue_custom_login_style() {
    wp_enqueue_style('custom-login-style', get_stylesheet_directory_uri() . '/login-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_login_style');

Step 4: Redirect the Default Login Page

To direct users from the default WordPress login page to your custom login page, add this code to your functions.php file:

function redirect_login_page() {
    $login_page = home_url('/custom-login/');
    $page_viewed = basename($_SERVER['REQUEST_URI']);

    if ($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init', 'redirect_login_page');

By following these detailed steps, you can create a custom WordPress login page for your WordPress site without using a plugin. This method gives you more control over your site’s design and functionality while improving user experience and brand consistency. Make sure to test your custom login page thoroughly to ensure it works perfectly.