How to Change the WordPress Login Logo

One of the first things your clients or users see is the WordPress login screen. By default, it shows the WordPress logo—but wouldn’t it be better if it showed your logo or your client’s brand?

To Change the WordPress Login Logo Use Below Code.

Add code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Avoid adding custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

Change Login Logo via admin style

Here’s the simplest way to change the logo, just change the Background image url via css:

Place your logo at: /wp-content/themes/your-theme/images/custom-logo.png

function custom_login_logo() {
    ?>
    <style type="text/css">
        #login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png');
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'custom_login_logo');

This code will:

• login_enqueue_scripts script is action hook which will load script and css code in login page
• we overwrite the background image url using login_enqueue_scripts hook

Based on Time, User Role, or Environment

Logo changes by Time of Day

function dynamic_login_logo() {
    $hour = date('H');
    if ($hour >= 6 && $hour < 18) {
        $logo = 'day-logo.png';
    } else {
        $logo = 'night-logo.png';
    }
    ?>
    <style>
        #login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/<?php echo $logo; ?>');
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'dynamic_login_logo');

This code will:

• collect the time using date function and put 1 condition which will help you to change the background image of login page.

Logo changes based on environment (dev/staging/production)

function env_login_logo() {
    $env = wp_get_environment_type(); // Available since WP 5.5

    $logo_map = [
        'development' => 'dev-logo.png',
        'staging'     => 'staging-logo.png',
        'production'  => 'prod-logo.png',
    ];

    $logo = $logo_map[$env] ?? 'prod-logo.png';
    ?>
    <style>
        #login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/<?php echo $logo; ?>');
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'env_login_logo');

This code will:

• get the status of site using this wp_get_environment_type() function
• based on status overwrite the background image URL via css

By customizing the login logo, you’re elevating your site’s professionalism and giving users a better experience.