Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Create custom wordpress registration page

VIEWS: 96 PAGES: 9

  • pg 1
									Login | Signup
CATCH US ON

      Recent
      Photoshop
      Corel Paintshop
      Webdesign
      WordPress
      Freebies
      Contact

in php: Wordpress:


Create custom wordpress registration page
5 May 2011
by Kannan
page template, php, wordpress




I am sure, most web masters using wordpress do not like to let their users to signup or login through the boring wordpress default
signup/login screens. Everyone would like to make those pages look like same as part of their website. Today we will have a little play with
creating a WordPress custom registration page template. You may not forgot my last tutorial about creating a custom wordpress login
page template as part of the theme. If you hadn’t read it yet, read it here Custom WordPress Login without using a plugin

Ok, now we will move in to our today’s tutorial.




Step1: Create page custom-register.php
First we will create a new php template file called custom-register.php and place it inside your wordpress theme folder your-domain-
name/wp-content/themes/your-theme-name
Step2: Naming the Template file
<?php
/*
Template Name: Custom Wordpress Registration
*/
?>


Step3: check if the user is not logged in
Like we did for custom login, we must first check whether the current user is logged in or not. We will show the registration form only if the
current user is not logged in. Additionally, we need to include the file registration.php from wp-includes folder in order to create a new user
inside wordpress system.

<?php
require_once(ABSPATH . WPINC . '/registration.php');
global $wpdb, $user_ID;
if (!$user_ID) {
   //All code goes in here.
}
else {
   echo "<script type='text/javas cript'>window.location='". get_bloginfo('url') ."'</script>";
}


Step4: Embedding the Register Form and jQuery Ajax
Before we display the register form we need to check whether the user registration is allowed by the administrator using the function
get_option(‘users_can_register’).

<?php
if(get_option('users_can_register')) { //Check whether user registration is enabled by the administrator
?>

<h1><?php the_title(); ?></h1>
<div id="result"></div> <!-- To display validation results -->
<form id="wp_signup_form" action="" method="post">

<label>Username</label><br />
<input type="text" name="username" class="text" value="" /><br />
<label>Email address</label><br />
<input type="text" name="email" class="text" value="" /> <br />
<br /><br />
<input type="submit" id="submitbtn" name="submit" value="SignUp" />

</form>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javas cript">
$("#submitbtn").click(function() {

$('#res ult').html('<img src="<?php bloginfo('template_url'); ?>/images /loader.gif" clas s="loader" />').fadeIn();
var input_data = $('#wp_signup_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#res ult').hide().fadeIn('slow');
}
});
return false;

});
</script>

<?php
    }

else echo "Registration is currently disabled. Please try again later.";
?>


Step5: Validate the inputs and register the user
Add the following php code inside if (!$user_ID) { } and move the register form inside the else part of the following if condition.


if($_POST){
     //We shall SQL escape all inputs
     $username = $wpdb->escape($_REQUEST['username']);
     if(empty($username)) {
          echo "User name should not be empty.";
          exit();
     }
     $email = $wpdb->escape($_REQUEST['email']);
     if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email)) {
          echo "Please enter a valid email.";
          exit();
     }


    $random_password = wp_generate_password( 12, false );
    $status = wp_create_user( $username, $random_password, $email );
    if ( is_wp_error($status) )
           echo "Username already exists. Please try another one.";
    else {
           $from = get_option('admin_email');
           $headers = 'From: '.$from . "\r\n";
           $subject = "Registration succes sful";
           $msg = "Registration successful.\nYour login details\nUsername: $username\nPassword: $random_password";
           wp_mail( $email, $subject, $msg, $headers );
           echo "Please check your email for login details.";
    }

    exit();

}
 else
{
//Embed the register form and javascript here
}

In the above code, we will validate the inputs and then create random password with the use of function wp_generate_password(). With
the use of wp_create_user function create a new user account if not the username already exists in the system. Finally, we will email the
login details including the random generated password to the signed up user.

Full Code Preview

<?php
/*
Template Name: Custom Wordpress Signup Page
*/
require_once(ABSPATH . WPINC . '/registration.php');
global $wpdb, $user_ID;
//Check whether the user is already logged in
if (!$user_ID) {

    if($_POST){
         //We shall SQL escape all inputs
         $username = $wpdb->escape($_REQUEST['username']);
         if(empty($username)) {
              echo "User name should not be empty.";
              exit();
    }
    $email = $wpdb->escape($_REQUEST['email']);
    if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email)) {
         echo "Please enter a valid email.";
         exit();
    }


         $random_pas sword = wp_generate_password( 12, false );
         $status = wp_create_user( $username, $random_password, $email );
         if ( is_wp_error($status) )
                echo "Username already exists. Please try another one.";
         else {
                $from = get_option('admin_email');
                $headers = 'From: '.$from . "\r\n";
                $subject = "Registration successful";
                $msg = "Registration successful.\nYour login details\nUsername: $username\nPassword: $random_password";
                wp_mail( $email, $subject, $msg, $headers );
                echo "Please check your email for login details.";
         }

    exit();

} else {
     get_header();
     ?>

    <!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- Remove the comments if you are not using jQuery already in your theme -->
    <div id="container">
    <div id="content">

    <?php
    if(get_option('users_can_register')) { //Check whether user registration is enabled by the administrator
    ?>

    <h1><?php the_title(); ?></h1>
    <div id="result"></div> <!-- To hold validation results -->
    <form id="wp_signup_form" action="" method="post">

    <label>Username</label><br />
    <input type="text" name="username" clas s="text" value="" /><br />
    <label>Email addres s</label><br />
    <input type="text" name="email" clas s="text" value="" /> <br />
    <br /><br />
    <input type="submit" id="submitbtn" name="submit" value="SignUp" />

    </form>

    <script type="text/javascript">
    $("#submitbtn").click(function() {

    $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_signup_form').serialize();
    $.ajax({
    type: "POST",
    url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
    data: input_data,
    success: function(msg){
    $('.loader').remove();
    $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
    }
    });
    return false;

    });
    </script>

    <?php
        }
         else echo "Registration is currently disabled. Please try again later.";
         ?>

         </div>
         </div>
         <?php

         get_footer();
    } //end of if($_post)

}
else {
     echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
}
?>

Once the template file is ready, you need to create a new page from the wordpress admin. If you are unsure about this just follow the step
number 10 from my previous tutorial Custom WordPress Login without using a plugin. Hope you find this tutorial useful.




You may also like




             3D max bullet video tutorial                How to make Airplane - 3Ds max video tutorial   Meteorite Impact Photoshop tutorial
   How to model realistic and highly detailed       Ghost Love Story Photoshop Manipulation                     Making of Zombie Girl
              Bibendum chair                                        Tutorial
                                                                                                                                         3DS Max


7 Responses
  1. cubikated says: 16 May 2011




     This is perfect. I love the site. The registration with all the extra fields, specially the password option and the confirmation message,
     the validation link e-mail, once logged in the optional edit profile page without the boring WP default page, the Welcome “user” at
     the top right, Edit profile/logout link….just want I want in my site…..can I have it???? Please…would appreciate a lot. Awesome
     stuff!!!!!!

     Reply
             Kannan says: 18 May 2011




             I am glad you like it. I have already written tutorials similar to that feature. You can grab it from the tutorials page.

          Reply
  2. David says: 22 May 2011




     Great tutorial but you should bind listener to the form’s submit event, not submit buttons click because you can submit the form in
     other ways, not just by clicking submit button.

     Using your listener method will not allow the user to submit on touch devices either like the iPhone or iPad.

     jQuery(“#form-id”).submit(function() { … });

     Reply
             Kannan says: 24 May 2011




             I didn’t think about it when writing this. Anyway thanks for the great tip.

          Reply
  3. Prasad says: 31 May 2011




     Nice article.

     Here you will find free plugins and lot of articles related to wordpress.
       http://www.wordpressstop.com

       Keep Smiling.

      Reply
   4. joan says: 4 June 2011




       I’m a newbie in wordpress and I know that this is a stupid question. Just bear with me. What is the content of the registration.php?

       Reply
               Kannan says: 5 June 2011




               I am not sure about which content you mean. The content of registration.php file should contain all code from full code
               preview. If you’re asking about page creation from wp admin, then just leave the content empty.

               Reply

Trackbacks

Add your comment




Your Name*


Your Email*


Website URL


 Add Comment
Search tutorials...


Subscribe by email
Enter your email address:

                                Subscribe
Delivered by FeedBurner
  Free WP Themes
  Fresh WP Themes by FabThemes.
  Advanc ed menu, easy to use.
  www.Fa bThe m e s.com




Recent from Wordpress



                  Create custom wordpress registration page

     I am sure, most web masters using wordpress do not like to let…




                  Custom WordPress Login without using a plugin

     Today we are going to see how to make a Custom WordPress Login…

Recent tutorials



                  Design a 3D image slider in Photoshop

     You’ve probably seen it all over the place, those huge…




                  Free human icons set

     Today’s freebie is a set of 15 beautiful human icons…




                  Create a business website layout in photoshop

     Business websites with huge image sliders are totally selling at…




                  Create custom wordpress registration page

     I am sure, most web masters using wordpress do not…
                             Design an impressive vCard mini site design in photoshop

         Designers, and other entrepreneurs on the Internet are getting their…

Popular Tags

(X)HT ML        3D API backgrounds button links buttons contact form CSS css layout custom brushes design email glossy buttons GUI html basics html tags
icons images image tags Iris color change javascript jquery list menus navigation paintshop buttons photoshop php RSS rule script seo
signature brush stylesheet T able creation tableless table website   templates tweet T witter typography w3c web2.0 buttons web layout web site making
  Find us on Facebook

                     Create an account or log in to
    Sign Up
                     see what your friends like.


                 Tutorialstag
                     Like


                   Tutorialstag




                   Design a 3D image
                   slider in Photoshop
                   www.tutorialstag.com
               Youve probably seen it all
               over the place, those
               huge image sliders on top
               of web pages showing off
               the best works they have
               to offer. Its used a lot
               because it works of
  110 people like Tutorialstag.




   Ray mond        Jannick      José      Maggie




    P atricia       Jaw ad      M oez     M arlene

      F acebook social plugin


Copyright © 2011 TutorialsTag.com

								
To top