WordPress customize wp-admin login page logo using functions php

WordPress customize wp-admin login page logo using functions php

When developing a WordPress website or blog a nice touch is to customize the wp-admin login page logo. You can replace the default WordPress logo with one of your own using the functions.php file. This article will show you how to do that.

Here is what you will need to accomplish this bit of branding.
WordPress customize wp-admin login page logo using functions php.

You will need FTP access to the WordPress site.
I use FileZilla FTP client.

Next you will need the logo you want to use to replace the default WordPress wp-admin login page logo.

I also recommend using a Child Theme for your WordPress.
Using a Child Theme allows you to make customization and not loose them after updating WordPress.
So use a Child Theme!
That’s all you will need.
Oh, and a bit of html and php code.

The code is further down the article

You can either view the video below or follow the step by step instructions below.

Let’s get started with WordPress customize wp-admin login page logo using functions php.

First FTP into the WordPress installation and go to /wordpress/wp-content/themes/child-theme directory.
You want to create a directory inside the child-theme directory named “images” without the quotes where you will upload your new logo image file.

Next upload your logo image to this /wordpress/wp-content/themes/child-theme/images/ directory.
Write down or remember the new logo’s image dimensions and file name. You will need them when configuring the code in the function.php file.
Log out of your FTP session. We are done with that part.

Next login to the WordPress/wp-admin/ page with administrator privileges. Notice the default WordPress logo on the wp-admin page.
You won’t see it again.

Go to Appearance | Editor

Make sure your Child Theme is selected to edit.
Then on the right side of the page select the Theme Functions | functions.php file to edit.
Scroll to the end of the functions.php file to add the code from below.

Add this code to your functions.php file.

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

// Change admin login logo link
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

// Change Title description
function my_login_logo_url_title() {
return 'Title description on hover';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Next we need to edit the code for our own use.
We need to rename the logo image file to your logo’s image file name.
Edit image file name logo.jpg to your image file name.

<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.jpg);

Next edit the height, width, and background-size entries to the size of your image file.

height:72px;
width:300px;
background-size: 300px 72px;

Finally edit the

function my_login_logo_url_title() {
return 'Title description on hover';

Replace Title description on hover between the single quotes with your Title description.
Click Update file to save the changes.

Logout of WordPress.

You should now see the custom logo on the wp-admin login page.

That’s it for our WordPress customize wp-admin login page logo using functions php instructions.
I hope your found it useful.
As always, thanks for stopping by Zeros Ones.




Be sure to visit the Zeros Ones YouTube channel and give us a like or subscribe to our channel.
Follow us on Twitter
Follow us on Facebook