Changing the WordPress Login Logo
Custom Code Solution
The default WordPress login logo can be changed using a combination of WordPress hooks and custom CSS. Here's how to do it:
Add this code to your theme's functions.php
file or in a site-specific plugin:
This code changes both the logo image and its URL:
function custom_login_logo() {
?>
<style>
#login h1 a {
background-image: url('<?php echo get_theme_file_uri('images/custom-logo.png'); ?>');
background-size: 300px 100px; /* Width and height of your logo */
width: 300px; /* Must match background-size width */
height: 100px; /* Must match background-size height */
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'custom_login_logo');
// Change logo link URL
function custom_login_logo_url() {
return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');
// Change logo title attribute
function custom_login_logo_url_title() {
return get_bloginfo('name');
}
add_filter('login_headertext', 'custom_login_logo_url_title');
Important Notes:
- Replace
'images/custom-logo.png'
with the path to your logo image
- Adjust the
background-size
, width
, and height
values to match your logo's dimensions
- The logo image should be uploaded to your theme directory or served from any accessible URL
Alternative Using wp_login_form Filter
This method provides more control over the logo HTML:
function custom_login_logo_html($html) {
$custom_logo = get_theme_file_uri('images/custom-logo.png');
return sprintf(
'<div class="login-logo"><img src="%s" alt="%s"></div>',
esc_url($custom_logo),
get_bloginfo('name')
);
}
add_filter('login_message', 'custom_login_logo_html');
Plugin Solutions
If you prefer using a plugin, here are reliable options:
-
Custom Login Page Customizer - Visual customizer for the login page
-
Login Designer - Drag and drop login page builder
-
Admin Custom Login - Complete login page customization
These plugins offer user-friendly interfaces for customizing the login page without coding.
Best Practices
- Use an image optimized for web (recommended format: PNG or SVG)
- Keep the logo dimensions reasonable (300px width is standard)
- Ensure the image is hosted on your server or a reliable CDN
- Test the login page appearance across different devices