Customising your WordPress login page

With more and more content being hidden behind pay walls and secure areas it is becoming increasingly more common to have login pages to gain access to more exclusive content for ‘members only’.

Category: WordPress | Read time: 10 minutes

Read more

By default the WordPress login page has it’s own branding but why stick with that. Take ownership and white label your website.

What is the main purpose of customising your login page

By default the WordPress logo appears above the WordPress login form. As a user of the website you seek reassurance that you’re still on the website when logging into a secure area. Thus it is important to remove the default WordPress logo.

It keeps everything branded and looks more professional. This means you white label WordPress as your own website.

There are many ways of changing the default login page. There are quite a few free and premium paid plugins to change your login page logo.

If you are not confident at modifying code this is a perfect solution. If you are more confident there are things you can do to customise a WordPress function.

How to use a plugin to customise your login page

Some plugins that I have found that are compatible with the latest version of WordPress:

  1. Ultimate Branding (WPMU DEV) – Paid
  2. Theme My Login – Free
  3. Admin Custom Login – Free

These are recommendations against the compatibility and star ratings within WordPress. It is important to check the documentation before installing any plugin. These are not plugins I have used on my own projects.

How to customise your login page without a plugin

With WordPress it is always best to avoid over bloating your site with plugins. This will have a negative impact on the performance of your site.

There is a plugin free alternative to changing your WordPress login page. This requires knowledge of HTML, CSS and PHP to complete.

Changing the WordPress logo with CSS in your WordPress function.php file

At the bottom of your function.php file add the following function. This will overwrite the default WordPress logo on the login page by CSS.

function my_custom_logo() { 
echo '
 <style type="text/css">
    #login h1 a, .login h1 a {
    background-image: url([logo here]);
    height:200px;
    width:200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
}
 </style>
';

}
add_action( 'login_enqueue_scripts', 'my_custom_logo' );

The end result

You now have successful altered your login page logo. Why not experiment with changing other styles on your login page.

Would you like your login page redesigned? I would love to help. Get in touch via my contact form and lets collaborate. For a full list of my services, please visit my web design services listing.