Matt Fiddles

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

User Tools

Site Tools


Sidebar

Emperor Palpatine: "Soon the Rebellion will be crushed and young Skywalker will be one of us!"



Where will you go today?

"Adventure. Heh! Excitement. Heh! A Jedi craves not these things."

- 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 (3 years ago) by Matt Bagley