Home » How to create a completely custom login and register page in WordPress with custom HTML, password strength meter, CAPTCHA (using reCAPTCHA), and front and back end validation

How to create a completely custom login and register page in WordPress with custom HTML, password strength meter, CAPTCHA (using reCAPTCHA), and front and back end validation

In this tutorial I’m going to walk through a custom login and register page in WordPress that is independent of the native WordPress login and registration system. It can be a pain to work with WordPress’ native login/register forms to make them your own and work well, so this is my suggested method of doing something completely custom.

Also, if you want to completely skip reading through this and check out some code samples, feel free to scroll to the bottom and click on the link that I have to the git repo for this. If you have any questions or errors when implementing this code, feel free to post a comment with your problem and I’ll help you troubleshoot it 🙂

Note: I use PHP 5.3+ object oriented programming practices in this example, so if you want an example for an older version of PHP then post a comment and ask me to provide a snippet that’s compatible with older versions.

First we’ll start by adding a custom PHP class that will handle our login and registration form actions. Start by creating a file (I put mine inside of an inc directory inside my theme directory) named custom-login-register.php and place the following code inside:

Now this next part is a bit particular to your situation. For me I chose to add the WordPress default password strength meter to validate the password strength similar to the native WordPress registration form. In order for this to work and look decent, you’ll want to style this up. Here’s an example of what I did to give you a head start.

Create a file called page-login.php in your theme directory and paste the following code into that file:

Create a file called page-register.php in your theme directory and paste the following code into that file:

Now we’ll need to add the following code to functions.php in order to make the $custom_login_register variable available on your page templates and instantiate our custom login and registration class.

Then you’ll need to go sign up for reCAPTCHA and update the top of inc/custom-login-register.php with the credentials you get from Google. Once that’s done, reCAPTCHA should be able to work just fine on its own.

Here’s the link to the git repository so you can download all the files in question (except the functions.php file – you’ll have to copy the last code snippet into there on your own). As always, let me know if you have any questions.

6 comments on “How to create a completely custom login and register page in WordPress with custom HTML, password strength meter, CAPTCHA (using reCAPTCHA), and front and back end validation

  1. แม่พิมพ์ซิลิโคน on

    I enjoy reading a post that can make men and women think.
    Also, many thanks for allowing me to comment!

    Reply
  2. CodeMonkey on

    Great tutorial! Obviously a work in progress…

    A few suggestions…

    – For the jQuery script, you didn’t mention where that goes… Could confuse some people… since I am using all of your tutorials to spin up my project, I know which file to place the script in within my FoundationPress theme… Unfortunately, I don’t have permissions to edit functions.php, so I can’t finish the tutorial, but I have a friend who will help with that…

    – Just for people who may get confused… to add the recaptcha creds… Google calls the public key a site key… private key is as is…

    Lastly, I could really use some pointers on how to point the host/dns to webmail.domain.com on Godaddy… haha

    Cheers… Keep up the great work! And get a TOC!

    Reply
  3. Rajib Dey on

    Hey Jeff,

    I really liked reading this post…..well articulated mate…

    Meanwhile I am trying to set up my own personal site leveraging word press; however, as I am pretty new to this area thought of using your code to implement the login and registration form.

    I have followed all the steps as mentioned in the ‘Read Me’ file; however, could not get the form to work.

    Would you know why I am receiving this error while trying to load the registration page -> “Fatal error: Call to undefined method bluemine\Registration::register_user() in /var/www/html/site/wp-content/themes/twentyfourteen/page-register.php on line 8”.

    Reply
    • Jeff Hays on

      Hey Rajib,

      I can’t tell you with 100% certainty what is causing that error, but I’ll mention a couple of things to start with:

      1. It looks like you’re editing the twentyfourteen theme code directly to create a custom theme based off of the default twentyfourteen theme. The recommended way of doing this is to create a child theme of the theme you’re wanting to modify, and the default WordPress twenty* themes are well built in terms of child themes. Check out how to setup child themes for more info.
      2. I’m assuming you set your php namespace (first line of the example class at the top of this article) to “bluemine”? If this is the case, did you change $custom_login_register = new yourapp\Registration; and replace “yourapp” with “bluemine”? If so, I’d do some more debugging because it looks like PHP isn’t recognizing the class, which is often a namespace problem when working with object oriented PHP samples I do (I try to use a namespace when I can in cases like this). Are there any errors in your PHP error logs?
      3. Can you post your code in a few WP Pastebin Links for me to review? I’d need both your version of the class, your code in functions.php that instantiates the class, and your implementation in your page-register.php template.
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *