Create a Custom WordPress Login Page

Posted on 19th September, 2015 8 Comments

So you want to customize the look of the default wordpress login page, first thing to do is add this to your functions.php

/*
 * ADD OUR CUSTOM LOGIN PAGE
 *************************************************************/
add_action('login_head', 'my_custom_login');
function my_custom_login() { // Include a stylesheet to adapt the login page
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login/custom-login-styles.css" />';
}

add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url() { // Change the logo link from wordpress
	return get_bloginfo( 'url' );
}

add_filter( 'login_headertitle', 'my_login_logo_url_title' );
function my_login_logo_url_title() { // Change the title
	return 'ADD YOUR SITE TITLE';
}

add_filter('login_errors', 'login_error_override');
function login_error_override() { // Change the login error message
    return 'Incorrect login details.';
}

add_action( 'init', 'login_checked_remember_me' );
function login_checked_remember_me() { // Auto check the "remember me" box
	add_filter( 'login_footer', 'rememberme_checked' );
}
function rememberme_checked() {
	echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Then create a new CSS file and save it within your theme folder in a folder called login.

custom-login-styles.css

body.login {
  background-image: url('login-hero.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.login h1 a {
  background-image: url('logo.png');
}
.login label {
  font-size: 12px;
  color: #555555;
}

.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}
.login .button-primary {
  width: 120px;
  float:right;
  background-color:#1783d8 !important;
  color: #ffffff;
  -webkit-border-radius: 0;
  border: none;
}

.login .button-primary::before {
    bottom: 0;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    right: 50%;
    transition-duration: 0.3s;
    transition-property: left, right;
    transition-timing-function: ease-out;
    z-index: -1;
}

.login .button-primary:hover {
  background-color:#17a8e3 !important;
  color: #fff;
  -webkit-border-radius: 0;
  border: none;
}
.login .button-primary:hover::before {
    left: 0;
    right: 0;
}

.login .button-primary:active {
  background-color:#17a8e3 !important;
  color: #fff;
  -webkit-border-radius: 0;
  border: none;
}
p#nav {
  display: none;
}
p#backtoblog {
  display: none;
}

Now you’ll just need to add a few images to complete the transformation.

Images

Add these images to the login folder with your CSS.

  1. Background Image: Create a background image with a minimum width of 1920 x 1200px; Save this file as login-hero.jpg
  2. Logo Image: Create a square logo image width a width and height of 64x64px; Save this file as logo.png

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

shauntepownall

27th, Aug, 20

Thanks for all your efforts on this site. My mum enjoys going through research and it is easy to understand why. We all hear all relating to the dynamic mode you offer priceless tips and hints via this web blog and therefore increase participation from some others on this concept so our favorite princess is truly discovering a whole lot. Take pleasure in the rest of the year. You have been carrying out a tremendous job.

gdaevie94259535

27th, Aug, 20

constantly i used to read smaller articles or reviews that also clear their motive, and that is also happening with this paragraph which I am reading at this time.

joycewhiteside5

10th, Sep, 20

An interesting discussion is worth comment. There’s no doubt that that you need to publish more on this issue, it might not be a taboo subject but generally people do not discuss these subjects. To the next! Many thanks!!

jacquesmackey

10th, Sep, 20

Hi! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

rickiehogben7

13th, Sep, 20

This piece of writing will assist the internet users for building up new blog or even a blog from start to end.

arrongreene

13th, Sep, 20

Hey there, You’ve done a great job. I’ll definitely digg it and personally suggest to my friends. I’m sure they’ll be benefited from this website.

nevilleberkman8

16th, Sep, 20

Hello.This article was really interesting, especially since I was searching for thoughts on this topic last couple of days.

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]