How to customize the WordPress login Page Logo

The default WordPress admin dashboard login page is with the WordPress logo on the top of the login form. Here is what the default login page looks like:

If you want to make your WordPress website more professional and personalized, you can change the default WordPress logo on the login page to your custom logo.

In this article, we will introduce how to customize the default WordPress login logo by creating a plugin.

Creating a WordPress plugin to customize the login page logo with an admin settings page is an excellent way to make this functionality reusable and easy to manage. you don’t need to take risks to add code snippets to the functions.php. And the plugin features won’t be affected by any WordPress updates.

Steps to Create the Custom Login Logo Plugin

What features we want to have in the plugin:

Create A submenu under the Settings menu, named ‘Custom Login Logo’
Create An upload button for the logo image on the submenu page.
Create Width and height input fields to control the size of the logo on the submenu page.

Step 1: Create the Plugin folder and file

Create the Plugin Folder
Create a new folder called custom-login-logo on your PC.
Create the Plugin File
In the custom-login-logo folder, create a PHP file named custom-login-logo.php. This will contain the code for your plugin.

Step 2: Add Plugin Header and Basic Code Structure

Open custom-login-logo.php and add the following code:

				
					<?php
/*
Plugin Name: Custom Login Logo
Plugin URI: https://wpcollege.com
Description: Customize the login page logo with an image, width, and height control.
Version: 1.0
Author: wpcollege
Author URI:https://wpcollege.com
*/

// Enqueue media uploader
function custom_login_logo_enqueue_media() {
    wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'custom_login_logo_enqueue_media' );

// Create submenu under 'Settings'
function custom_login_logo_menu() {
    add_options_page( 
        'Custom Login Logo', 
        'Custom Login Logo', 
        'manage_options', 
        'custom-login-logo', 
        'custom_login_logo_settings_page' 
    );
}
add_action( 'admin_menu', 'custom_login_logo_menu' );

// Register settings
function custom_login_logo_register_settings() {
    register_setting( 'custom_login_logo_settings', 'custom_login_logo_url' );
    register_setting( 'custom_login_logo_settings', 'custom_login_logo_width' );
    register_setting( 'custom_login_logo_settings', 'custom_login_logo_height' );
}
add_action( 'admin_init', 'custom_login_logo_register_settings' );

This sets up the plugin, enqueues the media uploader (for logo image selection), adds a submenu under Settings, and registers the settings for storing the logo URL, width, and height.

Step 3: Create the Settings Page

In the setting page, we need to:

Creates a form with an input for the logo URL, width, and height.
Adds a JavaScript function to open the WordPress media uploader for selecting the logo image and retrieving its URL.

Add the following code to create the settings page in the same custom-login-logo.php file:

				
					// Settings page content
function custom_login_logo_settings_page() {
    ?>
    <div class="wrap">
        <h1>Custom Login Logo Settings</h1>
        <form method="post" action="options.php">
            <?php settings_fields( 'custom_login_logo_settings' ); ?>
            <?php do_settings_sections( 'custom_login_logo_settings' ); ?>

            <!-- Upload Button for Logo -->
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">Logo Image</th>
                    <td>
                        <input type="text" id="custom_login_logo_url" name="custom_login_logo_url" value="<?php echo esc_attr( get_option( 'custom_login_logo_url' ) ); ?>" style="width:300px;" />
                        <button type="button" class="button" id="custom_login_logo_upload_button">Upload Logo</button>
                    </td>
                </tr>

                <!-- Width Input -->
                <tr valign="top">
                    <th scope="row">Logo Width (px)</th>
                    <td>
                        <input type="number" name="custom_login_logo_width" value="<?php echo esc_attr( get_option( 'custom_login_logo_width', 200 ) ); ?>" />
                    </td>
                </tr>

                <!-- Height Input -->
                <tr valign="top">
                    <th scope="row">Logo Height (px)</th>
                    <td>
                        <input type="number" name="custom_login_logo_height" value="<?php echo esc_attr( get_option( 'custom_login_logo_height', 100 ) ); ?>" />
                    </td>
                </tr>
            </table>

            <?php submit_button(); ?>
        </form>
    </div>

    <script>
    jQuery(document).ready(function($) {
        $('#custom_login_logo_upload_button').on('click', function(e) {
            e.preventDefault();
            var image = wp.media({
                title: 'Upload Logo',
                multiple: false
            }).open().on('select', function() {
                var uploaded_image = image.state().get('selection').first();
                var image_url = uploaded_image.toJSON().url;
                $('#custom_login_logo_url').val(image_url);
            });
        });
    });
    </script>
    <?php
}

Step 4: Display the Custom Logo on the Login Page

Add the following function to use the stored options to display the custom logo on the login page.

This function fetches the custom logo URL, width, and height values from the options saved in the settings page and applies them to the login page logo.

				
					// Display custom logo on login page
function custom_login_logo_style() {
    $logo_url = esc_url( get_option( 'custom_login_logo_url' ) );
    $width = esc_attr( get_option( 'custom_login_logo_width', 200 ) );
    $height = esc_attr( get_option( 'custom_login_logo_height', 100 ) );

    if ( $logo_url ) {
        echo "<style type='text/css'>
            #login h1 a {
                background-image: url('$logo_url');
                width: {$width}px;
                height: {$height}px;
                background-size: contain;
            }
        </style>";
    }
}
add_action( 'login_head', 'custom_login_logo_style' );

Step 5: Install and Activate the Plugin

Until now the code snippet part has finished, just save the custom-login-logo.php file in the folder, and zip the custom-login-logo folder.

Go to your WordPress dashboard, then navigate to Plugins > Add New.
Click the Upload Plugin button and upload the zipped folder.
Activate the plugin from the WordPress Plugins menu.
Go to Settings > Custom Login Logo in the WordPress dashboard.

Upload a logo, specify the width and height, and save your changes.

Open the login page (https://yourdomain.com/wp-admin) to see your custom logo in action! Below is the example after you customized the login page logo.

Conclusion

The Custom Login Logo plugin allows you to set a custom login logo, control its size, and display it on your WordPress login page, all through a simple settings page in the WordPress dashboard. Customize the login logo with this plugin, you can make your website more professional and personalized. You can try it. If you you want to save troubles and time from creating a WordPress plugin, you can download it from our website below.

Add your brand logo to WordPress Login Page

Customize WordPress Login page Logo

Upload your own brand logo to replace the WordPress logo in the WordPress login page. Make your website more professional and build the confidence of your customer. You can customize the width and length of the logo at the setting of the plugin. The plugin is light weight and powerful to use