How to Change WordPress Login Logo

Branding is the key to any successful business. If you drive down the interstate with any child between the ages of four and five I can guarantee more than 60 percent of them will be able to point out a McDonalds. Why? Because McDonalds has built a brand that is recognizable no matter where you are in the United States. To build your brand especially if you are just getting started online you need to have your identity visible. The idea is to work with just your image. If you are using WordPress for your website and don’t have a lot of programming knowledge this may not be an easy thing for you to accomplish. WordPress doesn’t come with a built-in function that allows you to change the login from the standard WordPress login logo to your own. Here we will provide you with a step-by-step guide in how to change the WordPress login logo to your own logo.

You honestly don’t need much to accomplish this task. Of course, you will need a logo with your branding. Make sure your log is at least 312 px wide but it can be as tall as you would like it to be. Your logo can be either PNG or JPG (JPEG). All of these terms may sound foreign to you, but if they do you are probably not designing your logo on your own so your logo design guy or team will know what all this means. Here is a rough explanation. Pixels (px) are what your monitor uses to display an image. It’s just the picture elements that allow someone’s monitor to view your image. These images are saved in a format that is either .png or .jpg/.jpeg.

Upload Image to WordPress

Once you have your image you will need to upload that image to your WordPress site. The easiest way to upload a file to your website is using an FTP client. Filezilla is a free FTP tool that allows you to upload files quickly from your computer to WordPress. You must download and install FileZilla to use it. To upload your logo into your hosting account using FileZilla

1. In order to get logged into Filezilla after the installation you will need some information from your hosting company. The host name, your username, and your password. These are usually setup when you first setup your new website and hosting plan. If you do not know this information you will need to contact you hosting company for this information.

2. Once you are logged in you will see the files that are on your computer on the left hand side of the screen. Locate the location of the folder that contains your logo image.


The Blog Millionaire Podcast

The top rated blogging podcast on iTunes is hosted by Brandon Gaille. He built his blog from zero to 1 million monthly visitors in less than 18 months, and he shares his secret strategies in his award winning podcast. Listen to the Latest Episodes Right Now.

3. On the Right side you will need to locate the exact location where you need to put the logo into your WordPress site files. You will want to locate the image folder for your WordPress theme.

4. You can copy and paste the logo into this folder or you can drag and drop. Filezilla will then transfer the file and tell you that it has been successfully uploaded.

At this point you can log out and close Filezilla, you won’t need it to continue changing the default WordPress logo to your own personal logo. The next thing you will need to do to update the functions.php file.

You will need to log into to your WordPress site by typing your web address and wp-admin (ex. Yourwebsite.com/wp-admin). You will then use your administrative username and password to access the dashboard. On the Dashboard Menu choose Appearance and then Editor. Before you access your editor make sure that you have backed up your database so that if any errors occur you can restore your WordPress site to the way it was before the error occurred.

In the editor it will show your style.css file by default. On the right hand side of the page under templates WordPress has a list of template files that you can customize. Here is where you will find your Theme functions or your functions.php file. Once you click on the file it will display in the window to the left of the Templates section. You are going to change the CSS formatting to show your new logo. Here is the CSS formatting you will need to use. Lastly, you must update the file.

function custom_login_logo() {

echo ‘

h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).’/images/loginlogo.png) }

‘;

}

add_action(‘login_head’, ‘custom_loginlogo’);

Please note that the logo name here is “loginlogo.png ,“ you will need to replace this name with the actual name of your logo. After you update the file you will be able to logout and go back to the login screen to view the changes. Your new logo will appear instead of the default WordPress logo.

Just to Recap

  • You will need to have a logo design ready to go.
  • You will then need to add this logo to the images folder of your WordPress theme.
  • Once the image is in your themes folder you will need to update your functions.php file and update the file to save the changes.

That is really all it takes. Changing the default WordPress login logo to your own logo is a really simple three step process that you can achieve quickly without taking up space with a plugin or creating some labor intensive coding. Once you complete these steps you will be able to have a branded login screen for any one that needs to log into your WordPress site.

Wordpress Speed