Building a Custom Login Page for WordPress
Posted on 19th June 2023
The WordPress login page is the first thing most users will see when they visit a WordPress site. The default WordPress login page is functional but it’s not very pretty. In this tutorial, we will show you how to create a custom login page for your WordPress site.
Why Create a Custom Login Page?
There are a few reasons you might want to create a custom login page for your WordPress site.
- The default WordPress login page is not very pretty.
- A custom login page can be used to branding your site.
- A custom login page can be used to add additional functionality to your login process.
Creating a Custom Login Page
Creating a custom login page for WordPress is not as difficult as it may seem. With a little bit of code, you can have a beautiful custom login page up and running in no time.
Step 1: Create a New Page Template
The first thing you need to do is create a new page template. A page template is a file that contains a template for a specific page. In our case, we are going to create a page template for our custom login page.
Create a new file in your WordPress theme and name it “page-login.php”. Add the following code to your new file:
<?php
/*
Template Name: Login Page
*/
?>
This code tells WordPress that this is a page template and it should be named “Login Page”.
Step 2: Add the Login Form
Next, you need to add the login form to your page template. The login form is a standard HTML form with a few special WordPress fields. Add the following code to your page template:
<form name="loginform" id="loginform" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="post">
<p>
<label for="user_login">Username or Email Address</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20">
</p>
<p>
<label for="user_pass">Password</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
</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">
</p>
</form>
This code adds the standard WordPress login form to your page.
Step 3: Style the Login Form
Now that you have the login form added to your page, it’s time to style it. WordPress does not include any default styles for the login form, so you will need to add your own.
The best way to add styles to your login form is to create a new stylesheet and enqueue it on your login page. Add the following code to your page template:
<?php
function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
?>
This code adds a new stylesheet to your login page. You will need to create a new file named “style-login.css” in your theme’s directory and add your styles there.
Step 4: Redirect Users After Login
By default, WordPress will redirect users to the dashboard after they login. If you want to redirect users to a different page, you can use the “login_redirect” filter.
Add the following code to your page template:
<?php
function my_login_redirect( $redirect_to, $request, $user ) {
// is there a user to check?
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
// check for admins
if ( in_array( 'administrator', $user->roles ) ) {
// redirect them to the default place
return $redirect_to;
} else {
return home_url();
}
} else {
return $redirect_to;
}
}
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
?>
This code will redirect all users (except administrators) to the home page after they login.
Step 5: Add a Custom Logo
By default, the WordPress login page uses the WordPress logo. If you want to use a custom logo, you can use the “login_headerurl” and “login_headertitle” filters.
Add the following code to your page template:
<?php
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png);
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return 'Your Site Name';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
?>
This code adds a custom logo to your login page. You will need to upload a logo image to your theme’s directory and name it “logo.png”.
Conclusion
In this tutorial, we showed you how to create a custom login page for your WordPress site. Creating a custom login page is a great way to add branding to your site and make the login process more user-friendly.
In this tutorial, we will cover how to build a custom login page for WordPress. We will be using a custom page template and a few lines of code to create our custom login page.
First, you will need to create a new page template. You can do this by creating a new file called “page-login.php” in your theme’s directory.
Next, you will need to add the following code to your new page template:
Login
<form id="login-form" action="/wp-login.php” method=”post”>
In the code above, we are first checking to see if the user is already logged in. If they are, we redirect them to the home page. If they are not logged in, we display the login form.
The login form itself is a standard WordPress login form. The only difference is that we are displaying it on a custom page.
Once you have added this code to your page template, you can then create a new page in WordPress and select your page template from the drop down menu.
That’s all there is to it! You now have a custom login page for WordPress.
