Although it’s a quick experience, only visible in the back-end, the default log-in screen can be quite bland. What if I told you there was a way to help improve that, and without the use of plugins? This can help maintain that integrated brand experience, and impress clients.
Having too much plugins can be bad for site performance. Although this is a plugin itself, installing WPCode can allow you to make various customizations without installing hundreds of plugins.
What can WP Code do?
WP Code is quite a unique feature. It allows you to add code snippets ino your WordPress website.
In the old days, you had to edit your websites PHP files, which can be dangerous if you are inexperienced. Often you would need to create backups of your website in case something breaks. But with code snippets, if it detects faulty code, it would not load load the script until it is fixed. Not only that, but it would point to you which line of your code that is causing the issue.
Customizing Your Login
To customize your login screen, you’ll need to use a mix of PHP and CSS. The code to customize your login screen is quite simple. You can easily change your login screen like the one below, or to fit your brand’s needs.
To achieve this, you first will need to install the WPCode Plugin. Once the plugin is installed and activated, you will find “Code Snippets” in the left panel in your admin dashboard below settings. Once there, click “Add New” to create your snippet.
Once there, you will see a variety of commonly used snippets. It’s recommended you enable “Allow SVG Files Upload”, as SVG uploads are disabled by default. To create a custom login, however, select “Add Your Custom Code”.
You will now be in the snippet editor. Most importantly is to first create a title for the snippet, so you easily find it in the future. You’ll then need to change the code type. What you’ll need for this is the “PHP Snippet” option.
The Code
Add the following code under “Code Preview”. The function ID can be flexible, but just make sure that it remains the same throughout the code.
add_action('login_head', 'change_my_login_page');
function change_my_login_page () {
echo '<style>
</style>';}
Between style, you can add your CSS to style the login page. They can be found through Inspecting the page’s element, but for simplicity, here are the key classes for the login page:
/** This sets the background for the login page **/
body {
}
/** This replaces the WordPress Logo in the login page **/
.login h1 a {
}
/** This changes the style of the login form **/
.login form {
}
/** This changes the style of the input field in the login form **/
.login form .input {
}
/** This changes the styling for the button, as well as when you hover over it **/
.wp-core-ui .button-primary {
}
.wp-core-ui .button-primary:hover{
}
/** This changes the color of the "Lost your password" and "Go to site" **/
.login #backtoblog a, .login #nav a {
}
There are a variety of ways to style your login screen. You can reference w3Schools for a guide on CSS properties.
For inspiration, you can view the code of our login screen below:
add_action('login_head', 'change_my_login_page');
function change_my_login_page () {
echo '<style>
body {
background-image:url("https://yellowsunflower.ca/wp-content/uploads/2023/01/yellow-sunflower-field.png");
background-repeat:no-repeat;
background-size:cover;
}
.login h1 a {
background-image:url("https://yellowsunflower.ca/wp-content/uploads/2023/01/ysf-logo.svg");
width:300px;
background-size:300px;
background-position:bottom;
filter: drop-shadow(-1px 0px 5px rgb(0 0 0 / 0.4));
}
.login form {
border-radius:20px;
box-shadow:0px 0px 10px 0px rgb(0 0 0 / 50%);
background-color:#FFE780;
border:none;
}
.login form .input {
border-radius:10px;
background-color:#FFF6D0;
}
.wp-core-ui .button-primary {
background-color:#ffce00;
color:#2e2e2e;
border:none;
box-shadow:0px 0px 2px 0px rgb(0 0 0 / 40%);
}
.wp-core-ui .button-primary:hover{
background-color:#000199;
color:#ffce00;
box-shadow:0px 0px 2px 0px rgb(0 0 0 / 40%);
}
.login #backtoblog a, .login #nav a {
color: #ffffff;
text-shadow:0px 0px 10px #2e2e2e;
}
</style>';}
Make sure to update the images and colors to fit the brand you’re working with.
Once you’re ready, you can click update and togle the Snippet to “Active” to publish your code. Your login screen should now be updated to the brand’s needs. Note that you may need to refresh your cache to view the updated login screen.
Conclusion
Customizing your login screen adds to the overall brand experience, and can help impress your clients. Although there are various plugins that offers these customizations, the implementation through PHP is quite simple, and is a great way to start learning on coding yourself, without relying on plugins.