Matt Fiddles

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

User Tools

Site Tools


Sidebar

Han Solo: "You said you wanted to be around when I made a mistake, well, this could be it, sweetheart."

Princess Leia: "I take it back."



Where will you go today?

ZAPHOD Hey, this rock...
FORD Marble...
ZAPHOD Marble...
FORD Ice-covered marble...
ZAPHOD Right... it's as slippery as... as... What's the slipperiest thing you can think of?
FORD At the moment? This marble.
ZAPHOD Right. This marble is as slippery as this marble.

- Zaphod and Ford trying to get a grip on things in Brontitall, Fit the Tenth.
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 (3 years ago) by Matt Bagley