Intro
For most people the abysmal excuse for what WordPress calls a login screen it is just an annoying step to get to the dashboard but I rather think of it as the homepage for client access. If you spent the time to build an amazing, beautiful, and immersive site why leave this one aspect as dull as it is when in just a few steps you can make it something you and clients will actually like to visit? Right, there isn’t any reason.
Full Guide
Watch the overview video or keep reading the full article below
Table of Contents
My Reasoning
One of the key reasons I like to customize the login screen other than making it look nice is to brand it, not only for the organization that the website is for to but also for you or the agency that built the site. I think of it as taking pride in your work.
So let’s go through the steps to customize the default WordPress login screen. I’m going to show you how I do it which will require access to your CPanel or equivalent file manager account and a basic knowledge of CSS. I provided a couple links below to help out if you’re not overly familiar with CSS or need a refresher.
There are other avenues like plugins that can do some of the customizations but I found most of them cumbersome and unexceptional. Plus a rule I always follow is, why to install a plugin if you can find a way to do it yourself without the added overhead.
Getting Started
The first three steps are needed to set up the ability to customize the login screen. For whatever reason WordPress or any theme I’ve used thus far don’t give you options to customize the login screen or even just load the style sheet that’s part of every WordPress installation, I guess they don’t think it’s important enough.
Anyway here we go, the first step is to create a new folder in your theme directory called “login”. Of course, you can call it whatever you want just remember the name and location for future reference. I did notice that some themes refused to recognize my new folder for whatever reason. If this happens just put it in the site’s root directory.
Next, in that new folder, create a new CSS file called custom-login-style.css, again you can call it whatever you want just remember it for later.
The third step requires adding code to your functions.php file. Luckily with the release of WordPress 4.9 you can quickly spot any errors in the PHP code but it’s still good practice to back it up non-the less. Here is the code to add.
/*----------------------------------
* Custom Login Screen
*---------------------------------*/
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="LINK TO YOUR STYLE SHEET"/>';}
add_action('login_head', 'my_custom_login');
This code basically tells WordPress to load the style sheet you created onto the WordPress login page.
Remember if the location of the folder or the name of the CSS file is different replace the path on the second line accordingly.
Now the setup is done. From here on out all you have to do is open the CSS file and start CSSing. There is really no limit to what you can do here. I will go over a few of the basic details that I make to all the sites I work on to hopefully give you a good starting point to work off of.
Now the Fun Begins
Of course, first things first, replacing the WordPress logo. WordPress, I love you but you can’t stay here. Override the current logo with one from your media library, preferably a transparent PNG, using the following CSS rules.
.login h1 a {background-image: url(‘wp-content/uploads/2017/10/corp-login.png');
background-size:200px !important;
height:200px;
width:200px !important;}
After you save changes to the CSS file you will need to clear your browser’s cache or use an incognito window to see any updates. The login screen is automatically cached every time.
Here is an example of what I meant by branding the login page for you or the agency. It’s not overpowering and provides a subtle way to show who built and/or powers the site.
If your new logo is not exactly the same size as the original WordPress logo you will have to play around with the value to make sure the whole logo is visible. If you want a large logo you may have to add a negative value margin to move the whole container up.
Next, a white background simply won’t do. To add a full-screen image behind the login forms use the following rules:
body.login {background-color:#14B8E5;
background-image: url(‘LINK TO YOUR IMAGE');
background-repeat:
no-repeat; background-attachment: fixed;
background-position: center;
background-size:cover;}
Of course, you can play around with the settings but with these rules, the image should scale and stay centered on the screen. Ideally, the background image should be at least 1920 x 1080 in size so that it won’t get blurry when it scales for bigger screens.
Those two changes already made a huge difference to the feel of this page. You could stop here, but there are two more minor details that I like to show off and I’ll leave it that.
Adding curved corners and a light drop shadow to the container of the form itself gives it a nice contemporary look, to do this add these rules.
#loginform {border-radius:10px;
box-shadow: 0 0 12px #767676;}
Of course, you can make these values whatever you like.
Here is our final product and I think it looks amazing, the completely different impression from what we started with. Again you can keep going, I also like to change the color of the “Lost your password” and “Back to Blog” links and center them. You can change how the login button looks, the background of text fields, and so on and so on.
Conclusion
I hope with little tutorial helped you peeps out! I’ll be excited to see what you all come up with. If you have questions do not hesitate to leave a comment below!
Helpful Resources
Learn or brush up on your CSS from W3School
Learn how to use the Google Inspect Tool from Google Developers Tools
