WordPress as we know it, is not just a blogging tool, it is a CMS (Content Management System). Most of the freelancers out there use WordPress to build custom sites to entertain requirement friendly behavior. Even a basic CMS based project in WordPress demands for a custom login page in WordPress. Today I intend to discuss how one can create a custom login page in WordPress.
JUST A NOTE!
๐จโ๐ป I’m teaching thousands of devs how to become VSCode Power Users โ
โ
This site is super fast?! It’s hosted with Kinsta on Google servers โ
Create a Custom WordPress Page#
First of all create a custom page in the root folder of your WordPress theme and name it aa_login.php (I use aa_ to make my code unique, it is a kind of abbreviation of my name Ahmad Awais). At the top of the page write the comment of Template Name:, a PHP comment, so that WordPress can recognize this custom page.
Using $user_login#
$user_login is a global variable which helps us find the present user login data. With which we can easily find out about the following activity of a particular user.
Check if Login Failed#
If user tries to login with wrong credentials, WordPress will return a query string ?login=failed. This will in turn be used to display an error message.
Check if User Is Already Logged In#
Then I used is_user_logged_in() function to check if the user is already logged in. So, if an already logged in user tends to revisit the login page, he’ll get a message about returning home or logging out. There is no sense in displaying the login form to an already logged in user.
In this part I used wp_login_form() function with some arguments to display the contact form. Here you need to pay attention to the particular argument ‘redirect’ => home_url(‘/wp-admin/’), this is basically redirecting user after login to home_url(‘path-here’). You can easily change the path to redirect a user to another page E.g. a custom front-end dashboard.
Live Example#
Don’t forget to publish the page from admin panel Pages > Add New > Select the template name.
What’s good is a code without demo? Here is a live example
Live Demo
Full Code#
JUST A NOTE!
๐จโ๐ป I’m teaching thousands of devs how to become VSCode Power Users โ
โ
This site is super fast?! It’s hosted with Kinsta on Google servers โ
Awesome (Y)
Thank You!
It clean for Beginner
Weird issue. On your demo, if you type the login details wrong, you get redirected back to your custom login page. When I did everything as you have done above, then when the login credentials are wrong on my site, I end up getting redirected to the wp-login.php page.
What have I done wrong?
There are several checks for that. E.g.
Hi,
I know it is a long time ago, but I was trying to implement this.
Awesome post, very clearly explained. And it is working for most part.
But the failed login, will send me to the wp-admin login.
I used the code above, which makes sense with the referer. (try to not blindly copy/past, but first understand what is written)
But it doesn’t seem to work.
Any clues why this might be?
Awesome blog! Do you have any tips and hints for aspiring writers? I’m hoping to start my own site soon but I’m a little lost on everything. Would you advise starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m completely overwhelmed .. Any suggestions? Cheers!
If you want to write just head over to Medium.com and start writing for free. Then see how it goes from there.
Just want to say your article is as astounding. The clearness in your post is just nice and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please keep up the enjoyable work.
I’m glad you enjoyed reading it. I’m planning to post a series of articles about using WordPress as an App. Which means front-end registration and a custom dashboard. BTW you can subscribe to my the Newsletter, and get an email whenever I publish an article.
Greate pieces. Keep writing such kind of information on your site. Im really impressed by it.
You have performed an excellent job. I will definitely digg it and individually suggest to my friends. I am confident they’ll be benefited from this web site.
wp_login_form($args); at this place you passed $args which is defined after that…. please correct the code.
I just updated the code. It works either way, but it’s always good to follow standards.
hi this is nice post. but i am create login page and i want to logged in user through login but user does not redirect to admin area.
so what can i do so user redirect to admin area.
here is my code
if($_POST) {
global $wpdb;
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST[‘username’]);
$password = $wpdb->escape($_REQUEST[‘password’]);
$remember = $wpdb->escape($_REQUEST[‘rememberme’]);
if($remember) $remember = “true”;
else $remember = “false”;
$login_data = array();
$login_data[‘user_login’] = $username;
$login_data[‘user_password’] = $password;
$login_data[‘remember’] = “true”;
$redirect_to = admin_url();
$requested_redirect_to = $redirect_to;
$user_verify = wp_signon( $login_data, true);
if ( is_wp_error( $user_verify ) ) {
echo $user_verify->get_error_message();
}
$user = get_user_by(‘ID’, $user_verify->ID);
$user_id = $user_verify->data->ID;
if($user) {
wp_set_current_user($user_id, $user->user_login);
wp_set_auth_cookie($user_id);
do_action( ‘wp_login’, $user->user_login );
}
if ( is_wp_error($user) ) {
header(“Location: ” . home_url() . “/login/error/”);
// Note, I have created a page called “Error” that is a child of the login page to handle errors. This can be anything, but it seemed a good way to me to handle errors.
}
else {
//wp_safe_redirect(admin_url());
echo “window.location='”. home_url( ‘/wp-admin/’ ) .”‘”;
exit();
}
}
else {
// No login details entered – you should probably add some more user feedback here, but this does the bare minimum
echo “Invalid login details”;
}
<form id="login" name="form" action="/custom-login/” method=”post”>
Hello Ahmed.
Im having some issues using this script of yours. I have followed all the steps and installed it fine, however a couple of issues.
1. If there is an error in the login, it takes you to /wp-admin
2. When you logout, it takes you to /wp-admin
3. If you go the the login page when you are logged in, is there someway it can redirect you to the redirect URL instead of showing the message hello User, you are already logged in?
Im not good with PHP so bear with me. Jzk
The code I wrote, is not meant for the three things mentioned here. Sure, this can be done, will write about that :)
Thank you very much for taking the time to write and share this code.
Your post is a few years old but there are not many (any?) other wp experts sharing code for front-end login……so this is still very helpful even years later.
Like other commenters I have the same behaviour – eg If there is an error in the login, it takes you to /wp-admin.
So if you could make the time to write about that, that would be great.
Also if you have any sources of info for writing code for registration on front end, lost password, that would be appreciated.
Glad I could help Joseph! I have decided to build a small video series on everything you asked for. Subscribe at https://AhmadAwais.com/subscribe to know more when I launch it.
Hi
Thanks so much for clean and clear tutorial.
How can i add Forgot Password and Registration links?
Thanks
I will create a new post to address that, very soon. Do Subscribe to my newsletter called Takeaway http://AhmadAwais.com/subscribe/
Hello Ahmed and thanks for this clear code,,
can I customize the login form? for example, can I add social login right above the username text field?
One more things, I am using app maker for my wordpress site, this app maker allow me to write HTML code directly, Can I make HTML code for the login form and when I hit the submit button it will be sign in directly based on the back-end code?
I hope my problem clear enough
I am using app maker for my wordpress site, this app maker allow me to write HTML code directly, Can I make HTML code for the login form and when I hit the submit button it will be sign in directly based on the back-end code?
I hope my problem clear enough
nice
Is this something that can be solved?
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘disable_embeds_rewrites’ not found or invalid function name in \wp-includes\class-wp-hook.php on line 286
Thanks for the awesome code anyway keep up the goodwork!
Hello
Thanks tutorial this helped me a lot.
But i have one query,how can i add Forgot Password and Registration links with the same as in demo?
I also Subscribed to Takeaway but haven’t got any link regarding this, please suggested.
Thanks
can you share the complete code of this with signup and forget pawword
not work as well as demo !!!
details wrong = wp-login.php
but demo is different
Hello,
I really appreciate your work ! The code works perfectly, I could redirect users to a custom page with controlled access after log in.
I just encounter a problem, when I change the redirect of the log out loop to the home page, it doesn’t log out… Is there a way to do that ? Or redirect to a page that confirms the log out while effectively doing it ? The original script redirects to the worpress log in and it doesn’t look good with the rest.
Thanks in advance ! :)
Hello and thanks for code. I have a problem. Everytime if i try to login first time on form work succesuf after (logout, delete cache and retry to login) if i try other time i have a redirect problem becouse continue to redirect to me in same page (i have put the login form on home page).
How can we fix it?
How do i style this form
Use CSS :)
Using CSS :)
hello sir can you help how to create custom website user login with custom php code no plugin!.
Great job with this. Do you have a Registration one too? Do you favor Ajax when having Login and Registration on same page? I ask only because I feel bots can’t find the registration then.