Custom Login Page Branding
Replaces the WordPress login logo with your site icon, links it to the homepage, and applies a clean card-style layout to the login form.
Module2 parts · by SnipCraft
PHPLogic
php
<?php
add_action( 'login_enqueue_scripts', 'scseed_login_logo_style' );
function scseed_login_logo_style() {
$logo = esc_url( apply_filters( 'scseed_login_logo_src', get_site_icon_url( 84 ) ) );
if ( ! $logo ) { return; }
echo '<style>';
echo '#login h1 a{background-image:url(' . $logo . ') !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;width:220px !important;height:64px !important;}';
echo '</style>';
}
add_filter( 'login_headerurl', 'scseed_login_home_url' );
function scseed_login_home_url() {
return home_url();
}
add_filter( 'login_headertext', 'scseed_login_site_name' );
function scseed_login_site_name() {
return get_bloginfo( 'name' );
}CSSStyles
css
body.login {
background: #f0f2f5;
}
body.login #login {
width: 380px;
padding: 2rem 0;
}
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
border: none;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(0,0,0,.10);
padding: 2rem 2.25rem 1.75rem;
background: #fff;
}
body.login .input {
border-radius: 5px;
border-color: #d1d5db;
font-size: 0.95rem;
padding: 0.5rem 0.75rem;
height: auto;
box-shadow: none;
}
body.login .input:focus {
border-color: #7c5cff;
box-shadow: 0 0 0 2px rgba(124,92,255,.2);
outline: none;
}
body.login p.submit .button-primary {
border-radius: 5px;
font-size: 1rem;
font-weight: 600;
padding: 0.55rem 1rem;
width: 100%;
}
body.login #nav a,
body.login #backtoblog a {
color: #666;
}#admin#branding#customization#login#ux