By default the WordPress logo and subsequent wordpress.org URL is placed on your login page. If you’re looking for a way to change this to be more line with your own branding and style there are a number of plugins that can achieve this for you.
You will however become dependent on these plugins which may not be updated in the future and compatible with future releases of WordPress. To avoid using a plugin you could also edit the core WordPress files related to the login page but you will also lose this customisation if you update your WordPress Version.
To mitigate the risk of losing our shiny new logo we are going to add and call two new functions in our Theme’s function.php file.
Our first function will replace the WordPress logo with a logo hosted on our own site as below:
To mitigate the risk of losing our shiny new logo we are going to add and call two new functions in our Theme’s function.php file.
Our first function will replace the WordPress logo with a logo hosted on our own site as below:
<?php
function my_login_logo() {
?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(https://YOURDOMAIN.COM/logo.png);
padding-bottom: 30px;
}
</style>
<?php
} add_action( 'login_enqueue_scripts', 'my_login_logo' );
?>
function my_login_logo() {
?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(https://YOURDOMAIN.COM/logo.png);
padding-bottom: 30px;
}
</style>
<?php
} add_action( 'login_enqueue_scripts', 'my_login_logo' );
?>
The function named my_login_logo references the the CSS styles where we have specified a URL of an image to be set as the background image and just applied some additional padding to the bottom of this. You can of course go nuts with your styling but we’ll keep it simple for the purpose of this snippet.
Our second function will update the URL to go back to our homepage as below:
Our second function will update the URL to go back to our homepage as below:
function my_login_url($url) {
return 'https://YOURDOMAIN.COM';
}
add_filter( 'login_headerurl', 'my_login_url' );
return 'https://YOURDOMAIN.COM';
}
add_filter( 'login_headerurl', 'my_login_url' );
The function named my_login_url is returning our Website URL as a value which it will navigate to when the logo we added before (or the default WordPress Logo) is clicked. Check out our Youtube Video below for further information.
Callum Galway
Callum has been involved in web and IT services since 2012. He has extensive experience with WordPress and System Administration and is your first point of contact with Solution 16.
