Matt Fiddles

Life's so vast, there's just so much to do...

User Tools

Site Tools


Sidebar

"Concentrate...feel the Force flow. Yes. Good. Calm, yes. Through the Force, things you will see. Other places. The future...the past. Old friends long gone."

- Yoda



Where will you go today?

"`Hey this is terrific!' Zaphod said. `Someone down there is trying to kill us!'
`Terrific,' said Arthur.
`But don't you see what this means?'
`Yes. We are going to die.'
`Yes, but apart from that.'
`APART from that?'
`It means we must be on to something!'
`How soon can we get off it?'"

- Zaphod and Arthur in a certain death situation over Magrathea.
computers:websites:wordpress:custom-login

Custom Login Page

You can customize your Wordpress Login Page.

Note, the following functions only work on php 5.3+.

Add them to a custom plugin you make, or your functions.php

TODO: check out ajax possibilities

Set Login Title

Set your own custom title:

// Set Login Message
add_filter( 'login_message', function() {
    add_action( 'login_enqueue_scripts', function() { ?>
    <style type="text/css">     
      .login .login_message {
      text-align: center;
      font-size: 2em;
      color: #eeeeee;
    </style>
    <?php 
    });      
    return '<div class="login_message">My Login</div>';
});
 
// set header
add_filter( 'login_headertitle', function() {
    return 'My Login';
});
    add_action( 'login_enqueue_scripts', function() { ?>
    <style type="text/css">
        .login h1 a {
            background-image: url(<?php echo get_bloginfo('url');?>/login-logo.jpg);
            background-size: 128px;
            padding-bottom: 30px;
        }
    </style>
    <?php 
    });
// set logo link
add_filter( 'login_headerurl', function () {
    return home_url();
});

Set Login Background

    add_action( 'login_enqueue_scripts', function() { ?>
    <style type="text/css">
        body.login {
          background: url('<?php echo get_bloginfo('url');?>/login-background.jpg') no-repeat center center fixed;
              -webkit-background-size: cover; /* For WebKit*/
              -moz-background-size: cover;    /* Mozilla*/
              -o-background-size: cover;      /* Opera*/
              background-size: cover;         /* Generic*/
        }
    </style>
    <?php 
    });

Customize the Box

    add_action( 'login_enqueue_scripts', function() { ?>
    <style type="text/css">
        .login .message {
          display: none;
        }
        .login .above_message {
          margin-left: 0;
          padding: 16px;
          border-left: 0px solid #FEEBA2;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        }
        .login #nav {
          margin: 2px 0 0;
          background: none repeat scroll 0 0 rgba(0, 0, 0, 0.80);
        }
        .login a {
          color: #FFFFFF;
        }
        .login .message,
        .login .above_message,
        .login #backtoblog a, 
        .login #nav a,
        .login form,
        .login form .input {
          background: none repeat scroll 0 0 rgba(0, 0, 0, 0.80);
          color: #FFFFFF;
        }
        .login label {
          color: #FFFFFF;
        }
        .login #backtoblog {
          display: none;
        }
    </style>
    <?php 
    });

Don't Disclose User

Don't show if the user didn't get the username or password.

// show generic error
add_filter( 'login_errors', function(){
  return "Incorrect User and/or Password";
});

Check the Remember Box

  add_action( 'init', function() {
    add_filter( 'login_footer',function() {
      echo "<script>document.getElementById('rememberme').checked = true;</script>";
    });
  });

Display a Custom Message

Show a custom message on the login screen.

add_action('register_form', function() {
    echo '<p>Custom Login Form Message</p>';
});

Remove Login Page Error Shake

For those who don't like to shake…

add_action('login_head', function() {
	remove_action('login_head', 'wp_shake_js', 12);
});

Put it all together

Make a file in your mu-plugins folder and put in the following:

<?php
 
if ( !defined('ABSPATH') ) {
	die("<!-- Not allowed -->");
}
 
 
/* Login Customizations */
 
// set logo link
add_filter( 'login_headerurl', function () {
    return home_url();
});
 
// set header
add_filter( 'login_headertitle', function() {
    return 'My Login';
});
 
add_action( 'login_enqueue_scripts', function() { ?>
    <style type="text/css">
        body.login {
          background: url('<?php echo get_bloginfo('url');?>/login-background.jpg') no-repeat center center fixed;
              -webkit-background-size: cover; /* For WebKit*/
              -moz-background-size: cover;    /* Mozilla*/
              -o-background-size: cover;      /* Opera*/
              background-size: cover;         /* Generic*/
        }
        .login .message {
          display: none;
        }
        .login .above_message {
          margin-left: 0;
          padding: 16px;
          border-left: 0px solid #FEEBA2;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        }
        .login #nav {
          margin: 2px 0 0;
          background: none repeat scroll 0 0 rgba(0, 0, 0, 0.80);
        }
        .login a {
          color: #FFFFFF;
        }
        .login .message,
        .login .above_message,
        .login #backtoblog a, 
        .login #nav a,
        .login form,
        .login form .input {
          background: none repeat scroll 0 0 rgba(0, 0, 0, 0.80);
          color: #FFFFFF;
        }
        .login label {
          color: #FFFFFF;
        }
        .login #backtoblog {
          display: none;
        }
        .login h1 a {
            background-image: url(<?php echo get_bloginfo('url');?>/login-logo.jpg);
            background-size: 128px;
            padding-bottom: 30px;
        }
        .login .login_message {
          text-align: center;
          font-family: "Open Sans",sans-serif;
          font-size: 2em;
          color: #eeeeee;
          background: none repeat scroll 0 0 rgba(0, 0, 0, 0.40);
        }
    </style>
<?php 
});
 
// Message
add_filter( 'login_message', function() {
    return '<div class="login_message">My Login</div>';
});
 
// show generic error
add_filter( 'login_errors', function(){
  return "Incorrect User and/or Password";
});

References:

computers/websites/wordpress/custom-login.txt · Last modified: Apr 5, 2015 (4 years ago) by Matt Bagley