Many premium themes offer a built in function which makes it easy to change your WordPress login logo to your own custom image.
If you’re using a theme which doesn’t offer this feature, then you can still add your own logo by adding some PHP code to your functions.php file, installing a plugin or using a theme which offers admin branding customization, built in.
Customizing Login Page Using PHP Code
Its advisable to create a child theme for all your PHP & CSS custom coding so you avoid losing all your customization when you update your theme.
Code For Parent Theme Only
This PHP code only works in a parent theme which i strongly advise against using because it will be lost when you update the theme.
function parent_theme_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/login-demo.png);
padding-bottom: 15px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'parent_theme_login_logo' );
[/code]
<h3>Code For Child Theme Only</h3>
Both these code snippets work in a child themes functions file only and are the preferred method of replacing your login logo.
Simply add either of these code snippets to your child theme's custom functions.php file and upload your logo to your images folder on your web server.
[code]
function wpsites_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_bloginfo( 'stylesheet_directory' ) ?>/images/login-demo.png);
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpsites_login_logo' );
[/code]
Simply modify the padding in the above code to move your image closer to or further away from the login form. You can add more styling below the CSS code if you like.
And here's another method which includes CSS code move your logo as well as adjust the width and height.
[code]
function change_wordpress_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_stylesheet_directory_uri().'/images/login.png) !important;
height: 67px !important; width: 323px !important; margin-left: -40px;}
</style>';
}
add_action('login_head', 'change_wordpress_login_logo');I tested this code on my test site using a child theme for customizing the WordPress default theme, Twenty Eleven.
In this example, i have uploaded the custom login page logo to my /images folder on my web server.
In your case, this path may be different so edit the code accordingly with the correct location of your logo.
Custom Login Page Plugins
If you’re not a coder and haven’t created a child theme, it may be safer and easier to install a plugin instead.
Here’s 3 of the most popular login page plugins for adding your own logo.
Theme Login Page Customization
If you’re using a premium WordPress theme like the Woo theme framework, you’ll be able to customize all your admin pages and change the default WordPress login page logo to your own brand easily.
*Not all premium themes offer this feature.
Changing the default WordPress logo on your sites login page to your own is an important part of branding your site if you are using WordPress admin for guest authors, an affiliate program or another reason.
Hi Brad,
These 2 code snippets did not work on my Metro-Pro theme (Genesis ver 2.1). I use the Code Snippets plugin leaving my original metro-pro functions.php alone.
So,, I just added my logo to the wp-admin\images folder; renamed the wordpress-logo-2x.png file to wordpress-logo-2x_ORIGINAL.png and then renamed my logo file to wordpress-logo-2x.png.
Hello Marcus
All code snippets are tested before i publish them.
Rarely do they not work so its probably due to using the Code Snippets plugin.
Try adding them to your child themes functions.php file which is best practice.
You will lose any changes you make to the WordPress core files which is not recommended.