Personalize your WordPress login page

You have built a site for a customer or for yourself, but the login page is still standard with the WordPress logo. Wouldn't it be much more fun to personalize this page with your own logo instead of the WordPress logo? That's what we're going to do in this tutorial and we'll do it without plugins...well almost without a plugin. Because you do need a child theme and luckily it is easy to generate a child theme with the help of a a plugin. After that you no longer need it and the plugin can be removed.

First, make sure you have a backup and are not doing this on a production website. It is a small change, but changes to the code of a production website is never a good plan, especially not on Fridays 😉

First we make sure we have a child theme

Don't have a child theme yet? Then we will create one first, because without a child theme all your work will be lost with the next update of your theme. To do this, install the plugin WP Child Theme Generator. Activate this and go to your admin menu Appearance and choose Child Theme Gen.
Choose your active theme at the top. Check the checkbox Create & Active to activate the theme immediately. Now click on the button below Create Child Theme. Remove the plugin, because we no longer need it.

Replaced the WordPress logo with our own image

Now that we have a child theme, our changes are retained. We are now going to replace the WordPress logo with our own logo. This can be done in two ways, via the admin menu, or via a code editor using FTP. We go for the first and easiest option. Of course, we first need a logo for this.

I have the BonWP logo as an example. We are going to add this to the media library. We choose this in the menu Media, thereafter Library. Here we can upload a new file at the top.
The image appears at the bottom. Click on it and you will see on the right side the File URL with a button below to copy it to your clipboard. Save this URLeven somewhere, for example in Notepad or something similar, because we will need it later.

Now we are going to replace the default WordPress logo on the login page. We do this with a piece of code. Now that we have a child theme, we can easily add it.
Go to Appearance and Theme file editor. Here we have the option to add our own css. Choose it on the right Theme Functions file (functions.php).
At the bottom we add a piece of code to replace the WordPress logo on the login page.

Add the following code:

function my_own_login_logo() { ?>
        #login h1 a, .login h1 a {
            background-image: url(https://bonwp.com/wp-content/uploads/2023/11/logo250x70-2.png);
	    height:65px;
	    width:320px;
	    background-size: 250px 70px;
	    background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    <?php }
add_action( 'login_enqueue_scripts', 'mijn_eigen_login_logo' );

In the background-image place the URL you saved for your image. So this becomes:

backgroud-image: url( PASTE YOUR URL HERE );

The background-size is the size of your image. My logo is 250px wide and 70px high, so I adjusted it to:

background-size: 250px 70px;

The login page now looks much better with your own chosen image.

Adjust the link and title of the new image

There is still one point we can improve. The link of the image points to https://wordpress.org and the title is Made possible by WordPress. We can also adjust this in the same way, so that the logo links to your own website.
To adjust this, we'll add another piece of code below the code we just added. To do this, go back to the Theme file editor and add Theme Functions below the code we have already added.

function my_own_login_logo_url() { 
   return home_url(); 
} 
add_filter( 'login_headerurl', 'my_own_login_logo_url' ); 

function my_own_login_logo_url_title() { 
   return 'Made possible by WordPress and BonWP'; } add_filter( 'login_headertext', 'my_own_login_logo_url_title' ); 

The rule return_home_url() ensures that from now on you will be redirected to the homepage of your website.
The rule return 'Made possible by WordPress and BonWP' adjusts the title of the link.
You can place your own text between the ''.

Now your login page is personalized! The customer will certainly be happy with this, because it looks much more personal. Of course this is also nice for your own website.