Shelley Bassett



Customising the WordPress Login Screen

August 13, 2018

Need a custom login screen for your WordPress site? Editing the default one to match your website is easy

When publishing a website that many different people will log into, it’s nice to have a custom login screen that reflects the design of the website or the brand of the company. It helps with user confidence too. A custom log in screen tells the user that the place they’re entering their secure data (like a username, email or password) is actually with the company they intent to be using. With all these benefits to a custom log in screen, lets add one to WordPress!

WordPress uses the default log in at . If you want to change this location, its easy using a plugin like
WPS Hide Login. Not only can doing this help with branding, but it also adds an additional layer of security to your site as unwanted parties won’t have the direct link to your dashboard. Now, onto styling!

Changing the featured logo

One of the most common, and simplest, adjustments to the login page is to swap the default WordPress logo for your name or brand. Just don’t forget to re-link this new logo back to your home page for easy navigation by users. Because we’re adding this to functions.php , we can still use WordPress functions to get the page title or home URL.

The following functions add the logo as a background image, then sets the home URL and the title that is displayed on mouse over.

Take care to change the location of the location of the background image. My logo is in my template folder, but yours might be in the media library. You can also add some other styles into the CSS to change the way elements are displayed or styled. This might be especially useful if your logo is a different size to the default WordPress one.

You might also want to change the styling of the form or buttons to match your site. It’s normal CSS, so edit away! And that’s all there is. Now you should have a totally custom login screen for your WordPress dashboard.