How to customize the WordPress login page logo and text

To customize the WordPress logo on the login screen  you can utilize the login_headerurl and login_headertext filters. These filters allow you to modify the logo URL and text displayed on the login screen. Here's an example of a WordPress function that replaces the default WordPress logo with a custom logo:

By adding this code to your WordPress theme's functions.php file or a custom plugin, users will see a customised page when attempting login.

Custom login logo

The custom_login_logo function injects inline CSS to display the custom logo. This ensures that the custom logo is used as the background image for the h1 element on the login screen, achieving the desired logo replacement.

function custom_login_logo() {
    echo '<style type="text/css">
        .login h1 a {
            background-image: url("https://example.com/path/to/custom-login-logo.png") !important;
            width: 100% !important;
            background-size: contain !important;
add_action('login_enqueue_scripts', 'custom_login_logo');

Custom login logo url

The custom_login_logo_url function modifies the URL that the logo should link to, in this case it is hard coded to a URL

function custom_login_logo_url() {
    return 'https://example.com/'; // Replace with the desired URL
add_filter('login_headerurl', 'custom_login_logo_url');

Custom login logo text

The custom_login_logo_text function changes the text displayed next to the logo. It sets the text to 'Your Site Name' in this example, but you can replace it with any desired text.

function custom_login_logo_text() {
    return 'Your Site Name'; // Replace with the text you want to display instead of WordPress
add_filter('login_headertext', 'custom_login_logo_text');

Leave a Comment

Your email address will not be published. Required fields are marked *