How to Customize WordPress Login Page Without Plugins

Customizing the WordPress login page without plugins allows you to have complete control over the design and functionality of your login form, enhancing the user experience and branding for your site. Whether you’re looking to change the login page logo, modify styles, add custom fields, or change the layout, you can achieve this by adding code to your theme’s functions.php file or creating a custom login page template.

Here’s a detailed guide on how to customize the WordPress login page without using plugins.

1. Customizing the Login Page Logo

The default WordPress login page displays the WordPress logo at the top. You may want to replace it with your own logo to match your branding.

Steps to change the logo:

1. Upload your logo to the media library:
   • Go to Media > Add New in the WordPress dashboard.
   • Upload your custom logo and note down the URL of the image.
2. Modify the functions.php file:
   • Go to Appearance > Theme Editor.
   • Select the functions.php file of your active theme or child theme.
   • Add the following code to change the logo:

function custom_login_logo() {
    echo '<style type="text/css">
        #login h1 a {
            background-image: url("YOUR_IMAGE_URL") !important;
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');

Replace YOUR_IMAGE_URL with the URL of your uploaded logo.

2. Customizing the Login Page Styles

To give the login page a custom look and feel, you can add custom CSS to modify the colors, fonts, background, and layout.

Steps to add custom CSS:

1. Add custom styles to the login page:
   • Open your functions.php file.
   • Add the following code to enqueue a custom CSS file:

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

2. Create the CSS file:
   • In your theme’s folder, create a new file called login-style.css.
   • Add your custom styles to this file. For example, to change the background color of the login form, use:

body.login {
    background-color: #f4f4f4;
}

#loginform {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#login h1 a {
    background-image: url('YOUR_LOGO_URL');
    background-size: contain;
    height: 80px;
    width: 100%;
}

This CSS will allow you to style the background and layout of the login page.

3. Change the Login Logo Title (Tooltip)

By default, when you hover over the WordPress logo on the login page, the title text shows “Powered by WordPress.” You can change this to something more relevant to your site.

Code to change the logo title:

1. Add the following code to your functions.php file:

function custom_login_title() {
    return 'Your Site Name'; // Replace with your site name or custom title
}
add_filter('login_headertext', 'custom_login_title');

This changes the title text shown when you hover over the logo.

4. Change the Login Page URL

By default, when you click the WordPress logo on the login page, it takes you to WordPress.org. You can change this to your site’s homepage or any custom URL.

Code to modify the login page logo URL:

1. Add the following code to your functions.php file:

function custom_login_url() {
    return home_url(); // Change to any URL you prefer
}
add_filter('login_headerurl', 'custom_login_url');

This code will make the login logo clickable and redirect users to your homepage or a URL of your choice.

5. Customize the Login Form Fields

You can also customize the form fields (e.g., adding custom placeholders or changing the text for the login button) without plugins.

Code to modify the username and password field placeholders:

1. Add the following code to your functions.php file:

function custom_login_placeholders($translated_text, $text, $domain) {
    if ('default' == $domain) {
        switch ($translated_text) {
            case 'Username or Email Address':
                $translated_text = 'Enter Your Username';
                break;
            case 'Password':
                $translated_text = 'Enter Your Password';
                break;
        }
    }
    return $translated_text;
}
add_filter('gettext', 'custom_login_placeholders', 20, 3);

This code changes the placeholders in the username and password fields.

Change the “Log In” Button Text:

You can change the text on the login button (e.g., from “Log In” to “Sign In”).

1. Add the following code to your functions.php file:

function custom_login_button_text($text) {
    if ('Log In' == $text) {
        $text = 'Sign In'; // Change 'Sign In' to your desired button text
    }
    return $text;
}
add_filter('gettext', 'custom_login_button_text');

This changes the login button text.

6. Redirect Users After Logging In or Out

You can customize where users are redirected after logging in or logging out.

Code to redirect after login:

1. Add the following code to your functions.php file:

function custom_login_redirect($redirect_to, $request, $user) {
    // If the user is logging in, redirect them to the homepage or dashboard
    return home_url(); // Change this to your desired URL
}
add_filter('login_redirect', 'custom_login_redirect', 10, 3);

Code to redirect after logout:

1. Add the following code to your functions.php file:

function custom_logout_redirect() {
    wp_redirect(home_url()); // Change this to your desired URL
    exit();
}
add_action('wp_logout', 'custom_logout_redirect');

7. Add Custom Footer Text

The default WordPress login page has a footer message “Powered by WordPress.” You can customize this footer text to reflect your branding or a custom message.

Code to change the footer text:

1. Add the following code to your functions.php file:

function custom_login_footer() {
    echo '<p style="text-align:center;">Your Custom Footer Text Here</p>';
}
add_action('login_footer', 'custom_login_footer');

This code changes the footer text of the login page to your custom message.

Conclusion

Customizing the WordPress login page without plugins can be done by modifying the functions.php file and using custom CSS. The process involves:

• Replacing the default WordPress logo with your custom logo.
• Styling the login page with custom CSS to fit your branding.
• Changing text like the login form placeholders, button text, and footer text.
• Redirecting users after they log in or log out.
• Customizing the login page logo’s hover title and URL.

By using these techniques, you can ensure that your WordPress login page aligns with the design and branding of your website, offering a more cohesive user experience.