Branding your WordPress login page can make it look more professional and cohesive with your site’s identity. With just a bit of PHP code, you can customize the login logo, link it to your homepage, and change the hover title to display your site’s name. Below is the code with line-by-line comments explaining each part of the functionality.
PHP Code for Custom Login Logo
<?php
// Function to customize the WordPress login logo
function custom_login_logo() {
?>
<style type="text/css">
/* CSS to style the login logo */
#login h1 a {
/* Set the custom logo image URL */
background-image: url('<?php echo esc_url( 'https://zestypixels.com/wp-content/uploads/2024/11/cropped-lime-Logo-fav.png' ); ?>');
/* Set the logo background size to fit within the container */
background-size: contain;
/* Set the width of the logo area to take up the available space */
width: 100%;
/* Set the height of the logo container */
height: 100px; /* Adjust height as needed */
}
</style>
<?php
}
// Hook the function to enqueue scripts and styles for the login page
add_action('login_enqueue_scripts', 'custom_login_logo');
// Function to change the login logo URL to the site's homepage URL
function custom_login_logo_url() {
// Returns the homepage URL of the current site
return home_url();
}
// Filter to replace the default login logo URL with the custom function
add_filter('login_headerurl', 'custom_login_logo_url');
// Function to change the login logo's title text to the site name
function custom_login_logo_url_title() {
// Returns the name of the site, which will appear as the title attribute
return get_bloginfo('name');
}
// Filter to replace the default login logo title attribute with the custom function
add_filter('login_headertext', 'custom_login_logo_url_title');
Explanation Summary
custom_login_logo()
: This function defines the styling for the custom login logo. It includes setting the image URL, dimensions, and background behavior. Hooked tologin_enqueue_scripts
, it ensures the styling is applied only on the login page.custom_login_logo_url()
: Modifies the URL that the login logo links to, replacing the default WordPress URL with the site’s homepage.custom_login_logo_url_title()
: Changes the title attribute of the login logo, displaying the site’s name on hover for better accessibility.
By implementing this code, your custom logo will link directly to your homepage, with the site name appearing as the title attribute when users hover over it. This is an easy way to give your WordPress login page a more polished and branded appearance.