SnipSnip.pro

Customize & Style the WP Login Screen, Add Your Site Logo, and more without a plugin!

•

, , , , , ,
Admin styles custom login logo use site logo on login screen snipsnip pro code snippets

Style your WP Login screen the way you want. By default, the login page is bland, shows the WordPress logo and links to wordpress.org. With this snippet, your login screen will show your site logo, link to your homepage AND add custom styles that you can modify any way you’d like.

What it does…

This code snippet creates a class called CustomLoginLogo that contains two functions: customLogoLink and setCustomLogoStyles. The customLogoLink function simply returns the URL of your site’s homepage. The setCustomLogoStyles function is where the magic happens. It retrieves the ID of the custom logo set in your theme’s settings and generates the URL for the logo image. It then outputs a block of CSS code that styles the login page’s logo.

Why it does it…

The code snippet is useful if you want to customize the login logo in WordPress to match your site’s branding. By default, WordPress uses its own logo, but with this code, you can replace it with your own custom logo, link to any url you want and add any other custom css.

How it does it…

The code starts by checking if the CustomLoginLogo class already exists. If it doesn’t, it creates the class and defines the customLogoLink and setCustomLogoStyles functions inside it.

The setCustomLogoStyles function uses the get_theme_mod function to retrieve the ID of the custom logo set in the theme’s settings. It then uses the wp_get_attachment_image_url function to generate the URL for the logo image based on the ID.

After that, it outputs a block of CSS code using the heredoc syntax (<<<EOD). This CSS code styles the login page’s logo. It sets the background position, size, and other properties to ensure the logo looks good on the login page. If a custom logo URL is available, it sets the background-image property to that URL. Otherwise, it sets it to none.

Finally, the code creates an instance of the CustomLoginLogo class and hooks the setCustomLogoStyles function to the login_head action and the customLogoLink function to the login_headerurl filter. This ensures that the custom logo styles and link are applied to the login page.

Download JSON for importing into Code Snippets Pro
Download PHP for adding as a plugin or copying into functions.php

See the code…

<?php

if (!class_exists('CustomLoginLogo')) {
	// Add your site logo to the WP Login screen. Customize the background color and logo size if desired. https://snipsnip.pro/s/763
    class CustomLoginLogo {
        public function setCustomLogo() {
            $custom_logo_id = get_theme_mod('custom_logo');
            $logo_url = wp_get_attachment_image_url($custom_logo_id, 'full');
    
            if ($logo_url) {
                echo <<<EOD
<style type="text/css">
    body.login { background-color: /* #dad4d5; */ }
    body.login div#login h1 a {
        background-image: url({$logo_url}) !important;
        /* background-size: contain !important; */
        /* height: auto !important; */
        /* width: 100% !important; */
    }
</style>
EOD;
            }
        }
    }

    $customLoginLogo = new CustomLoginLogo();
    add_action('login_head', array($customLoginLogo, 'setCustomLogo'));
}