Custom login page demand is a common scenario. You have a WordPress website that allows user subscription. On top of that, your theme does not provide a custom login page. You may even want to build a simple pop up button in the header of your website, so that the login form is available in every page of your website. We have been there and we have discovered a quick way to implement the WordPress native login form in any page, using shortcodes. Actually, in this article, we are going to build a shortcode by our own, which will display the native WP login form.
Creating a Custom Login Page in WordPress
By default, WordPress directs users to the standard /wp-admin login page when they need to log in. However, you may want to offer a more user-friendly and customized login experience. This guide will show you how to create a custom login page in WordPress and use a shortcode to easily embed the login form on any page you choose.
Step 1: Create a Custom Page
- Begin by logging in to your WordPress admin dashboard.
- Navigate to the “Pages” section and click on “Add New” to create a new page.
- Give your page a descriptive title, such as “Login” or “Custom Login.”
- Optionally, add any content or information you wish to display on this page, such as a welcome message or login instructions.
Step 2: Add a Custom Login Form
To incorporate a custom login form, we’ll leverage WordPress hooks and functions. Specifically, we’ll use the wp_login_form()
function to display the login form.
Step 3: Customize functions.php
Access your theme’s functions.php
file, typically located in your theme’s folder. Add the following code:
function custom_login_form() {
if (!is_user_logged_in()) {
wp_login_form();
}else {
echo 'You are already logged in.';
}
} add_shortcode('custom_login', 'custom_login_form');
This code defines the custom_login_form()
function, which checks if the user is logged in. If not, it displays the login form using wp_login_form()
. Additionally, it establishes a shortcode, [custom_login]
, enabling you to insert the login form on any page using this shortcode.
After adding the shortcode, you’ll get a simple login page like with a username and a password field, with styling of your theme. For example, our custom login page would look like this:
Step 4: Edit Your Custom Login Page
Edit the custom login page you created earlier:
- Navigate to “Pages” and locate your custom login page.
- Inside the page content, insert the
[custom_login]
shortcode at the desired location to display the login form.
Step 5: Custom Redirect After Login
To set your custom login page as the default login page and create a custom redirect after logging in, you can include the following code in your theme’s functions.php
file:
function custom_login_form() {
if (!is_user_logged_in()) {
wp_login_form(array(
'redirect' => home_url('/custom-redirect-page/'), // Customize the redirect URL
));
} else {
echo 'You are already logged in.';
}
}
add_shortcode('custom_login', 'custom_login_form');
In this updated code, we use the redirect
parameter within the wp_login_form()
function to specify the URL to which users will be redirected after logging in. Adjust the '/custom-redirect-page/'
portion to match the desired URL.
Step 6: Test Your Custom Login Page
Visit your custom login page, usually accessible at https://yourdomain.com/login. Here, users will find the login form ready for use. Upon logging in, they will be redirected to the custom page you specified in the code.
Customize WordPress Login process for your visitors!
This method empowers you to create a custom login page with a shortcode, making it effortless to embed the login form on any page you wish. It provides a more user-friendly login experience and allows for a personalized post-login redirection. Always ensure you take security measures when designing custom login pages to safeguard your WordPress site.