Every WordPress website comes with the default login form which allows users to login. However, there are situations where you might want to create a custom WordPress login page either to match your branding or to improve user experience.
The good news is that WordPress provides several ways to create a custom login form. You can do this manually with code, use a plugin, or implement a shortcode. In this tutorial, I’ll walk you through creating a custom login form in WordPress step by step.
Step 1: Define the Plugin Header
Create a new PHP file in your plugins directory and add the following code in it. The code defines the metadata such as Plugin Name, Plugin URI, Description, Version, Author, and License that helps WordPress recognize the plugin. Also, to prevent direct access to the plugin files we are defining the constant ABSPATH that ensures that the script is executed only within WordPress.
<?php
/**
* Plugin Name: Custom Login Page
* Plugin URI: https://tychesoftwares.com
* Description: A custom WordPress login page
* Version: 1.0
* Author: Tyche Softwares
* Author URI: https://tychesoftwares.com
* License: GPL2
*/
if (!defined('ABSPATH')) {
exit; // Prevent direct access
}
Step 2: Generate the Custom Login Form
As a next step, we will be creating the form using a callback function called clp_custom_login_page() that builds a custom login form for WordPress using HTML elements and styles. It also sets up a shortcode, allowing you to easily add this login form to any WordPress page or post by simply using [custom_login_shortcode].
// Generate custom login form
function ts_custom_login_page() {
ob_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Login</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.login-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
text-align: center;
width: 350px;
}
.login-container h2 {
margin-bottom: 20px;
color: #333;
}
.login-container input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-container input[type="submit"] {
background: #5b57d6;
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border: none;
}
.login-container input[type="submit"]:hover {
background: #453cc9;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Welcome Back</h2>
<form method="post" action="<?php echo esc_url(wp_login_url()); ?>">
<input type="text" name="log" placeholder="Username" required>
<input type="password" name="pwd" placeholder="Password" required>
<input type="hidden" name="redirect_to" value="<?php echo esc_url(admin_url('index.php')); ?>">
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
<?php
return ob_get_clean();
}
add_shortcode('custom_login_shortcode', 'ts_custom_login_page');
The following code handles the redirection logic by redirecting users after login and logout. The steps below describes how the login process is handled:
- Redirect Users After Login: Send admins to the dashboard, other users to their requested page (if any), or the homepage by default.
- Redirect Default Login Page: Force users to use the custom login page instead of wp-login.php. .
- Allow Admins to Access wp-login.php: Prevents admins from getting locked out by allowing them to access the default login page when needed.
- Redirect Users After Logout: Ensure users land on the custom login page after logging out for a smoother experience.
// Redirect users after login
function ts_custom_login_redirect($redirect_to, $requested_redirect_to, $user) {
if (!is_wp_error($user) && isset($user->roles)) {
if (in_array('administrator', $user->roles)) {
return admin_url('index.php'); // Redirect admins to wp-admin/index.php
} elseif (!empty($requested_redirect_to)) {
return $requested_redirect_to; // Redirect others to their requested page
} else {
return home_url(); // Default redirect for non-admins
}
}
return $redirect_to;
}
add_filter('login_redirect', 'ts_custom_login_redirect', 10, 3);
// Redirect default login page to custom login page
function ts_redirect_login_page() {
global $pagenow;
if ($pagenow === 'wp-login.php' && !is_admin() && empty($_GET['loggedout']) && $_SERVER['REQUEST_METHOD'] !== 'POST') {
wp_redirect(home_url('/custom-login/'));
exit;
}
}
add_action('init', 'ts_redirect_login_page');
// Ensure admins can access wp-login.php
function ts_allow_admin_login_page_access() {
if (is_admin() && strpos($_SERVER['REQUEST_URI'], 'wp-login.php') !== false) {
remove_action('init', 'ts_redirect_login_page');
}
}
add_action('init', 'ts_allow_admin_login_page_access');
// Redirect users to custom login page after logout
function ts_redirect_after_logout() {
wp_redirect(home_url('/custom-login/'));
exit();
}
add_action('wp_logout', 'ts_redirect_after_logout');