How to Use a Custom PHP Function to Change the Default WordPress Login Logo

Lukas S. Jan 3, 2025 Customization
How can I change the logo that appears on the WordPress login page?
What is the PHP code to replace the default WordPress login logo with a custom logo on the wp-login.php page?
Andy answered Jan 3, 2025

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:

  1. Custom Login Page Customizer - Visual customizer for the login page
  2. Login Designer - Drag and drop login page builder
  3. 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