Customize WordPress Login CSS

I Wrote a plugin that attaches a hook to the login page and adds custom CSS.

The plugin can be administered from your admin menu “Settings/ASBRA Login Plugin”. Simply add your CSS rules and click the “Save Changes” button.

To build this plugin yourself, follow the below instructions:

# vim wp-content/plugins/asbra_login_plugin.php

<?php
/*
Plugin Name: ASBRA Login Plugin
Description: Customize your Login. See menu: Settings/ASBRA Login Plugin
Version: 0.1
*/

// Initiate an object, the __construct does the rest for you
$ab = new ASBRA_Login_Plugin();

class ASBRA_Login_Plugin {

    // BACKEND - Variables
    public $opt_name = 'asbra_name';            // Name of key in Database to hold Value
    public $page_title = 'ASBRA Login Page';    // Title of admin page
    public $menu_title = 'ASBRA Login';         // Title under settings menu
    public $capability = 'manage_options';		// https://codex.wordpress.org/Roles_and_Capabilities#manage_options
    public $menu_slug = 'asbra-login-plugin';	// GET Variable identifying admin page

    // FRONTEND - Variables
    public $hidden_field_name 	= 'asbra_form_hidden';
    public $data_field_name 	= 'asbra_form_name';

    function __construct() 
    {
        // FRONTEND - Hook for Login Page CSS
        add_action( 'login_enqueue_scripts', array($this, asbra_login_css));

        // BACKEND - Hook for admin menu
        add_action( 'admin_menu', array($this, asbra_plugin_menu));
    }

    function asbra_login_css() // FRONTEND - Get css from Database
    { 
        $opt_val = get_option( $this->opt_name );
        echo '<style type="text/css">' .$opt_val. '</style>';
    }

    function asbra_plugin_menu() // BACKEND - Place "ASBRA Plugin" in Settings menu
    {
        add_options_page( $this->page_title, $this->menu_title, $this->capability, $this->menu_slug, array($this, asbra_login_page) );
    }

    function asbra_login_page() // BACKEND - Admin Page Template
    {
        if ( !current_user_can( 'manage_options' ) )  
                wp_die( __( 'You do not have sufficient permissions to access this page.' ) );

        $opt_val = get_option( $this->opt_name ); // Read in existing option value from database

        // Should we save a new value ?
        if( isset($_POST[ $this->hidden_field_name ]) && $_POST[ $this->hidden_field_name ] == 'Y' ) {
                
                $opt_val = $_POST[ $this->data_field_name ]; // Read their posted value

                update_option( $this->opt_name, $opt_val ); // Save the posted value in the database
                _e("Content has been updated!", 'asbra');
        }
        
        echo '<h1>'.__('Asbra Plugin - Customize Login Page', 'asbra').'</h1>';
        echo '<p>'.__('This Plugin has a hook attached to the login page that puts this content inside of <style> tags.', 'asbra').'</p>';
        ?>

        <form name="asbra_plugin_form" method="post">
            <input type="hidden" name="<?php echo $this->hidden_field_name; ?>" value="Y">
            <textarea style="width:100%" rows=25 name="<?= $this->data_field_name; ?>"><?= $opt_val; ?></textarea>
            <hr />
            <p class="submit">
                <input type="submit" name="Submit" class="button-primary" value="<?php esc_attr_e('Save Changes') ?>" />
            </p>
        </form>

        <?php 
    }

} // END OF CLASS

Example of CSS to be pasted into your administration

/* Page Body*/
body { 
    background-color:#fff !important;
}

/******************************
   Login Logo Image 
  ******************************/
body.login div#login h1 a 
{
    background-image: url(/wp-content/themes/nimpen/img/fluga.png);
    background-size: 100%;
    width: 150px;
    height: 150px;
}
/*****************************
  Login & Registration Boxes  
  *****************************/
#loginform,
#lostpasswordform,
#registerform { 
    background-color:black; 
    color: white; 
}
/****************** 
   Message Boxes 
  ******************/
.login #login_error, 
.login .message, 
.login .success { 
    border-left: 4px solid #ff0000 !important;
}