Modern Login

Here lives a simple mu-plugin to whitelabel and modernize wp-login.php. No admin panels, no bloat – just a simple filter to optionally customize the CSS properties with your color palette.

Requirements

• PHP >= 7.1.3
• Composer

Installation

Bedrock

Install via Composer:

$ composer require log1x/modern-login

Manual

Download the release .zip and install into wp-content/plugins.

Customization

To customize the color palette, simply pass an array containing one or more of the colors you would like to change to the login_color_palette filter:

add_filter('login_color_palette', function () {
    return [
        'brand' => '#0073aa',
        'trim' => '#181818',
        'trim-alt' => '#282828',
    ];
});

Text color will automatically be inverted to #fff or #111 determined by the relative luminance of the element's background color.

Changing the Logo

The logo uses the first letter of the login header text set by WordPress. You can customize this using the login_headertext filter:

/**
 * Change the WordPress login header to the blog name.
 *
 * @return string
 */
add_filter('login_headertext', function () {
    return get_bloginfo('name');
});

Development

Modern Login is built using TailwindCSS and compiled with Laravel Mix.

$ yarn

In order to ease development, Modern Login makes use of wp-env to quickly setup a WordPress instance with everything needed (this requires Docker).

$ npx wp-env start

In another terminal tab/window, you can start browser sync and webpack to watch for changes:

$ yarn start

You can test color values and other settings in tests/mu-plugins/mu.php.

Bug Reports

If you discover a bug in Modern Login, please open an issue.

Contributing

Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.

License

Modern Login is provided under the MIT License.