Change the WordPress login logo without a plugin.

The WordPress login page has the logo on it but sometimes you may want to change that logo to your own, especially when you’re building a website for a client. We’ll show you how to quickly change the WordPress login logo without having to use a plugin.

Let’s get started.

1. Make a copy of the functions.php file

Access your WordPress theme’s files and download a copy of the functions.php file. We’ll make a copy and keep it on the desktop. The functions.php file allows us as developers to make custom changes to the WordPress core code without actually having to touch the core code. Also because you will be applying this to your child theme’s functions.php file, these changes will only be applied when that theme is being used.

2. Code the function

Open your text editor and copy-paste this code below or write it for yourself. We suggest starting off writing your code in the text editor to prevent any issues if you’re not familiar with the code.

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
		height:65px;
		width:320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

The login logo is displayed using CSS so we are using a WordPress function to get this done.

The default size for your login logo should be no larger than 80px by 80px but you can adjust the sizing by tweaking padding-bottom in the above code.

3. Change Link values

The login logo is automatically set to link to the WordPress website which is something you probably won’t want. In order to change the link values to something of your choice we’ll need to add some more WordPress functions. Copy and paste the code below into your themes functions.php file.

You will need to change the part of the code that says “Your Site Name and Info” to your own information and click save.

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

Your link and alt text for the logo has been changed.

4. Reload your login page

Reload your login page and you should see the WordPress logo replaced by your logo. You may have to make some adjustments to the CSS that was in the code you added or add your own CSS file.

5. Extra customization

If you’d like to completely redesign your login page can create a separate stylesheet. Copy and paste the code below to link your new login page stylesheets to your theme.

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );