Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website for clients, you might want a more customized login page, so that it integrates nicely with the website design as a whole. In addition, having a customized login page could also give your clients a good impression of your skills.If this is something that you want to achieve on your site, here’s how you can build a fully customized WordPress login page.
Custom Login Page First, we need to create a custom page template for the login page. To do so, you can create a new page template and name it – for example – page-login.php. Then, create a new Page from the WordPress backend and set the permalink to login so that WordPress will automatically take the page-login.php template for the page.
The Login Form
wp_login_form tag in the
page-login.php page template to display the login form.
The following is optional, but could be useful in certain cases. You can configure a few things for the login form, like specifying the redirecting of URL after the user has successfully logged in, changing the ID of the username, and the password input field.
Furthermore, you can also add something aside. It could be your logo and a little description of your site, for example.
Now, let’s make the form nicer with CSS. You can make the CSS up on your own as per your site requirements. In this example, here is how my login form looks like. site theme.
At this point, the login page is already functional. We can try logging in, and if suceeded we will be redirected to the URL that we have specified in the
redirect parameter above. But, there is something that we need to address.
Facing Problem Finding Admin Panel Url Check This Out :-
wp-login.php page is still accessible. It would be better to redirect the
wp-login.php to our new login page to deliver a unified experience to our clients.
To do so, you can add the following codes in the
functions.php of your theme.
Remember to change the
$login_page variable to your own login page.
Second, the login page can work as expected when we are successfully logged in. But if an error occurs like when submiting invalid user and password combinations, or submitting an empty field, we will also be thrown away to
wp-login.php. To solve this issue, add the following functions in the
These two functions perform two tasks. They will redirect the user upon failing, and append a
login query string to the URL with the value of either
The last problem is we will also be redirected to
wp-login.php when we have logged out from the site. So, we also need to specify the redirecting URL upon logging out, like so.
We will display an error message, showing the user when the error occurred, and when they have logged out by using the query string that we have put in the URL. To get the value from the login query string above, we can use
Put this code below in the login page template.
The above code will check whether the
login variable contains value, otherwise it will set to
0. Then we will display different notification messages based on the value of
$error, like so.
And below is what the error message looks like.
There are several things that we could do to improve our login page such as adding Lost Password link, Register Link, and a personalized error message. But, at this point it is now functioning well enough for our users to login and logout, and it could also be a good start to create a more advanced login page.
We hope that you find this tutorial useful.