Ahmad Awais

Senior Full Stack WordPress developer — WP Core Contributor — Front-end Fanatic — Accidental Writer. I love to write, talk, build, and share everything about WordPress. You can find me making small automation scripts for DevOps stuff or toying around with WP Business ideas. Let's catch up at Twitter @MrAhmadAwais.

Newsletter sign up


SHARE


How to Create a Front-End Login Page in WordPress

Ahmad AwaisAhmad Awais

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.

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.

Else Display the Login Form

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

TAKEAWAY: Subscribe to My Newsletter!

Takeaway my professional opinion about Full Stack WordPress Development and Front-end Design! Delivered to your inbox once a week. Promise! I hate spam.

Senior Full Stack WordPress developer — WP Core Contributor — Front-end Fanatic — Accidental Writer. I love to write, talk, build, and share everything about WordPress. You can find me making small automation scripts for DevOps stuff or toying around with WP Business ideas. Let's catch up at Twitter @MrAhmadAwais.