⏲️ Estimated reading time: 4 min
How to Set Up Custom Login, Logout, Lost Password, and Register Pages in WordPress (Child Theme), follow these steps:
Login Form Reference
https://developer.wordpress.org/reference/functions/wp_login_form/
Link to the official WordPress documentation for wp_login_form(), explaining its usage and customization.
User Registration API
https://developer.wordpress.org/reference/functions/wp_insert_user/
Guides users on how to register new users programmatically using wp_insert_user().
Lost Password Functionality
https://wordpress.org/support/article/resetting-your-password/
Official WordPress support guide for resetting passwords.
wp_logout() Function
https://developer.wordpress.org/reference/functions/wp_logout/
Explains how the wp_logout() function works and how to redirect users upon logout.
/your-child-theme/
│
├── functions.php
├── custom_templates/
│ ├── custom-login.php
│ ├── custom-register.php
│ ├── custom-lost-password.php
│ └── custom-logout.php
Step 1: Create Custom Page Templates
You need to create custom templates for each authentication-related page.
1.1. Create custom PHP File for Login
Inside your child theme, create a file named custom-login.php and add this code:
<?php
/**
* Template Name: Custom Login
*/
get_header();
if ( is_user_logged_in() ) {
wp_redirect( home_url() );
exit;
}
?>
<div class="custom-login-form">
<?php wp_login_form(); ?>
</div>
<?php get_footer(); ?>
1.2. Create custom PHP File for Registration
Create a file named custom-register.php and add:
<?php
/**
* Template Name: Custom Register
*/
get_header();
if ( is_user_logged_in() ) {
wp_redirect( home_url() );
exit;
}
if ( isset($_POST['register']) ) {
$userdata = array(
'user_login' => $_POST['username'],
'user_email' => $_POST['email'],
'user_pass' => $_POST['password']
);
$user_id = wp_insert_user( $userdata );
if ( !is_wp_error($user_id) ) {
echo "<p>Registration successful. <a href='".home_url('/login')."'>Login here</a></p>";
} else {
echo "<p>Error: ".$user_id->get_error_message()."</p>";
}
}
?>
<form method="post">
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" name="register">Register</button>
</form>
<?php get_footer(); ?>
1.3. Create New PHP File for Lost Password
Create a file named custom-lost-password.php and add:
<?php
/**
* Template Name: Lost Password
*/
get_header();
if ( isset($_POST['user_login']) ) {
$user_login = $_POST['user_login'];
$user = get_user_by('email', $user_login) ?: get_user_by('login', $user_login);
if ($user) {
$reset_link = wp_lostpassword_url();
echo "<p>Password reset link sent. Check your email.</p>";
} else {
echo "<p>User not found.</p>";
}
}
?>
<form method="post">
<input type="text" name="user_login" placeholder="Username or Email" required>
<button type="submit">Reset Password</button>
</form>
<?php get_footer(); ?>
1.4. Create New PHP File for Logout
Create a file named custom-logout.php and add:
<?php
/**
* Template Name: Custom Logout
*/
wp_logout();
wp_redirect( home_url() );
exit;
?>
Step 2: Create custom Pages in WordPress
- Go to Pages → Add New
- Create new pages and assign the templates:
- Login → Assign
Custom Login - Register → Assign
Custom Register - Lost Password → Assign
Lost Password - Logout → Assign
Custom Logout
- Login → Assign
- Publish each page.
Step 3: Redirect Default Login Pages
To redirect users to your custom pages, add this to your child theme’s functions.php:
function custom_login_redirect() {
if (strpos($_SERVER['REQUEST_URI'], 'wp-login.php') !== false && !is_admin()) {
wp_redirect(home_url('/login'));
exit;
}
}
add_action('init', 'custom_login_redirect');
Step 4: Style the Forms
Add custom styles in your child theme’s style.css:
.custom-login-form form,
form {
max-width: 400px;
margin: auto;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
form input {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
form button {
width: 100%;
background: #0073aa;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
}
form button:hover {
background: #005a87;
}
Step 5: Test Everything
- Visit
/login,/register,/lost-password, and/logoutto confirm the custom pages work correctly.
Now you have fully customized authentication pages within your WordPress child theme! 🚀
Tags
#WordPress #ChildTheme #CustomLogin #UserAuthentication #PHP #WordPressSecurity #CustomPages #UserManagement #LoginRedirect #WebDevelopment
