Creating a custom login page for your WordPress site can provide a unique experience for your users. Follow these steps to set up a custom login page without using any plugins.
First, create a custom page template in your theme’s directory.
wp-content/themes/your-theme-name).custom-login.php.custom-login.php and add the following code to define it as a custom page template:
<?php
/* Template Name: Custom Login */
get_header();
?>
<!-- The rest of your code will go here -->
<?php get_footer(); ?>
Next, create the HTML for the login form. Add this code after the get_header(); line:
<div class="login-form-container">
<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
</p>
<p class="forgetmenot">
<label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
</p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
<input type="hidden" name="redirect_to" value="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>" />
</p>
</form>
</div>
With your custom page template ready, create a new page in WordPress.
Pages > Add New.
<?php
/* Template Name: Custom Login */
get_header();
?>
<div class="login-form-container">
<form name="loginform" id="loginform" action="<?php echo site_url( '/wp-login.php' ); ?>" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
</p>
<p class="forgetmenot">
<label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
</p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</p>
</form>
</div>
<?php get_footer(); ?>
If you want to ensure users are directed to your custom login page instead of the default WordPress login page, you can add a redirect. Follow these steps to implement the redirect:
functions.php file (usually located in wp-content/themes/your-theme-name/functions.php).
add_action('login_enqueue_scripts', 'custom_login_page_redirect');
function custom_login_page_redirect() {
wp_redirect(site_url('/custom-login/'));
exit();
}
Replace '/custom-login/' with the slug of your custom login page.
Here’s how you can set up the entire process from start to finish:
Create a new file named custom-login.php in your theme’s directory (wp-content/themes/your-theme-name).
Open custom-login.php and add the following code:
<?php
/* Template Name: Custom Login */
get_header();
?>
<div class="login-form-container">
<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
</p>
<p class="forgetmenot">
<label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
</p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
<input type="hidden" name="redirect_to" value="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>" />
</p>
</form>
</div>
<?php get_footer(); ?>
Pages > Add New.functions.php file.
add_action('login_enqueue_scripts', 'custom_login_page_redirect');
function custom_login_page_redirect() {
wp_redirect(site_url('/custom-login/'));
exit();
}
Replace '/custom-login/' with the slug of your custom login page.
With these steps, any attempts to access the default login page (/wp-login.php) will be redirected to your custom login page. This method ensures that users experience a consistent login interface tailored to your site.
By following this guide, you can successfully create a custom login page in WordPress and optionally redirect users from the default login page. Feel free to customize the appearance and functionality to suit your needs.
Enables the creation of unique, personalized landing pages at scale by offering unlimited placeholders for dynamic content.
Essential for crafting content-rich, unique pages for each visitor or target group, optimizing for local SEO, e-commerce variability, or specific event details.
