How to Rebrand WordPress Login Screen

Hey Divi Workers. The masterpiece website you have lovingly crafted for your client is finally finished and you are about to do the handover. Hang on a minute… more often than not, the bland looking login screen is completely overlooked so wouldn’t it be nice to create a WordPress login screen to match your customer’s own branding. It’s all in the detail you know!

This tutorial assumes that you have a child theme installed with a functions.php file. If you’d like to know more about child themes check out this article. If you’re not comfortable with coding or you’d just prefer an easier route, I’ve built an inexpensive, super lightweight plugin with all the customizations built into the Divi theme options. Check it out – WordPress Login Customizer

For those that prefer to code, here we go….

The following code must be added to the functions.php file of your child theme. DO NOT use core files as they will get overwritten on any future Divi theme updates.

This first snippet of PHP creates a function to change the default WordPress logo to one of your choice from the media library. Just copy the link from the attachment details screen in the media library. You can also set the background colour and background image if required.


//Divi Works Custom WP Login Logo
add_action('login_head', 'dw_custom_login_logo');
function dw_custom_login_logo() {
    echo '<style type="text/css">
    #login h1 a {
        background-image:url("/wp-content/uploads/2018/09/logo.png"); //This is for the logo
        background-size:155px 110px;
        width: 155px ;
        height: 110px ;
    }
    body.login{
        background-color:red;
        background-image: url("/wp-content/uploads/2021/06/sky.jpg"); //This is the page background image
        background-size:cover;
    }
    </style>'
}

The second snippet of PHP creates another function which changes the default logo link to the website homepage.


//Divi Works - Change the URL of the WordPress login logo to website home page
add_filter('login_headerurl', 'dw_url_login_logo');
function dw_url_login_logo(){
    return get_bloginfo( 'wpurl' );
}

Before

After

That’s it folks! Thanks for your continued support. Remember, the WP Login Customizer plugin is available if you need this functionality but don’t want to do the coding.

Let me know how it worked out for you in the comments.