Custom WordPress Login Screen
Creating a custom wordpress login screen can seem like a daunting task. You probably imagine spending hours or messing with different code and then hoping it all works well together or even you don’t know how to work with code so you assume there is no hope. Well there is a super simple way of achieving this outcome. I will cover how to set this up and also, how to have a specific image stay behind the login box at all times (even when scaling the browser window). Creating a login screen, whether you want basic features or a completely self made layout, is a very simple process. The only necessary item is the plug-in for wordpress called Erident Custom Login and Dashboard. This little plug-in will offer all the features necessary to create your own unique layout and design of your login screen or this works really well for sites for clients. I’ll start off showing you the basics of the plug-in and then a trick to keep an image behind the login box.
Once installed, Erident’s plug-in has a very user-friendly interface. It provides options for the background of the page, a specific logo (instead of the standard WordPress logo), and features for the login box itself. Oh, and one more neat little feature is the ability to change the footer of the dashboard to include your site and copyright information. Let’s dive now into the features of setting up your custom login screen.
1. Login Screen Background
This area gives you the ability to upload an background that either you created or maybe just an image you found. It also allows you to position this background whether you center it vertically and horizontally or top and center. There are many possibilities to choose from. Now, if you have an image to upload that is small and won’t take up the whole page, you can add a background color that will show behind your image and fill the screen. (This section is where you can set up the background image behind the login box, which I will show you soon).
2. Login Screen Logo
This portion allows you to change from the typical wordpress logo above the login box to any custom logo you create. You simply just upload your logo to the media section of WordPress and grab the url of the file location and place it in the Logo Url box. It’s that simple to add your logo.
3. Login Form Settings
This section is all about the login box itself. It allows you to change the width of the box, the copy color, input text color, input box background, link background, shadows, and button. It allows you to change almost everything. This section is nice for when you have a dark background and want only the input fields to show and not the white background.
So, how do I get something to always stay behind the login box? Let me show you one example.
This did not take hours of coding to accomplish and really only took enough time to create the design and upload. The trick is that this image is simply uploaded as the login screen background. What you have to do is copy the url of the location of the image and then in the position boxes it needs to be centered horizontally and top vertically. Also, you might have to play around with your image and add some space on the top so that it gets pushed down behind the login section. Once you do that just remove all the form settings not needed and you get the above effect. Pretty simple and really looks impressive for any client. It also provides a unique and custom feel for them.
Below is another example as well as the link to this amazing plug-in. Any questions you can leave a comment and feel free to drop a link to your unique login screens.
No Comments