How to change wordpress login logo – Customizing wordpress login page
Are you creating an elegant wordpress site for your client and willing to change the wordpress login logo? Changing the default wordpress logo and customizing the login page shows some uniqueness. Especially if you are running a multi author blog then by replacing wordpress login logo with yours adds a brand. Here we will see how to change wordpress login logo that is we show you how to customize the login page completely.
By default in wordpress login screen you will see the wordpress logo above the form and the form looks plain white in color. There are several plugins in which you can easily customize the login page and change the wordpress logo. Here in this tutorial we will see how to change wordpress logo in wp-admin page without using a plugin.
Customizing wordpress login page / screen (Step by Step)
In this tutorial we will show you on changing the following elements:
- Changing wordpress login logo.
- Changing login logo link and text attribute.
- Changing wordpress form color and text color.
- Changing background color or adding a background image.
Related: How to password protect wordpress admin directory
How to change wordpress login logo
There are two simple ways to change the wordpress login logo. One is by replacing the default logo image. Another one is by adding a custom logo image using CSS.
Method 1
Open your wordpress directory using cPanel or FTP. Now open wp-admin/images directory and find out wordpress-logo.png. Note that the default wordpress logo size is 274 X 63. So create a logo image of 274 X 63 in size, name it as wordpress-logo.png and replace with default wordpress logo.
(Setup FileZilla for easy file sharing)
Method 2
Create your own logo image of any size and name it as wp-admin-logo.png. Now upload the image to wp-admin >> images directory using FTP or cPanel. Now open wp-admin.min.css in wp-admin >> CSS directory. The CSS file is a compressed one and so it looks messy. We are going to modify the wordpress login page using CSS. So to better understand the CSS go to code beautifier and beautify the CSS and paste it in wp-admin.min.css file. Now find out the following line in CSS.
.login h1 a {
background-image:url(../images/wordpress-logo.png);
background-size:274px 63px;
background-position:top center;
background-repeat:no-repeat;
width:326px;
height:67px;
text-indent:-9999px;
outline:0;
overflow:hidden;
padding-bottom:15px;
display:block;
}
In the above code replace wordpress-logo.png with wp-admin-logo.png. Also change the background-size that you are using for your custom logo. The image does not align properly, to make it look better try changing the values for position, width, height and padding. Once done save changes and preview your wordpress login screen.
Hope this helped you on how to change wordpress login logo. Now we will move on to change the logo link and text attribute in login screen.
How to change wordpress login logo link and text attribute
You have changed the wordpress logo, but when you hover on it you will see powered by wordpress text linking to wordpress.org. To change the wordpress login logo link open wp-login.php file in your wordpress root directory. Now you will see a piece of line like this. Just change the login URL and login title. Once done save wp-login.php file.
if ( is_multisite() ) {
$login_header_url = network_home_url();
$login_header_title = $current_site->site_name;
} else {
$login_header_url = __( 'http://wordpress.org/' );
$login_header_title = __( 'Powered by WordPress' );
}
How to change wordpress login form color and text color
To change the login form background color open wp-admin.min.css and find the following line. Now change the background:#fff; with your color code and save changes.
.login form {
margin-left:8px;
font-weight:400;
background:#fff;
border:1px solid #e5e5e5;
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
padding:26px 24px 46px;
}
To change the login form text color, just replace the login label color code in wp-admin.min.css.
.login label {
color:#777;
font-size:14px;
If you are good in CSS then you can completely change the wordpress login box style.
Adding background image in wordpress login screen
To change the wordpress login page background color, just replace the color code in following line (in wp-admin.min.css).
body.login {
background:#fbfbfb;
min-width:0;
}
If you wish to add a background image for your login screen then just add your BG image in wp-admin/images folder and call from your CSS.
body.login {
background-image:url(../images/your-bg-image.jpg);
min-width:0;
}
Hope this helped you to change wordpress login logo and customize wordpress login page manually. Now we will see some plugins to customize wordpress login screen.
WordPress plugins to customize login screen
Are you are looking for a solution to completely alter the wp-admin page? Then we suggest you to go for a plugin.
Pathway – Custom wordpress login page
You can easily customize your wordpress login page using pathway.
- Easily add custom background color and image
- Add custom field border & round & background color
- Add custom form border & background color and image
- Customize field text color (active, hover and focus)
- Option to change button color
- Easily add custom logo and copyright text in login screen
- Documentation and more options.
Login layout customize
Customize your wordpress login screen layout flexibly using Login layout customize
- Justify right and left for your login form
- Adds 2 column header and footer in login form
- Place menu/images/text by just dragging and dropping
- Easily hide login link and lost password link below the form
Download Login layout customize
Wp nice screen login
Customizing wordpress login admin page made simple with this plugin
- Change wordpress logo and add custom logo image
- Change the logo link and title attribute
- 5 different themes to choose from
- Add copyright message below the form
- Option to show and hide shake effect
- Option to show and hide back to blog link and more
Hope this post helped you on how to change wordpress login logo. Also Customizing wordpress login page made simpler with these plugins. Share and leave your comments below. To get more updates subscribe to our RSS feeds.