How to Change the Default Login Logo for WordPress: A Step-by-Step Tutorial

WordPress allows you to customize your login page by replacing the default WordPress logo with your own custom logo. This can be a great way to add a personal touch to your website and enhance your branding. In this tutorial, we will show you how to change the default login logo in WordPress with just a few lines of code. If you have already changed your login logo and want to change the logo URL as well, you can follow our tutorial on how to change the login logo URL in WordPress.

Step 1: Prepare your custom logo

The first step in changing the default login logo for WordPress is to prepare your custom logo. You will want your logo to be the same size as the default WordPress logo, which is 84px wide by 84px high. Once you have created your logo, save it to your computer.

Step 2: Access your theme’s functions.php file

To make changes to the WordPress login page, you need to access your theme’s functions.php file. You can do this by logging into your WordPress dashboard and navigating to Appearance > Theme Editor. From there, click on the functions.php file to open it.

Step 3: Add the code to your functions.php file

To replace the default WordPress logo with your custom logo, you need to add the following code to your theme’s functions.php file:

function custom_login_logo() {
    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url('.get_stylesheet_directory_uri().'/images/custom-logo.png);
            height:84px;
            width:84px;
            background-size: 84px 84px;
            background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');
Code language: PHP (php)

This code adds a new function called “custom_login_logo()” which replaces the default WordPress logo with your custom logo. The function is then added to the “login_head” action hook, which inserts the new logo code into the login page header.

Step 4: Save the changes

Once you have added the code to your functions.php file, click on the “Update File” button to save the changes.

Step 5: Check your login page

You can now check your login page to see if the new logo is showing up correctly. You may need to clear your browser cache to see the updated logo.

That’s it! In this tutorial, we showed you how to change the default login logo in WordPress with just a few lines of code. If you want to take your login page customization a step further and change the logo URL as well, you can follow our tutorial on how to change the login logo URL in WordPress. By customizing your login page, you can add a personal touch to your website and enhance your branding.