The default admin login page of WordPress is plain and bored, giving users a bad impression when they login in your site. Many webmasters especially those have a large group of members want to customize the default login page to a stunning one so that their members can be attracted at first sight. On the meanwhile, custom login page also indicates great reliability and professionalism on your site.
However, it’s a challenge to customize the admin login page, especially for people who have little technical knowledge and coding skills. To help our readers complete the thing easily, we come out the typical codes to beautify the default admin login page of WordPress. With the careful explanations and detailed steps, even a newbie can achieve the process successfully.
Note that we customize the page to login with the code, which enables you to flexibly change what you don’t like. This way needs HTML and CSS knowledge, making sure you are familiar with HTML and CSS before start.
A stunning background always give users a fresh impression. To replace the default background, you are able to modify the background color or upload a custom image as the background. If you want to change the background color, replace the color code in the next line which is contained in /wp-admin/css/wp-admin.min.css file.
If you hope to upload a custom image as your background, you can add the image under wp-admin/images folder and refer it in CSS.
Customize Login Logo
The logo stands for your brand, which can be displayed on important places to showcase your site authority. In simple, you can customize login logo by changing the default one or uploading a custom image using CSS.
To replace the default login logo, you should first find it on /wp-admin/images/wordpress-logo.png. Create your own logo with the default size 274×63 px, style it as wordpress-logo.png and change it with the default one.
To utilize CSS to add a custom logo, you can name the logo of your own as a different name, such as custom-wordpress-logo.png, and then upload it to /wp-admin/images. In the next, you can cite the image URL in the /wp-admin/css/wp-admin.min.css file, in the following code line. Note that you should change the background-size, width, height, and url with the current value.
In addition, the default login logo will link to WordPress.org. You can customize it to link to your own site by adding the below code into the functions.php file.
Customize Login URL
By default, WordPress generates the admin URL like http://www.yoursite.com/wp-login.php, which is the same on all websites and known by everyone if you don’t customize it. In this condition, the website can be easy to access if you use a weak password or user name, which may hurt your site security and reputation.
To be honest, it’s easy to customize login URL and you can manage it by using a helpful plugin. We have introduced the detailed guidelines in the previous post, read it for careful steps.
Customize Login Form
Now, we are going to customize the look of the login form. In general, we can alter the text color, login form color, front-weight, ,border, and more. You can change all these elements in wp-admin.min.css file under /wp-admin/css and find the following code.
Suppose you are apt at CSS, you can effortlessly customize the style of login box by changing the font-weight, background, border, padding, and other elements.
How About Using Plugin to Achieve the Same Goal?
The use of code is a professional and flexible method to customize WordPress login page. However, that is not great for some new beginners lacking understanding of coding stuff. That’s why we introduce the second method to make a hit, namely, using Custom Login plugin. This plugin helps user to customize admin login page without using any code.
Plugin URL: https://wordpress.org/plugins/custom-login/
Search and install Custom Login plugin via your WordPress dashboard. And then, find the new option “Custom Login” under Settings. Go to Settings > Custom Login and here you come to a setting page with a list of options for admin login page design.
The first section “HTML” is where to set the background for your login page, in terms of background color, image, position, size and repeat. Select a color from the color scheme and determine whether to make it opacity. That depends.
Perhaps, you can select an elegant image from the media library as the background image. That makes the login page unique and attractive. Decide the background position from a list of options. Finally, set the size and repeat for the login page background.
Set up the custom login page logo. Uncheck the option “Hide the WP logo”, or the logo cannot be displayed on your login form. Browse the logo image you’ve uploaded to the media library and then select it. Enter the desired width and height for this logo. And then, set the background position, repeat and size as needed.
Customize login form. You are allowed to customize login form width and background according to personal needs. The Login Form section includes a list of settings for login form customization. The default width of login form is 320 pixels and that can be changed if needed.
Set the background color or select an image as the login form background. And then, set the background position, repeat and size as what you have done in the previous steps. Set the border size, color and radius as needed. Also, you can customize the box shadow and shadow color if not satisfied with the default settings.
The Miscellaneous section allows you to select a label color. Besides, if there is an anchor shown under the login form, you are required to customize the text color via “Below Form anchor” section.
The left settings, in terms of custom CSS, custom HTML and custom jQuery, are designed for users who have a particular knowledge of jQuery, HTML and CSS. Perhaps, you can leave those options default and then click “Save Design Settings” button to confirm all settings.
Log out your WP admin and then log in. Check if there is something wrong with the admin login page.