Many WordPress sites overlook the importance of their login page, yet it’s the first interaction users have with your site. A default or poorly created WordPress custom login page can detract from user experience, weaken security, and fail to reinforce brand identity.
A well-designed login page, on the other hand, can leave a lasting impression, enhance security, and contribute to a cohesive brand experience.
In this article, I will explain why customizing your WordPress login page is important, along with three effective methods: using a custom plugin, modifying the functions.php file, and applying custom CSS.
Why Do We Need a WordPress Custom Login Page?
You might be wondering why customizing your login page is worth the effort, especially with a long to-do list. However, there are compelling reasons to invest time in this area:
1. Website Branding & Design
The login page is a crucial first impression. It should align with your website’s overall look and feel. By customizing colors, fonts, logos, and layout, you can create a cohesive brand experience for your users, especially loyal customers.
2. Improved User Experience
A well-designed login page enhances user experience. A clean and simple interface encourages user engagement, while a cluttered or confusing one can drive users away. Investing in a positive login experience can significantly impact user satisfaction.
3. Better Website Security
Protecting your website is essential. A custom login page is a valuable security measure. It makes your site less vulnerable to attacks by obscuring the default WordPress login page and changing its URL. This reduces the risk of unauthorized access and builds user trust.
Methods to Customize the Default wp-login.php Page
There are several ways to modify the WordPress login page. To customize the default login page without creating a separate page, we’ll focus on three easy methods:
- Creating a Custom Plugin
- Modifying the functions.php File
- Applying Custom CSS
Build and Test Custom Login Pages Without Limits!
Impress your visitors from the start with a custom login page. Use Cloudways to experiment and find the perfect design.
Method #1: Customize wp-login.php With Custom Plugin
Creating a custom plugin to modify the WordPress login page isn’t complex if you have a clear vision. Let’s build a custom plugin to tweak the default login page.
If you’re using Cloudways, you can easily set up a new application to test your plugin before applying it to your live site.
– Adding a WordPress App on Cloudways
Once your application is set up, you can find essential details like the application URL and database name in the Application Management tab on Cloudways.
With your application ready, you can now see the default WordPress login page for your site.
– Cloudways WordPress Default Login Page
To create a custom plugin, we’ll need to access your server using SSH. Cloudways users can easily do this through the Launch SSH terminal option under the Server Management tab.
For detailed instructions on SSH with Cloudways, check out this guide.
– SSH Terminal on Cloudways
Once you have SSH access to your server, navigate to your WordPress plugin directory. Typically, this is located at /home/master/applications/appname/public_html/wp-content/plugins.
Create a new directory within the plugins folder named custom-login-page (or any name you prefer). Inside this directory, create a new PHP file called custom-login-page.php. This will be the core of your custom login page plugin.
💡 Note: To include images on your login page, create an images subdirectory within the custom-login-page directory. Upload your desired images to this folder using SFTP or a similar method.
– Custom Login Plugin Directory
Here’s the code for custom-login-page.php file:
<?php
/*
This is a custom plugin to modify default WP Login page, enjoy!
*/
function custom_login_styles() {
echo '<style>
body.login {
background-color: white; /* Set background color to white */
position: relative; /* Enable positioning for child elements */
overflow-x: hidden; /* Prevent horizontal overflow */
}
body.login h1 a {
background-image: url(' . plugins_url('cloudways-logo.png', __FILE__) . '); /* Logo */
width: 320px;
height: 120px;
background-size: contain;
display: block;
}
.login form {
background-color: rgba(255, 255, 255, 0.9);
padding: 26px;
margin: 2em auto; /* Center the form */
max-width: 400px; /* Form width */
border: 1px solid #e5e5e5; /* Optional: Add a subtle border */
box-shadow: 0 1px 3px rgba(0,0,0,.13); /* Optional: Add a subtle shadow */
position: relative; /* Enabling positioning for child elements */
z-index: 1; /* To check the form is above the images */
}
.login label {
font-size: 16px; /* Label font size */
color: #2151bf; /* Change font color */
}
.login input[type=text],
.login input[type=password] {
font-size: 18px; /* Input font size */
color: #2151bf; /* Change font color */
}
.login #wp-submit {
background-color: #2151bf; /* Change button background color
*/
color: #fff; /* Button text color */
font-size: 18px; /* Button font size */
}
.login input[type=text]:focus,
.login input[type=password]:focus {
border-color: #008ec2; /* Change border color on focus */
outline: none; /* Remove default outline */
}
.login .message {
color: #2151bf; /* Change font color to #2151bf */
}
/* Images */
.shark-left, .shark-right {
position: absolute; /* Use absolute positioning */
top: 50%; /* Center vertically */
transform: translateY(-50%); /* Adjust for vertical centering */
width: 120px; /* Adjust width as needed */
height: 120px; /* Adjust height as needed */
z-index: 0; /* Ensure sharks are behind the form */
background-size: contain;
background-repeat: no-repeat;
}
.shark-left {
left: 1000px; /* Position to the left */
background-image: url("https://wordpress-xxxxxx-xxxxxx.cloudwaysapps.com/wp-content/plugins/custom-login-page/shark-left.png"); /* Left shark image */
}
.shark-right {
right: 1000px; /* Position to the right */
background-image: url("https://wordpress-xxxxxxx-xxxxxxx.cloudwaysapps.com/wp-content/plugins/custom-login-page/shark-right.png"); /* Right shark image */
}
</style>';
}
add_action('login_head', 'custom_login_styles');
// Add shark images to the login page
function add_shark_images() {
echo '<div class="shark-left"></div>';
echo '<div class="shark-right"></div>';
}
add_action('login_enqueue_scripts', 'add_shark_images');
Once it’s all done, we will activate the plugin to test the output. You can activate the plugin via CLI or your website admin dashboard.
– Custom Login Plugin Directory
You should now see the updated WordPress login page reflecting the changes you’ve made.
Feel free to modify the code further to match your specific website requirements. The provided code serves as a starting point for your customization.
– Shark Themed Login Page
Method #2: Customize wp-login.php With functions.php File
To modify the default WordPress login page using your theme’s functions.php file, it’s crucial to create a staging environment to avoid breaking your live site. Cloudways users can easily set up a new application for testing.
Once you’ve accessed your new application via SSH, identify the active theme. In this example, we’ll use twentytwentyfour.
Navigate to the theme’s directory, typically found at /home/master/applications/appname/public_html/wp-content/themes/twentytwentyfour.
Open the functions.php file using a text editor. Add the desired code at the end of the file.
💡 Note: Directly editing functions.php can be risky. Consider creating a child theme to isolate your customizations and prevent issues during theme updates.
– WordPress Theme Directory
Here’s the code for functions.php file:
// Add custom CSS to the login page
function custom_login_styles() {
?>
<style type="text/css">
body.login {
background-color: #141414; /* Dark background*/
color: #ffffff; /* White text color */
font-family: 'Arial', sans-serif; /* Font style */
}
.login h1 a {
background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png'); /* Your logo if needed */
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 80px; /* Adjust height */
display: block;
margin: 0 auto;
}
.login form {
background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white background */
padding: 40px;
border-radius: 10px; /* Rounded corners */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Shadow for depth */
margin: 0 auto; /* Center the form */
max-width: 400px; /* Set a maximum width for the form */
}
.login label {
color: #ffffff; /* White label text */
}
.login input[type="text"],
.login input[type="password"] {
border: 1px solid #ffffff; /* White border for inputs */
border-radius: 5px; /* Rounded corners */
padding: 10px; /* Padding for inputs */
width: 100%; /* Full width */
margin-bottom: 20px; /* Space between inputs */
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff; /* White text color */
}
.login #wp-submit {
background-color: #e50914; /* red */
border: none; /* Remove border */
color: #ffffff; /* White text color */
cursor: pointer; /* Pointer on hover */
padding: 10px; /* Padding for button */
width: 100%; /* Full width */
border-radius: 5px; /* Rounded corners */
}
.login #wp-submit:hover {
background-color: #f40612; /* Red on hover */
}
#nav {
text-align: center; /* Center the navigation links */
font-size: 12px; /* Make the font smaller */
margin-top: 20px; /* Space above the links */
}
#nav a {
color: #e50914; /* Red */
text-decoration: none; /* Remove underline */
}
#nav a:hover {
text-decoration: underline; /* Underline on hover */
}
</style>
<?php
}
add_action('login_head', 'custom_login_styles');
The provided code will modify the default appearance of the login page. You can now customize the CSS to match your desired look.
– Black Login Page Design
Method #3: Customize wp-login.php With Custom CSS
While injecting custom CSS into the wp-login.php file can offer a high level of customization for your WordPress custom login page, it’s essential to approach this method with caution. Modifying core WordPress files directly can lead to issues, especially if you’re not proficient in CSS and WordPress development.
To safely experiment with this method, it’s strongly recommended to create a staging environment. Cloudways users can easily set up a new application for testing purposes.
Once you have a staging site ready, you can access it and identify the exact path to your wp-login.php file. Typically, it’s located in your WordPress root directory.
💡 Note: Before making any changes, create a backup of the wp-login.php file and rename it with a suffix like wp-login-original.php. Also, always test your changes thoroughly on the staging site before implementing them on your live website.
– WordPress Default Login Page
Next, navigate to the public_html folder of your application. This is where you’ll find the wp-login.php file.
– WordPress Core Directory
You’ll need to place the provided code directly between the opening and closing <head> tags of your wp-login.php file. This is typically located at the very top of the file.
– Login Page HTML Code
Locate the existing code within the <head> section of your wp-login.php file and replace it entirely with the new code provided.
Here’s the code:
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php echo includes_url('css/login.css'); ?>" type="text/css" />
<style>
body.login {
background-color: #ffffff; /* Complete background white */
font-family: Arial, sans-serif; /* Change font */
}
.login h1 {
text-align: center; /* Center the logo */
margin-bottom: 20px; /* Space below the logo */
}
.login h1 a {
background-image: url('<?php echo get_stylesheet_directory_uri(); ?>'); /* Add your logo as required */
background-size: contain;
background-repeat: no-repeat;
width: 100%; /* Make the logo full width */
height: 80px; /* Adjust height */
display: block;
}
.login form {
background-color: #d3d3d3; /* Grey background for the form */
padding: 26px;
border-radius: 5px; /* Rounded corners */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */
margin: 0 auto; /* Center the form */
max-width: 400px; /* Set a maximum width for the form */
}
.login label {
font-weight: bold; /* Bold labels */
color: orange; /* Change label color to orange */
}
.login input[type="text"],
.login input[type="password"] {
border: 1px solid #ddd; /* Border for inputs */
border-radius: 3px; /* Rounded corners */
padding: 10px; /* Padding for inputs */
width: 100%; /* Full width */
}
.login #wp-submit {
background-color: #007cba; /* Button color */
border: none; /* Remove border */
color: #fff; /* Text color */
cursor: pointer; /* Pointer on hover */
padding: 10px; /* Padding for button */
width: 100%; /* Full width */
}
.login #wp-submit:hover {
background-color: #006ba1; /* Darker button on hover */
}
.custom-message {
color: orange; /* Change custom message font color to orange */
text-align: center; /* Center the message */
margin-bottom: 20px; /* Space below the message */
}
#nav {
text-align: center; /* Center the navigation links */
font-size: 12px; /* Make the font smaller */
margin-top: 20px; /* Space above the links */
}
#nav a {
color: #007cba; /* Change link color */
text-decoration: none; /* Remove underline */
}
#nav a:hover {
text-decoration: underline; /* Underline on hover */
}
</style>
</head>
The provided code will produce a basic style for your login page. Feel free to experiment with different CSS properties and values to achieve your desired look.
– Initial Login Page Design
Secure Your WordPress Login Page
While customizing your login page is important, security should also be a priority. Here are a few tips to secure your WordPress login page:
- Limit Login Attempts: Use a plugin to limit the number of login attempts from a single IP address.
- Use Two-Factor Authentication: Adding an extra layer of security can help protect against unauthorized access.
- Change Login URL: Consider using a plugin to change the default login URL from /wp-login.php to something different.
Summary
This article has shown three different methods to customize your WordPress login page without the complexities of creating separate pages or redirects.
By either using a custom plugin, modifying the functions.php file, or applying custom CSS, you can have your WordPress custom login page to seamlessly align with your brand identity and enhance the overall user experience.
With the knowledge and techniques provided, coupled with the reliability of a managed hosting platform like Cloudways, you’re equipped to create a login page that not only functions effectively but also leaves a lasting impression.
Frequently Asked Questions
Q. What are the advantages of using a custom plugin for login page customization?
A. A custom plugin offers several benefits. It keeps your customizations isolated from your theme, making it easier to maintain and update. Additionally, you can reuse the plugin on different WordPress installations.
Q. Is it safe to modify the core wp-login.php file?
A. Modifying core WordPress files is generally not recommended. It can lead to issues during updates and troubleshooting. If you must make changes, it’s crucial to create a backup and test thoroughly on a staging site before implementing them on your live website.
Salwa Mujtaba
Salwa Mujtaba is a Technical Content Writer at Cloudways. With a strong background in Computer Science and prior experience as a team lead in Cloudways Operations, she brings a deep understanding of the Cloudways Platform to her writing. Salwa creates content that simplifies complex concepts, making them accessible and engaging for readers. When she's not writing, you can find her enjoying good music, reading a book, or spending quality time with her family.
