WordPress – Login page customization

In the world of WordPress, personalizing the login page can make for a more branded and cohesive user experience. The following snippet of PHP code allows you to customize the WordPress login page by changing the logo, its link, and the title text.

The Code

The code snippet should be added to your theme’s functions.php file or a custom plugin designed for site-specific enhancements.

<?php

add_action('login_enqueue_scripts', function() {
    // Define the path to the custom logo image
    $img = get_stylesheet_directory_uri() . '/assets/img/login-logo.png';
    // Get the dimensions of the logo image
    $img_size = getimagesize($img);

    // Inline CSS to style the login page logo
    ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url('<?php echo $img; ?>');
            width: <?php echo $img_size[0]; ?>px;
            height: <?php echo $img_size[1]; ?>px;
            background-size: 100%;
        }
    </style>
    <?php

    // Filter to change the logo link URL to the home page
    add_filter('login_headerurl', function () {
        return home_url();
    });

    // Filter to change the hover text on the logo to the site's name
    add_filter('login_headertext', function () {
        return get_option('blogname');
    });
});

How It Works

• The login_enqueue_scripts action hook is used to insert custom CSS into the login page for styling the logo.
• The login_headerurl filter hook changes the link on the logo to point to the website’s home page instead of the default WordPress.org.
• The login_headertext filter hook sets the title text to display the name of the site when a user hovers over the logo.

Customization

To customize the login page logo with this snippet, replace the path in $img with the path to your own logo file. Ensure the image file is correctly placed in your theme’s or child theme’s corresponding directory.