How to Change the WordPress Login Logo with a Custom Snippet

Snippets, Wordpress /

Changing the WordPress login logo is a simple yet effective way to personalize your website’s admin experience. By replacing the default WordPress logo with your own branding or site logo, you can create a more professional touch. This guide will show you exactly how to change the WordPress login logo using a custom code snippet.

This snippet is part of my custom WordPress plugin, designed to add small, non-breaking conveniences to every site I manage. It’s lightweight and ensures flexibility across various projects. You can find the full plugin on GitHub: Marc’s Custom WP Functions.

Why Change the WordPress Login Logo?

The default WordPress logo is great, but for many sites, replacing it with your logo can:

  • Reinforce your branding.
  • Improve client perception for custom-built websites.
  • Create a cohesive experience for administrators and users.

The Code Snippet to Change the Login Logo

Here’s the snippet I use in my custom WordPress plugin to dynamically update the login logo. It also ensures the logo links to the homepage of the website instead of the WordPress website.

<?php

// Change the login logo
function custom_login_logo() {
    // Retrieve the custom logo URL
    $custom_logo_id = get_theme_mod('custom_logo'); // Get the custom logo ID
    $logo_url = wp_get_attachment_image_url($custom_logo_id, 'full'); // Get the URL of the custom logo

    // Use the default WordPress logo if no custom logo is set
    if (!$logo_url) {
        $logo_url = admin_url('images/wordpress-logo.svg'); // Default WordPress logo
    }

    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(' . esc_url($logo_url) . ');
            height: 150px; /* Adjust as needed */
            width: 100%; /* For responsiveness */
            background-size: contain; /* Adjust as needed */
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_logo');

// Modify the logo link URL to point to the site's homepage
function custom_login_logo_url() {
    return home_url(); // Return the site's homepage URL
}
add_filter('login_headerurl', 'custom_login_logo_url');

// Optional: Modify the title attribute for the logo link
function custom_login_logo_url_title() {
    return get_bloginfo('name'); // Return the site's name
}
add_filter('login_headertext', 'custom_login_logo_url_title');

How This Snippet Works

  1. Dynamic Logo Retrieval:
    • The get_theme_mod('custom_logo') function fetches the logo set in the WordPress Customizer.
    • If no logo is set, it defaults to the WordPress logo (admin_url('images/wordpress-logo.svg')).
  2. Custom Styling:
    • The logo’s appearance (size, responsiveness) is controlled via inline CSS.
  3. Custom Logo Link:
    • The login_headerurl filter ensures the logo links to the homepage of your site.
  4. Tooltip Customization:
    • The login_headertext filter changes the title attribute of the logo link to the site’s name.

Adding This Snippet to Your Custom Plugin

Instead of adding this snippet to your theme’s functions.php, I recommend creating a custom plugin. This approach ensures the functionality is theme-independent and reusable across multiple projects.

Steps to Create a Custom Plugin:

  1. Create a New Plugin File:
    • Go to your wp-content/plugins/ directory and create a folder, e.g., my-custom-convenience-plugin/.
    • Inside this folder, create a file, e.g., my-custom-plugin.php.
  2. Add Plugin Header:
    • Add the following header to the file:
<?php
/*
Plugin Name: My Custom Convenience Plugin
Description: A lightweight plugin to add small, non-breaking enhancements to WordPress websites.
Version: 1.0
Author: [Your Name]
*/
  1. Paste the Snippet:
    • Add the login logo snippet to the plugin file.
  2. Activate the Plugin:
    • Go to the WordPress admin dashboard, navigate to Plugins > Installed Plugins, and activate your custom plugin.

Final Thoughts

Personalizing the WordPress login page is a small yet impactful way to enhance the user experience. By using this snippet as part of a custom plugin, you can ensure flexibility and maintain a consistent workflow across all your projects.

You can check out my full custom plugin, which includes this and other convenience features, on GitHub. If you found this guide helpful, feel free to share it. Happy coding!