WordPress Custom Login Styles

DSDalton SuttonMarch 19, 2024
View AllView Notes
<?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');