How to: Build a Branded WordPress Registration Page

WordPress can be used to build many different types of websites, including but not limited to e-commerce stores, blogs, portfolios and membership sites. In a recent post, we shared how you can build a branded WordPress login page using some custom code for your membership site.

One major function of a membership site is the ability for users to be able to register. On registration-enabled WordPress sites, the ability to customize the registration page is very limited; this is similar to the login page, as both use the same template.

Enable User Registration and Create the Register Page

In WordPress, new user registrations are disabled by default.

You can enable user registration by checking the “Anyone can register” checkbox under Settings > General in the admin and assigning them a default role upon registration. Once enabled, the default registration page can be found at wp-login.php?action=register.

Once registration is enabled, we want to create a dedicated page where the form to register will live (instead of using the default WordPress path). To create the custom registration page, we add the following code to our functions.php file.

add_action('init', 'dgtlnk_create_custom_registration_page');

function dgtlnk_create_custom_registration_page() {
     $query = new WP_Query( 'pagename=member-register' );
     if ( ! $query->have_posts() ) {
          wp_insert_post(
               array(
                    'post_content'   => '[dgtlnk-register-form]',
                    'post_name'      => 'member-register',
                    'post_title'     => 'Register',
                    'post_status'    => 'publish',
                    'post_type'      => 'page',
                    'ping_status'    => 'closed',
                    'comment_status' => 'closed',
               )
          );
     }
}

Similar to how we created the custom login page, this code hooks into the init action hook to check if a page with the slug “member-register” already exists. If the page does not exist, then we create the page, set its title to “Register”, and add the [dgtlnk-register-form] shortcode as the page content using wp_insert_post() function.

Render the Registration Form using the Shortcode

After the page has been created, we need to add the registration form to the page.

Since we’ve already set the content of the registration page to be [dgtlnk-register-form], we’ll use the add_shortcode() function and the following code in our theme’s functions.php file.

add_shortcode( 'dgtlnk-register-form', function ( $attributes, $content = null ) {
    $attributes = shortcode_atts( $default_attributes, $attributes );
    if ( is_user_logged_in() ) {
        return __( 'You are already signed in.', 'dgtlnk' );
    }
    ob_start(); 
    $attributes['errors'] = array();
    if ( isset( $_REQUEST['registration-errors'] ) ) {
        $error_codes = explode( ',', $_REQUEST['registration-errors'] );
        foreach ( $error_codes as $error_code ) {
            if ( $error_code == 'invalid-email' ) { ?>
    <p>Invalid Email.</p>
            <?php }
            if ( $error_code == 'duplicate-email' ) { ?>
    <p>An account with this email address already exists.</p>
            <?php }
        }
    }
    <form action="<?=wp_registration_url();?>" method="post">
        <p>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" required>
        </p>
        <p>
            <label for="email">Email Address</label>
            <input type="email" name="email" id="email" required>
        </p>
        <p>Registration confirmation will be emailed to you.</p>
        <p>
            <input type="submit" name="submit" value="Register"/>
        </p>
    </form>
    <?php $html = ob_get_contents();
    ob_end_clean();

    return $html;
});

In the above code, we first check to see if the user is logged in; if they’re not, we display the form.

If there are any errors – like if a user with the email already exists or they try to register with an invalid email – then we display the error above the registration form. The form fields we display are the same as the default WordPress registration form, but if we need to collect any additional information, we can add additional fields to the form.

Register the User on Form Submission

When the user submits the registration form, we need to create a new user and send them an email containing their password so that they can log in. This is done through the following code, added to our theme’s functions.php file.

add_action( 'login_form_register', function(){
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
        $redirect_url = home_url( 'member-register' );
        $email = $_POST['email'];
        $username = $_POST['username'];
        $errors = new WP_Error();
        if ( ! is_email( $email ) ) {
            $redirect_url = add_query_arg( 'registration-errors',  'invalid-email', $redirect_url );
            return $redirect_url;
        }
        if ( username_exists( $username ) || email_exists( $email ) ) {
            $redirect_url = add_query_arg( 'registration-errors',  'duplicate-email', $redirect_url );
            return $redirect_url;
        }
        $password = wp_generate_password( 12, false );
        $user_data = array(
            'user_login'    => $username,
            'user_email'    => $email,
            'user_pass'     => $password,
        );
        $user_id = wp_insert_user( $user_data );
       if ( ! is_wp_error( $user_id ) ) {
            $redirect_url = home_url( 'member-login' );
            wp_new_user_notification( $user_id, $password );
        }

        wp_redirect( $redirect_url );
        exit;
    }
});

This code first checks to see if the email is valid and whether or not a user with the same username or email address already exists on the site. If the email address is valid and a user with the same email address or username does not already exist, we create the new user using the wp_insert_user() function and send them a notification email using the default WordPress wp_new_user_notification() function.

Redirect Users to Branded Registration Page

The last thing left to do is to redirect any users trying to visit the default WordPress registration page to our custom registration page. We can do this by adding the following code to our functions.php file.

add_action( 'login_form_register', function() {
    if ( 'GET' == $_SERVER['REQUEST_METHOD'] ) {
        if ( is_user_logged_in() ) {
            $this->redirect_logged_in_user();
        } else {
            wp_redirect( home_url( 'member-register' ) );
        }
        exit;
    }
});

By simply adding a few lines of code, you can create a custom registration page on your website that not only matches your brand, but also can be used to collect additional information from users.

If you also need help implementing a branded login page or for any other digital marketing needs, reach out to us and we’d be more than happy to assist.