Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.


The latest news in the world of engineering.

Identity and Access Management (IAM), including security and customer experience.

Visit Blog

Grow your business to millions.Engage and retain your customers.

Visit Blog

Part 2 - Creating a Custom Login Form

In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress provides us, we…

Zoie Carnegie
Zoie Carnegie
November 25, 2020
2 min read

Free, Secure and Trusted Way to Authenticate Your Visitors

Add login to your website in 5 minutes completely for free!

Free Sign UpNo hidden costs. No credit card needed.

In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress provides us, we will create this login form and the styling from scratch, making it a very customized form. I will be providing the CSS I am using, however you may style this however you wish.

Building a Custom Login Form


This is what WordPress gives us out of the box.. Boring, right?

I am going to show this part once again because it is probably the easiest to implement for beginners. I covered this in Part 1, but we'll go through it again just in case you're skipping ahead

To start our page theme you will need to do the following

1. Install WordPress 2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one 3. create a file called page-login-custom.php in the theme directory (Notice we are now making a new Page Theme) 4. Next open that file with a text editor of your choosing and add the following at the top of the php file


To initialize this page template make sure to activate the theme you've selected and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template. Change your template to Login Custom and that will attach that page theme to this page/post.

Now for the custom code. Below I have provided an example of some code that I have customized to make my custom login form.

<form method="post" action="" class="wp-user-form">

<input type="text" name="log" value="" size="20" id="user_login" tabindex="11" />


Remember me

<input type="submit" name="user-submit" value="" tabindex="14" class="user-submit" />
<input type="hidden" name="redirect_to" value="" />


Let's take a look at that custom form

Handling the Login Form response

To handle the Login Form response use the exact same method we used in part 1. Remember to place that function within your functions.php file within your theme unless you're building a plugin.

In this example we have built a custom WordPress login form that you could customize and style to your desire. In the next section I will be demonstrating how to build a lost password form that is fully customized. Our custom lost password form will send an email to the user as well as handle creating a new password for the user.

LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags


Do you want a free authentication solution?

Add the world's most secure, reliable and easy to implement user authentication solution on your applications at $0Get Started Free

Zoie Carnegie

Zoie Carnegie

Graduated from NAIT Digital Media and IT specializing in application development. PHP is my favorite language. I am a continuous learner always trying new languages, applications, frameworks. Passions are Programming, Photography and Travel.

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces