MENU

A quick guide to customizing your wordpress login page

  3 minutes read

When building a wordpress site for your client or company, one thing that is usually overlooked but can be a good addition to the brand is to customize the WordPress login page.

The easiest way to do this is by installing a plugin. But for this article, we will be looking at how we can do this by adding a bit of code to the functions.php and some custom css.

Let’s get Started

The first thing that you need to do is to create a custom login css file that will overwrite the default login css. This is the file that WordPress will use to apply your styles to the page.

I usually add custom css files in a css folder under an assets folder.

The next step is to let WordPress load the CSS file into the head section of the login page. To do this, add the following code in your functions.php file.


function custom_login_stylesheet() {
  wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/assets/css/login.css');
    }

add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );
                  

Change the assets/css/login.css to point to where you added your custom login CSS.

Change the Login Logo Link

The logo on the WordPress login page links to wordpress.org by default. While you are still on the functions.php file, you can go ahead and change it to link to your own site by adding this code.


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

function custom_login_logo_url_title() {
    return 'Your Site Name and Info'; // change this to your site name
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' )


Now we are ready to begin to add custom styles onto the login.css file

Styling the login page

The first thing that you should probably do is create a custom background. To do this add the following code into the custom login css file


body.login {
    background: #333; 
}


You can change the background colour to your desired colour or image.

Change the Logo

The next step is to replace the wordpress logo with your own logo. This can be a bit tricky and may require a bit of tweaking before you get it right. This is because WordPress displays the logo as a background image. So you will need to add the logo using css.


.login h1 a, #login h1 a {
   background: url('../assets/img/custom-logo.svg')  no-repeat;
   width:130px; 
   height:45px; 
   background-size: inherit;  
   padding-bottom: 0px;
}


Customize the Login button

Now to change the colours of the log in button. In my case I wanted a more flat look on the button so I override some of the extra styles


.login .button-primary {
    background-color: #555;
    color: #EDBF1C;
    border: 1px solid transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.login .button-primary:hover{
    background-color: #444;
    color: #fff;
    border: 1px solid transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}


Lastly, I wanted to change the colour of the links below the login form to white so as to make them stand out in contrast with the darker background colour.


p#nav a {
  color: #fff !important;
}

p#backtoblog a {
  color: #ccc !important;
}


The Final Result

As you can see below, with just a few lines of code, the WordPress login page looks very different from the default page.

Final login page

You can customize the login page even further including styling the login form, the error messages etc. To learn more visit this WordPress codex page