Tag: Branding

Custom Login Logo + Styles (Theme-Agnostic)

Many WordPress site owners want to replace the default WordPress login logo with their own branding. This is especially useful for client projects, membership sites, or any scenario where a custom branded login experience is desired. The challenge is to do this in a way that works regardless of the active theme — a theme-agnostic solution.

This tutorial shows you how to add a custom login logo and styles using code that you can place in your functions.php file or a mini-plugin. This method ensures your customizations persist even if you switch themes.

When to Use a Custom Login Logo + Styles

• You want to replace the default WordPress logo on the login page with your own logo.
• You need to customize the login page’s look and feel without relying on theme support.
• You want a lightweight, code-based solution instead of a plugin.
• You want to maintain branding consistency for clients or users.

Quick Fix: Add Custom Login Logo and Styles

1. Prepare your custom logo image (recommended size: 320×80 pixels, PNG or SVG).
2. Upload the logo to your theme or child theme folder, or use the WordPress Media Library.
3. Add the provided PHP code snippet to your functions.php file or create a mini-plugin.
4. Test the login page to verify the logo and styles appear correctly.

Why This Happens

By default, WordPress uses its own logo on the login page, which is hardcoded in the login form markup. To customize it, you need to hook into WordPress actions and filters to override the default styles and replace the logo URL. Since the login page is outside the theme templates, theme styles don’t apply here, so you must enqueue your own CSS or output inline styles via hooks.

Step-by-Step: Custom Login Logo + Styles Code

Below is a complete code snippet that:

• Replaces the login logo with your custom image.
• Adjusts the logo size and login form styles.
• Changes the logo link URL and title attribute.

<?php
// Hook to customize login logo and styles
function custom_login_logo() {
    // URL to your custom logo - adjust path as needed
    $logo_url = get_stylesheet_directory_uri() . '/images/custom-login-logo.png';

    // Output custom CSS for login page
    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(' . esc_url($logo_url) . ');
            background-size: contain;
            width: 320px;
            height: 80px;
            margin: 0 auto 25px;
        }
        /* Optional: customize login form background and button */
        body.login {
            background-color: #f1f1f1;
        }
        .login form {
            background: #fff;
            border: 1px solid #ddd;
            padding: 26px 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,.13);
        }
        .wp-core-ui .button-primary {
            background: #0073aa;
            border-color: #006799;
            box-shadow: none;
            text-shadow: none;
        }
        .wp-core-ui .button-primary:hover {
            background: #006799;
            border-color: #005177;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_logo');

// Change the logo link URL to your homepage or custom URL
function custom_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');

// Change the logo title attribute on hover
function custom_login_logo_url_title() {
    return get_bloginfo('name');
}
add_filter('login_headertext', 'custom_login_logo_url_title');
?>

How to Add This Code

You have two main options:

1. Add to your theme’s functions.php file:
   Open functions.php in your active theme or child theme folder and paste the code at the bottom. Save and upload.
2. Create a mini-plugin:
   Create a new file named custom-login-logo.php in wp-content/plugins/ with the following header and the code above:

   <?php
   /*
   Plugin Name: Custom Login Logo
   Description: Adds a custom login logo and styles.
   Version: 1.0
   Author: Your Name
   */
   

   Then paste the code snippet below the header. Activate the plugin via the WordPress admin.

Testing Your Custom Login Logo

1. Clear your browser cache or open a private/incognito window.
2. Visit https://yourdomain.com/wp-login.php or https://yourdomain.com/wp-admin/.
3. Verify that your custom logo appears instead of the default WordPress logo.
4. Check the logo link points to your homepage and the title attribute shows your site name.
5. Adjust CSS in the code snippet if the logo size or positioning needs tweaking.

Variations and Enhancements

• Use an SVG logo: Upload an SVG file and update the URL accordingly. Ensure your server supports SVG display.
• Load logo from Media Library: Replace $logo_url with the full URL of an image uploaded via Media Library.
• Customize login page background: Add more CSS rules inside the <style> block to change background colors, fonts, or add custom messages.
• Use external CSS file: Instead of inline styles, enqueue a custom CSS file using wp_enqueue_style hooked to login_enqueue_scripts.
• Change login form elements: Use additional hooks like login_form or login_footer to add custom HTML or scripts.

Works On

<

Environment	Compatibility
Web Servers	Apache, Nginx, LiteSpeed, IIS
Control Panels	cPanel, Plesk, DirectAdmin

…