Put this together to compliment the White Label add-on. Let’s you change the background color, accent color, and change the field opacity. For this client, we use the White Label to put a PNG image as background and their brand mark. This simple plugin then adds the color beneath it. It also changes the logo link from wordpress to the client’s site (you’ll need to change that in the code). Shows up in the settings panel. Maybe something similar can be added to the White Label add on in the future?
<?php
/*
Plugin Name: Custom Login Background & Styling
Plugin URI: http://franklin.marketing
Description: A plugin to customize the login background color via settings.
Version: 1.0
Author: T.J. Miller
Author URI: http://franklin.marketing
License: GPL2
*/
// Create a settings page
function clb_add_settings_page() {
add_options_page(
'Custom Login Background & Styling', // Page title
'Login Page Styling', // Menu title
'manage_options', // Capability
'custom-login-background', // Menu slug
'clb_render_settings_page' // Function to display the settings page
);
}
add_action('admin_menu', 'clb_add_settings_page');
// Render the settings page
function clb_render_settings_page() {
?>
<div class="wrap">
<h1>Custom Login Page Styling</h1>
<p>Customize the login page colors and styling options below.</p>
<form method="post" action="options.php">
<?php
settings_fields('clb_settings_group');
do_settings_sections('custom-login-background');
submit_button();
?>
</form>
</div>
<?php
}
// Register settings, sections, and fields
function clb_settings_init() {
register_setting('clb_settings_group', 'clb_background_color');
register_setting('clb_settings_group', 'clb_accent_color');
register_setting('clb_settings_group', 'clb_input_opacity');
add_settings_section(
'clb_settings_section',
'Customize Login Page Elements',
null,
'custom-login-background'
);
add_settings_field(
'clb_background_color',
'Background Color',
'clb_background_color_callback',
'custom-login-background',
'clb_settings_section'
);
add_settings_field(
'clb_accent_color',
'Accent Color',
'clb_accent_color_callback',
'custom-login-background',
'clb_settings_section'
);
add_settings_field(
'clb_input_opacity',
'Input Field Opacity',
'clb_input_opacity_callback',
'custom-login-background',
'clb_settings_section'
);
}
add_action('admin_init', 'clb_settings_init');
// Callback functions for each setting field
function clb_background_color_callback() {
$color = get_option('clb_background_color', '#b5e272');
echo '<input type="text" name="clb_background_color" value="' . esc_attr($color) . '" />';
}
function clb_accent_color_callback() {
$color = get_option('clb_accent_color', '#009b63');
echo '<input type="text" name="clb_accent_color" value="' . esc_attr($color) . '" />';
}
function clb_input_opacity_callback() {
$opacity = get_option('clb_input_opacity', '0.5');
echo '<input type="number" step="0.1" min="0" max="1" name="clb_input_opacity" value="' . esc_attr($opacity) . '" />';
}
// Enqueue the custom login CSS with dynamic styles
function clb_custom_login_css() {
$background_color = get_option('clb_background_color', '#b5e272'); // Default background color
$accent_color = get_option('clb_accent_color', '#009b63'); // Default accent color
$input_opacity = get_option('clb_input_opacity', '0.5'); // Default input field opacity
?>
<style type="text/css">
/* Background Color */
body.login {
background-color: <?php echo esc_attr($background_color); ?> !important;
}
/* White Box (Login Form) */
.login form {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Input Field Styling with Adjustable Opacity */
.login input[type="text"], .login input[type="password"] {
background: rgba(255, 255, 255, <?php echo esc_attr($input_opacity); ?>) !important;
}
/* Button Styling */
.wp-core-ui .button-primary {
background-color: <?php echo esc_attr($accent_color); ?> !important;
border-color: <?php echo esc_attr($accent_color); ?> !important;
color: #fff !important;
font-weight: bold !important;
}
/* Button Hover - Movement */
.wp-core-ui .button-primary:hover {
transform: translateY(-2px);
}
/* Input Field Focus Border */
.login input:focus {
border-color: <?php echo esc_attr($accent_color); ?> !important;
box-shadow: 0 0 2px 1px <?php echo esc_attr($accent_color); ?> !important;
}
/* Eye icon color */
.login .dashicons-visibility {
color: <?php echo esc_attr($accent_color); ?> !important;
}
/* Hyperlink hover color */
.login #nav a:hover, .login #backtoblog a:hover {
color: <?php echo esc_attr($accent_color); ?> !important;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'clb_custom_login_css');
// Change the login logo link URL
function clb_login_logo_url() {
return 'https://seedbed.com'; // Your desired URL
}
add_filter('login_headerurl', 'clb_login_logo_url');