Customize WordPress Login Page and Dashboard Icon

Customize WordPress Login Page and Dashboard Icon

Have you ever wanted to change the standard login and logo for WordPress? This is easy to do with a small amount of CSS.  Also we will add your logo to the top of the dashboard removing the WordPress icon.

Change the WordPress Logo on Login

Let us take a look.  Create your logo and make it approximately 300 pixels wide. Upload it to your theme’s images folder. Link to the file using the get_stylesheet_directory_uri(); Add the following function to your theme’s functions.php file.  Then all you need is to add the action to load this function. Log out and back in and check it. You can expand on this and customize the buttons and background until you are satisfied.

function my_login_logo() { ?>
    <style type="text/css">
       .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/_images/site-login-logo.png) !important;
           background-size: 300px 80px !important; 
     width: 300px !important; 
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Change the WordPress Icon in the Dashboard

Create your logo 30 pixels square in transparent png. Upload it to your theme’s images folder. Add the following function to your theme’s functions.php file.

function no_wp_logo_admin_bar_remove() {
    ?>
        <style type="text/css">
            #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
                content: url(<?php echo get_stylesheet_directory_uri(); ?>/_images/my_admin_logo.png)   !important;
                top: 2px;
            }

            #wpadminbar #wp-admin-bar-wp-logo > a.ab-item {
                pointer-events: none;
                cursor: default;
            }
        </style>
    <?php
}
add_action('wp_before_admin_bar_render', 'no_wp_logo_admin_bar_remove', 0);