Matt Fiddles

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

User Tools

Site Tools


Sidebar

"Arthur yawed wildly as his skin tried to jump one way and his skeleton the other, whilst his brain tried to work out which of his ears it most wanted to crawl out of.
`Bet you weren't expecting to see me again,' said the monster, which Arthur couldn't help thinking was a strange remark for it to make, seeing as he had never met the creature before. He could tell that he hadn't met the creature before from the simple fact that he was able to sleep at nights."

- Arthur discovering who had diverted him from going to a party.



Where will you go today?

"`Right,' said Ford, `I'm going to have a look.'
He glanced round at the others.
`Is no one going to say, "No you can't possibly, let me go
instead"?'
They all shook their heads.
`Oh well.'"

- Ford attempting to be heroic whilst being seiged by Shooty and Bangbang.
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