Change WordPress login logo without plugins in this simple tutorial. There are several reasons why you would want to change the default WordPress login logo of your WordPress site, maybe your building a site for a client, you want members registering for your site to see a custom logo or you simply want to add some personal eye candy when logging into your site.
Whatever the reason the WordPress login logo is very simple to change without using any additional plugins by simply creating your image and adding some code to your WordPress themes functions.php file. This code will also now make it that when the login logo is clicked your are redirected to your sites homepage, the default WordPress login logo redirects your to WordPress.org.
Wrong Way
The original WordPress login logo image is located in the wp-admin/images folder of your WordPress install, if you simply overwrite that image future WordPress updates have the potential to overwrite your custom logo and revert it back to it’s default install logo. I have seen this being done by site owners in the past, it’s always better never to edit any WordPress core files even images so please don’t use this method.
Right Way With functions.php Code
Firstly you will require an image that you have created of your custom WordPress login logo, that image should be the dimensions below that are the same as the original and of transparent background .png format.
- Image Width: 274px
- Image Height: 63px
Name your image custom-login-logo.png and save it to your WordPress themes images folder.
Next open your themes functions.php file and copy the code block below and past it into your functions.php file at the very bottom, save the file. This code adds a filter to the WordPress login_head function and replaces the default logo with your custom logo.
add_action( 'login_head', 'wp_custom_login');
function wp_custom_login() {
echo '<style type="text/css">
h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/custom-login-logo.png' . ') !important; margin-bottom: 10px; }
padding: 20px;}
</style>
<script type="text/javascript">window.onload = function(){document.getElementById("login").getElementsByTagName("a")[0].href = "'. site_url() . '";document.getElementById("login").getElementsByTagName("a")[0].title = "Go to site";}</script>';
}
Now visit your WordPress login page and you should now see your custom WordPress login logo being displayed. If you don’t see your new logo try clearing your browser cache and refreshing the page several times. If you still don’t see your new login logo double check your image path and logo file name again.
As always any improvements or questions please leave a comment.
Leave a Reply