25% off ProSNIPC25OFF

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