The default login page shows the WordPress logo and links to wordpress.org. A few hooks let you replace the logo, change the link and style the page to match your client brand.

Replace the logo and style the page

function lotgrafix_login_styles() {
    ?>
    <style>
        body.login {
            background: #111;
        }

        #login h1 a,
        .login h1 a {
            background-image: url( <?php echo esc_url( get_template_directory_uri() . '/images/logo.png' ); ?> );
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 80px;
        }

        .login form {
            border-radius: 12px;
        }

        .wp-core-ui .button-primary {
            background: #ff4500;
            border-color: #ff4500;
        }
    </style>
    <?php
}
add_action( 'login_enqueue_scripts', 'lotgrafix_login_styles' );

Change the logo link and the hover text

function lotgrafix_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'lotgrafix_login_logo_url' );

function lotgrafix_login_logo_text() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'lotgrafix_login_logo_text' );

Load a separate stylesheet instead

function lotgrafix_login_stylesheet() {
    wp_enqueue_style( 'lotgrafix-login', get_template_directory_uri() . '/css/login.css', array(), '1.0.0' );
}
add_action( 'login_enqueue_scripts', 'lotgrafix_login_stylesheet' );

Use a generic login error message

By default WordPress tells an attacker if the username exists or not. A generic message gives less information.

function lotgrafix_login_errors() {
    return __( 'Incorrect login details.', 'lotgrafix' );
}
add_filter( 'login_errors', 'lotgrafix_login_errors' );

Add a message above the form

function lotgrafix_login_message( $message ) {
    return $message . '<p class="message">Client portal. Authorized users only.</p>';
}
add_filter( 'login_message', 'lotgrafix_login_message' );

Notes

  • Use an image with a transparent background, and keep it light so the login page loads fast.
  • If a plugin changes the login URL, these hooks still apply, because they run on the login screen itself.
«