How To Customize The WordPress Login Page Logo And Styles
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.


