How to Customize the WordPress Login Page: Logo, Styles, and Links

Customizing the WordPress Login Page: Logo, Styles, and Links

The default WordPress login page displays the official WordPress logo. By adding custom code, you can replace it with your own site's logo and customize its appearance and link behavior.

Method 1: Add Code via Your Theme's functions.php File

This is the most common method. Add the following code to the end of your active theme's functions.php file.

Custom Logo Image and Styles

This code snippet replaces the login page logo image and sets its display dimensions.

/**
 * Customize WordPress Login Page Logo
 */
function my_custom_login_logo() {
    // Path to your logo.png file in the theme directory
    $logo_url = get_stylesheet_directory_uri() . '/assets/images/logo.png';
    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(' . esc_url($logo_url) . ');
            background-size: contain;
            width: 200px;
            height: 80px;
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

Key Parameters:

• get_stylesheet_directory_uri(): Gets the URL for the current (child) theme directory. Use get_template_directory_uri() for parent themes.
• background-size: contain;: Ensures the entire logo fits within the container. You can also use cover or specific pixel values.
• width and height: Define the display area for the logo; adjust according to your image proportions.
• esc_url(): Escapes the URL for security, which is a recommended practice.

Custom Logo Link

By default, clicking the logo redirects to WordPress.org. This code changes the link to your site's homepage.

/**
 * Customize WordPress Login Logo Link URL
 */
function my_custom_login_logo_url() {
    return home_url(); // Redirects to site homepage
}
add_filter('login_headerurl', 'my_custom_login_logo_url');

/**
 * Customize WordPress Login Logo Link Title
 */
function my_custom_login_logo_url_title() {
    return get_bloginfo('name'); // Uses site name as title
}
add_filter('login_headertext', 'my_custom_login_logo_url_title');

Key Parameters:

• home_url(): Returns your site's homepage URL.
• get_bloginfo('name'): Returns your site's name.
• Note: The filter login_headertitle was renamed to login_headertext in WordPress 5.2.

Method 2: Using a Plugin (Recommended for Beginners)

If you're not comfortable with code, use a plugin:

• Login Logo: A lightweight plugin specifically for replacing the login logo.
• Custom Login Page Customizer: A more comprehensive plugin for customizing logos, backgrounds, colors, and form styles.

Important Notes and Best Practices

1. Image Preparation: Use a PNG logo with a transparent background at a moderate size (e.g., 200x80 pixels). Store it in your theme directory (e.g., /wp-content/themes/your-theme/assets/images/).
2. Use a Child Theme: Direct edits to a theme's functions.php file will be overwritten during updates. Always use a child theme for customizations.
3. Caching: If changes aren't visible, clear your browser cache and any WordPress caching plugin cache.

Following these steps allows you to easily brand the WordPress login page to match your site's identity.