Creating a custom login page for your WordPress website is one of the easiest ways to ensure bots can’t find it. For some people, changing your login URL with a plugin is a quick and simple way to do this if you just want to change the URL.
But for others with more technical knowledge, and for those that want to customize the page itself, creating a custom login without the use of a plugin is possible. In this article, we’ll guide you through different methods to customize your login page without any plugins.
- WordPress Default Login Page
- Why Should You Create a Custom Login Page?
- Customize WordPress Default Login Page
- Create a New Custom Login Page
WordPress Default Login Page
By default, you can access the WordPress login page by adding /login/, /admin/, or wp-login.php to the end of your site URL. You should reach this login screen when you visit this URL.
As you can see, the WordPress login page contains the following elements:
- Default background
- The WordPress logo
- Input fields (username and password)
- The Remember Me check box
- The Submit button
- The Lost Your Password link
- Back to link
What if you want to replace this generic page with a custom one, perhaps for branding purposes?
Why Should You Create a WordPress Custom Login Page?
Custom login pages can give a much better user experience. If you’re running a small business that has a few users to log in to your site, you can absolutely use the WordPress default login page.
However, if your site is an online store, letting customers log in to your site via the default gateway isn’t a good call. Best practice is to make the login page consistent with your website theme and style.
Another benefit of having a WordPress custom login page is enhancing your site’s security. By changing the default WordPress login URL, unwelcome users can’t get to your admin login page easily. This helps avoid unwanted attacks on your site from bots.
Customize WordPress Default Login Page
Customize Login Page Logo
To replace the WordPress logo, simply add the following code snippet to your (child) theme’s functions.php file.
function ppwp_custom_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://your-website.com/path-to-your-logo.png);
height: 100px;
width: 300px;
background-size: 300px 100px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action('login_enqueue_scripts', 'ppwp_custom_login_logo');
This action will replace the logo only, so when clicking on your logo, you’re still redirected to the WordPress page.
To redirect users to your site instead, add the following code:
function ppwp_custom_login_url() {
return home_url();
}
add_filter('login_headerurl', 'ppwp_custom_login_url');
function ppwp_login_logo_url_title() {
return 'Your Site Name';
}
add_filter('login_headertext', 'ppwp_login_logo_url_title');
Remember to replace ‘Your-Website’ with your actual site name. The custom logo on your login screen will now link to your site’s home page.
Disabling the WordPress Login Page Language Switcher
WordPress 5.9 introduced a feature allowing users to select languages when logging in to your site.
This is useful for multilingual sites. However, if your website is available in a single language, you might want to disable this function to simplify your login form.
To disable the language switcher, simply add the following code snippet to your (child) theme’s functions.php file or Code Snippets plugin.
add_filter( 'login_display_language_dropdown', '__return_false' );
Create a New WordPress Custom Login Page
If you want to do more than just change logos and links, you can create an entirely new login page to replace the WordPress default one.
Follow these steps below. Note that this guide requires basic coding knowledge. If you’re not familiar with code, consider using plugins instead.
Important: Always back up your site before making these changes.
Step 1: Create a New Template File
Go to Appearance > Theme File Editor. Under the template-parts section, add a new .php file and name it something descriptive, such as custom-login-page.php.
First, add this line to your custom template file:
<?php /* Template Name: Custom Login Pages */ ?>This makes your PHP file a page template. You’ll see this template name when editing pages in the WordPress admin area.
Step 2: Customize Your Created Template File
Next, add PHP code to create a complete login form:
<?php
/**
* Template Name: Custom Login Page
*/
get_header();
if (!is_user_logged_in()) {
$args = array(
'redirect' => admin_url(), // redirect to admin dashboard
'form_id' => 'custom_loginform',
'label_username' => __('Username:'),
'label_password' => __('Password:'),
'label_remember' => __('Remember Me'),
'label_log_in' => __('Log Me In'),
'remember' => true
);
wp_login_form($args);
}
get_footer();Redirect wp-login.php to Custom Login Page
You’ve now created the custom login page. However, users can still access the WordPress default login page by typing wp-admin or wp-login.php after your site URL.
To prevent this, you need to redirect users from the WordPress default login URLs to your custom page. Add the following code to your child theme’s functions.php or use the Code Snippets plugin:
function redirect_login_page() {
// Replace '/login/' with the slug of your custom login page
$login_url = home_url('/login/');
$url = basename($_SERVER['REQUEST_URI']); // get requested URL
if (isset($_REQUEST['redirect_to'])) {
$url = "wp-login.php";
}
if ($url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_url);
exit;
}
}
add_action('init', 'redirect_login_page');Login Error Handling
After creating a custom login page, users who enter correct login details will be directed to the dashboard. However, failed login attempts will be redirected to the WordPress default login page.
To handle failed login attempts and keep users on your custom page, add the following code to your child theme’s functions.php file:
// Start a session to store error codes
function start_session() {
if (!session_id()) {
session_start();
}
}
add_action('init', 'start_session', 1);
function error_handler() {
// Replace '/login/' with the slug of your custom login page
$login_page = home_url('/login/');
global $errors;
$err_codes = $errors->get_error_codes(); // get WordPress built-in error codes
$_SESSION["err_codes"] = $err_codes;
wp_redirect($login_page); // keep users on the same page
exit;
}
add_filter('login_errors', 'error_handler');Next, add the following code to your custom-login-page.php:
<?php
// Display error messages if they exist
if (isset($_SESSION["err_codes"]) && !empty($_SESSION["err_codes"])) {
$err_codes = $_SESSION["err_codes"];
echo display_error_message($err_codes);
// Clear the session variable after displaying
unset($_SESSION["err_codes"]);
}
function display_error_message($err_code) {
$error = '';
// Invalid username.
if (in_array('invalid_username', $err_code)) {
$error = '<strong>ERROR</strong>: Invalid username.';
}
// Incorrect password.
if (in_array('incorrect_password', $err_code)) {
$error = '<strong>ERROR</strong>: The password you entered is incorrect.';
}
// Empty username.
if (in_array('empty_username', $err_code)) {
$error = '<strong>ERROR</strong>: The username field is empty.';
}
// Empty password.
if (in_array('empty_password', $err_code)) {
$error = '<strong>ERROR</strong>: The password field is empty.';
}
// Empty username and empty password.
if (in_array('empty_username', $err_code) && in_array('empty_password', $err_code)) {
$error = '<strong>ERROR</strong>: The username and password are empty.';
}
return '<div class="login-error">' . $error . '</div>';
}
?>Step 3: Create a New Page & Assign Created Template to Custom Page
Next, navigate to the Pages section in your admin dashboard and create a new page.
Under the Template dropdown in the Page Attributes section, select your created template.
Save the page. You now have your own custom login page.
Have You Successfully Created Your Custom Login Page?
We’ve gone through how to customize your admin login page, including both changing the logo and associated URL as the WordPress default login page. You can create your own WordPress custom login page by creating a new page template. While the 2nd solution does require more advanced coding knowledge, it’s pretty easy with our clear step-by-step guide.
