Ahmad Awais

NAVIGATE


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.

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.

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#

 

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 →

I help businesses understand developers 📟 Currently recording Node.js CLI Automation Course 👨‍🏫 Edutainer at VSCode.pro 🎩 An award-winning open-source engineer and developer advocate 🦊 Google Developers Expert for web 🌳 Node.js foundation Community Committee member ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer 📣 TEDx Speaker 🙌 Leading developers and publishing technical content for over a decade 😂 Self-confessed tech comedian cracking silly jokes in the JavaScript web and cloud communities 💜 Loves his wife (Maedah) ❯ Learn more about Awais ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the Developers Takeaway!

📨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam — pinky-promise!

👨‍💻👩‍💻 115,834 Developers Already Subscribed