Matt Fiddles

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

User Tools

Site Tools


Sidebar

"The people who get on in this world are the people who get up and look for the circumstances they want and if they can't find them, make them."
-- George Bernard Shaw



Where will you go today?

"Beware of the dark side. Anger...fear...aggression. The dark side of the Force are they. Easily they flow, quick to join you in a fight."

- Yoda
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