nightwolfdevThe WordPress login form displays the WordPress logo and clicking it goes to the WordPress website. Within the admin area, it also displays the WordPress logo in the toolbar. Let’s learn how to display your own logo instead!
Login Form
Logo
To change the logo appearing on the login form, we’ll utilize the login_head action hook. Navigate to Appearance > Theme Editor and open the template file in your theme called functions.php. Add the following code to it.
add_action( 'login_head', 'my_custom_login_logo' );
The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. It will output some CSS that will override the default WordPress logo. Make sure to change the path to your logo file.
// Override login logo.
function my_custom_login_logo() {
echo '<style type="text/css">
body.login div#login h1 a {
background-image:url(' . get_bloginfo('template_directory') . '/path/to/logo) !important;
background-size: inherit;
height: 40px;
width: 100%;
}
</style>';
}
Title
If you hover your mouse over the logo, you’ll notice it mentions WordPress. Let’s change that to the name of your website instead by using the login_headertext filter hook. Navigate to Appearance > Theme Editor and open the template file in your theme called functions.php. Add the following code to it.
add_filter( 'login_headertext', 'my_custom_login_title' );
The second parameter in the add_filter function is the name of the function you want to call. Let’s create that function now. It will return the text we want to display as the title.
// Override login title
function my_custom_login_title() {
return 'NightWolf Software Development';
}
Url
If you click on the logo, you’ll notice it goes to WordPress’ website. Let’s change that to your website address by using the login_headerurl action hook. Navigate to Appearance > Theme Editor and open the template file in your theme called functions.php. Add the following code to it.
add_action( 'login_headerurl', 'my_custom_login_url' );
The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. It will return the url that should be visited when clicking the logo.
// Override login url.
function my_custom_login_url() {
return 'https://nightwolf.dev';
}
Admin Toolbar
To change the logo appearing in the admin toolbar, we’ll utilize the wp_before_admin_bar_render action hook. Navigate to Appearance > Theme Editor and open the template file in your theme called functions.php. Add the following code to it.
add_action( 'wp_before_admin_bar_render', 'my_custom_admin_bar' );
The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. It will output some CSS that will override the WordPress logo. Make sure to change the path to your logo file.
// Override admin bar.
function my_custom_admin_bar() {
echo '<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('template_directory') . '/path/to/logo) !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>';
}
