WordPress Custom Login Styles

DSDalton SuttonMarch 19, 2024
View AllHide Notes

How To Install

  1. Open your WordPress theme's functions.php file or a plugin's PHP file.
  2. Copy and paste the provided PHP snippet into the PHP file.
  3. Save the file.
  4. Check your WordPress login page to see the applied CSS changes.
  5. Adjust as needed.
<?php 

// WordPress Login Page CSS Customization
function daltonsutton_login_css() {
    echo '
        <style type="text/css">
            *:focus {
                outline: none !important;
            }

            body.login {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100vh;
            }

            body.login div#login {
                padding: 0px;
            }

            body.login div#login h1 {}
            body.login div#login h1 a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-image: none !important;
                text-indent: 0px !important;
                width: 100% !important;
                height: auto !important;
                font-size: 2.25rem !important;
                font-weight: 600 !important;
                text-align: left !important;
            }
            body.login div#login form#loginform {}
            body.login div#login form#loginform p {}
            body.login div#login form#loginform p label {}
            body.login div#login form#loginform input {}
            body.login div#login form#loginform input#user_login {}
            body.login div#login form#loginform input#user_pass {}
            body.login div#login form#loginform p.forgetmenot {}
            body.login div#login form#loginform p.forgetmenot input#rememberme {}
            body.login div#login form#loginform p.submit {}
            body.login div#login form#loginform p.submit input#wp-submit {}
            body.login div#login p#nav {}
            body.login div#login p#nav a {}
            body.login div#login p#backtoblog {}
            body.login div#login p#backtoblog a {}
        </style>
    ';
}
add_action('login_head', 'daltonsutton_login_css');

// Update login page logo link to the homepage.
function daltonsutton_login_url() {
    return home_url();
}
add_filter('login_headerurl', 'daltonsutton_login_url');

// Update login page link title.
function daltonsutton_login_title() {
    return get_bloginfo('name');
}
add_filter('login_headertext', 'daltonsutton_login_title');