Building a Custom WordPress Registration Form with Flat UI


In a previous article, we walked through building a custom login form which can be embedded in a post or page using a shortcode and in a specific theme location using template tag.

A lot of WordPress users would prefer custom login and registration forms because the defaults are very basic, don’t match the website design and the registration form lacks an extra profile field.

Similar to our tutorial on building a Custom WordPress Login Form, this tutorial will help you build a custom registration form plugin using Flat UI form components — with great aesthetics.


Below is a screenshot of the WordPress Registration form that will be developed at the end of this tutorial.

Custom WordPress Registration Form

Coding the Registration Form Plugin

The actual registration of a user after completing a form is done using the WordPress wp_insert_user() function. It accepts an array of user data (username, password, email and other extra profile fields) and inserts them into the database thus registering the user.

In order not to make the form unnecessarily long, we will use the following profile fields in the registration form.

  1. Username
  2. Email
  3. Password
  4. Website
  5. First Name
  6. Last Name
  7. Nickname
  8. About/Bio

Let’s get started.

First, create a folder where all of the plugin files will be stored. E.g. Designmodo-registration-form

Include the plugin file header as follows:


  Plugin Name: Designmodo Registration Form
  Plugin URI:
  Description: Simple WordPress registration form plugin that just work
  Version: 1.0
  Author: Agbonghama Collins
  Author URI:

We are using form components from Designmodo’s Flat UI kit to beautify the form, hence it should be installed on the plugin folder.

Download the Flat UI kit, extract the files and copy the bootstrap, css and font folder to the plugin folder.

Create the plugin class and include the properties that will store the various form values.

class Designmodo_registration_form

    // form properties
    private $username;
    private $email;
    private $password;
    private $website;
    private $first_name;
    private $last_name;
    private $nickname;
    private $bio;

The magic __construct() method handles the registration of the shortcode [dm_registration_form] and enqueue the Bootstrap and Flat UI stylesheet powered by the wp_enqueue_scripts Action hook.

    function __construct()
        add_shortcode('dm_registration_form', array($this, 'shortcode'));
        add_action('wp_enqueue_scripts', array($this, 'flat_ui_kit'));

The registration_form method below contains the Registration HTML form code which also includes Flat UI form components, CSS IDs and class.

public function registration_form()


        <form method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
            <div class="login-form">
                <div class="form-group">
                    <input name="reg_name" type="text" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_name']) ? $_POST['reg_name'] : null); ?>"
                           placeholder="Username" id="reg-name" required/>
                    <label class="login-field-icon fui-user" for="reg-name"></label>

                <div class="form-group">
                    <input name="reg_email" type="email" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_email']) ? $_POST['reg_email'] : null); ?>"
                           placeholder="Email" id="reg-email" required/>
                    <label class="login-field-icon fui-mail" for="reg-email"></label>

                <div class="form-group">
                    <input name="reg_password" type="password" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_password']) ? $_POST['reg_password'] : null); ?>"
                           placeholder="Password" id="reg-pass" required/>
                    <label class="login-field-icon fui-lock" for="reg-pass"></label>

                <div class="form-group">
                    <input name="reg_website" type="text" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_website']) ? $_POST['reg_website'] : null); ?>"
                           placeholder="Website" id="reg-website"/>
                    <label class="login-field-icon fui-chat" for="reg-website"></label>

                <div class="form-group">
                    <input name="reg_fname" type="text" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_fname']) ? $_POST['reg_fname'] : null); ?>"
                           placeholder="First Name" id="reg-fname"/>
                    <label class="login-field-icon fui-user" for="reg-fname"></label>

                <div class="form-group">
                    <input name="reg_lname" type="text" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_lname']) ? $_POST['reg_lname'] : null); ?>"
                           placeholder="Last Name" id="reg-lname"/>
                    <label class="login-field-icon fui-user" for="reg-lname"></label>

                <div class="form-group">
                    <input name="reg_nickname" type="text" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_nickname']) ? $_POST['reg_nickname'] : null); ?>"
                           placeholder="Nickname" id="reg-nickname"/>
                    <label class="login-field-icon fui-user" for="reg-nickname"></label>

                <div class="form-group">
                    <input name="reg_bio" type="text" class="form-control login-field"
                           value="<?php echo(isset($_POST['reg_bio']) ? $_POST['reg_bio'] : null); ?>"
                           placeholder="About / Bio" id="reg-bio"/>
                    <label class="login-field-icon fui-new" for="reg-bio"></label>

                <input class="btn btn-primary btn-lg btn-block" type="submit" name="reg_submit" value="Register"/>

The validation method will validate the registration form data and ensure that:

  1. Username, email and password field shouldn’t be empty.
  2. Username should at least be four characters.
  3. Password length must be greater than five characters.
  4. All form values must be a valid data type.

The method returns an error message when an invalid data is entered into the form.

function validation()

        if (empty($this->username) || empty($this->password) || empty($this->email)) {
            return new WP_Error('field', 'Required form field is missing');

        if (strlen($this->username) < 4) {
            return new WP_Error('username_length', 'Username too short. At least 4 characters is required');

        if (strlen($this->password) < 5) {
            return new WP_Error('password', 'Password length must be greater than 5');

        if (!is_email($this->email)) {
            return new WP_Error('email_invalid', 'Email is not valid');

        if (email_exists($this->email)) {
            return new WP_Error('email', 'Email Already in use');

        if (!empty($website)) {
            if (!filter_var($this->website, FILTER_VALIDATE_URL)) {
                return new WP_Error('website', 'Website is not a valid URL');

        $details = array('Username' => $this->username,
            'First Name' => $this->first_name,
            'Last Name' => $this->last_name,
            'Nickname' => $this->nickname,
            'bio' => $this->bio

        foreach ($details as $field => $detail) {
            if (!validate_username($detail)) {
                return new WP_Error('name_invalid', 'Sorry, the "' . $field . '" you entered is not valid');


The registration method handles the registration of the user.
Before the method proceed in the registration of the user, it ensures no error was generated by the registration form, i.e no invalid data was detected.

    function registration()

        $userdata = array(
            'user_login' => esc_attr($this->username),
            'user_email' => esc_attr($this->email),
            'user_pass' => esc_attr($this->password),
            'user_url' => esc_attr($this->website),
            'first_name' => esc_attr($this->first_name),
            'last_name' => esc_attr($this->last_name),
            'nickname' => esc_attr($this->nickname),
            'description' => esc_attr($this->bio),

        if (is_wp_error($this->validation())) {
            echo '<div style="margin-bottom: 6px" class="btn btn-block btn-lg btn-danger">';
            echo '<strong>' . $this->validation()->get_error_message() . '</strong>';
            echo '</div>';
        } else {
            $register_user = wp_insert_user($userdata);
            if (!is_wp_error($register_user)) {

                echo '<div style="margin-bottom: 6px" class="btn btn-block btn-lg btn-danger">';
                echo '<strong>Registration complete. Goto <a href="' . wp_login_url() . '">login page</a></strong>';
                echo '</div>';
            } else {
                echo '<div style="margin-bottom: 6px" class="btn btn-block btn-lg btn-danger">';
                echo '<strong>' . $register_user->get_error_message() . '</strong>';
                echo '</div>';


Let me explain how the code in registration method handles user registration.

The $userdata array contains the form values entered by users, which will be used later by the wp_insert_user() function to insert the user into the database.

Next, it check if the validation method detects an error. If false, the wp_insert_user() function proceed in registering the user otherwise the error message returned by the validation method is displayed.

To embed the custom registration form to a WordPress page, a shortcode will be used.

The shortcode method below is the callback function that is called when [dm_registration_form] shortcode, that embeds the registration form that is inserted in a post or page.

function shortcode()


        if ($_POST['reg_submit']) {
            $this->username = $_POST['reg_name'];
            $this->email = $_POST['reg_email'];
            $this->password = $_POST['reg_password'];
            $this->website = $_POST['reg_website'];
            $this->first_name = $_POST['reg_fname'];
            $this->last_name = $_POST['reg_lname'];
            $this->nickname = $_POST['reg_nickname'];
            $this->bio = $_POST['reg_bio'];


        return ob_get_clean();

To give our plugin the awesome look powered by Flat UI, the flat_ui_kit method append the Bootstrap and Flat UI css stylesheet to WordPress header.

    function flat_ui_kit()
        wp_enqueue_style('bootstrap-css', plugins_url('bootstrap/css/bootstrap.css', __FILE__));
        wp_enqueue_style('flat-ui-kit', plugins_url('css/flat-ui.css', __FILE__));


The registration form plugin wouldn’t function unless the class is functioning.

new Designmodo_registration_form;

Hurray! We’ve completed the custom WordPress registration form plugin.

Use the Custom Registration Form Plugin

To embed the contact form in WordPress posts or pages, use the shortcode [dm_registration_form], while in a theme template, use the code below:

<?php echo do_shortcode('[dm_login_form]'); ?>

Wrap Up

I am quite sure a lot of us would love to have a custom registration form on our respective WordPress-powered websites. This tutorial should help you achieve it.

Grab the registration form plugin file here.

If you have any questions, let me know in the comments below.


  1. Yan Aug 27, 1:35 pm

    Nice plugin. Look forward to your next tutorial on how to extend it into another function where user can edit the profile on the front-end. I think that should complete the trilogy ;)

    • Agbonghama Collins Aug 27, 2:26 pm

      I haven’t thought about an article of that sort.

      I will give it a go but am not promising anything.

      Let’s keep our fingers crossed.

  2. Yan Aug 27, 6:17 pm

    Look forward to what may come. This (front-end profile editing) is the part that I struggle the most and is still is. Anyway, I think the last part isn’t too much of a stretch for you.

    Have a great day, Agbonghama.

  3. Rico Weigand Aug 30, 5:06 pm

    It would be great, if you could write a tutorial how to setup the wp-admin login Form with this design.

  4. Clyde Sep 2, 1:55 am


    This post really helped me. I am now trying to get the user to automatically login after registering.

    I have tried to use this piece of code.

    // Auto login and redirect to a page
    function auto_login_new_user( $user_id ) {

    // You can change home_url() to the specific URL,such as wp_redirect( ‘’ );
    wp_redirect( home_url() );
    add_action( ‘user_register’, ‘auto_login_new_user’ );

    to do it, but it does not seem to work. I did change the $register_user to $user_id instead.

    I also tried to use your login check credentials from the login for, but I got the same result.

    Perhaps you could help.


    • Rahman Mar 23, 3:07 pm

      Hi, I have a problem with the redirect when registration. I got an “issue Warning: Cannot modify header information – headers already sent by “. Can anyone tell me how can i get rid this issue?


  5. Matt Sep 2, 9:12 pm

    The next in the series should hopefully be a “Forgot / Lost Password Form” tutorial. As it more closely relates to login / registration. This task is more manageable size for a single tutorial IMO.

    After that, I like Yan’s suggestion. However, a brand new series dedicated to Front End Forms / User Profile Editing would better since subject / topic seems too big to be (potentially) glossed over in a single tutorial. Doesn’t necessarily fit with the current series. That’s my opinion, anyhow.

  6. hosseincode Sep 25, 12:56 pm

    thanks for the article, but you forgot to edit echo do_shortcode(‘[dm_login_form]’); piece to registration! it should be:

    echo do_shortcode(‘[dm_registration_form]’);

  7. Andy Sep 27, 3:51 pm

    Hey, thanks for the plugin.

    I’m currently developing a theme in debug mode (WP 4.0) and you plugin seems to produce a failure:
    Notice: Undefined index: reg_submit in /…/wp-content/plugins/designmodo-registration-form/designmodo-registration-form.php on line 192

    Have you any suggestions how to fix that?

    Thanks for reply and again for the plugin ;)

    • Andy Sep 28, 4:33 pm

      OK, solved the problem by myself:

      Change line 192 “if ($_POST[‘reg_submit’]) {” to “if (isset($_POST[‘reg_submit’])) {“.

      • Agbonghama Collins Sep 29, 11:15 am

        Sorry for the late reply.

        Here the correct conditional statement.

        if ( isset( $_POST[‘reg_submit’] ) ) && ( $_POST[‘reg_submit’] ) {

  8. Alexander Oct 2, 3:59 pm

    Vey nice looking form, but I’m wondering how would I add a role selector to this registration form?

  9. JT Nov 20, 12:34 pm

    Hi! Do you have any suggestions on how to add custom fields?

  10. John Kelton Jan 10, 3:10 am

    I think you should add reCaptcha because bots would try to spam registrations. I myself because the victim of it.

  11. Vikram Feb 3, 1:42 pm

    The code $this->validation()->get_error_message() throws exception – call to undefined function get_error_message();

    How it could be resolved ?

  12. kelvin Feb 10, 5:13 pm

    is there anyway of tying this with the wordpress new user norification unfcytion so that user get send emails upon registration?

  13. Paolo Apr 18, 4:56 pm

    Ops, one thing I forgot to ask mate. Since I have this code on functions.php

    add_filter(‘wp_nav_menu_items’, ‘add_login_logout_link’, 10, 2);
    function add_login_logout_link($items, $args) {
    if ( is_user_logged_in() ) {
    } else {
    wp_loginout( get_permalink( get_page_by_title( ‘La mia pagina’ ) ) );
    $loginoutlink = ob_get_contents();
    $items .= ”. $loginoutlink .”;
    return $items;

    It creates a Login/Logout button in the header. But when clicked on Login it takes me to the wp-login.php with a redirect to ‘La mia pagina’. How can I have it to take me to a specific login page I created with your login form?

  14. Thomas May 22, 8:53 am

    I’m using this with custom database and would like to have admin section to see those details,
    can you please help me with admin setup, what all things to be done to see menu in admin side and a page to get data from DB?

    The front end is working and your plugin really helped me getting things started

  15. Nazakat Jun 24, 10:01 am

    A nice tutorial..but i am finding a way.. how to send email confirmation link to new user .. Please guide me if you have any idea

  16. Elisse Jun 25, 2:14 am

    Is there anyway to embed this form into a landing page outside of the plugin on the wordpress site?

  17. Zamoroka Jul 19, 10:29 pm

    Hi. how to add a password confirmation field, and phone number with check?

  18. Francesco Apr 6, 1:21 am

    How to match the password after a new field called “repeat password” is created? I mean what is the function code?

  19. Lucas May 15, 10:54 pm

    The correct shortcode for the WordPress custom registration is “dm_registration_form”

  20. Laura Jul 14, 7:21 pm

    I’m trying to avoid the use of plugins, and instead do this via functions.php. I’m currently getting an error using this code as is in functions. What do I need to modify (obviously I didn’t use the header code)? I suspect it has to do with the first and last lines. The error I get refers to the final line, “new Designmodo_registration_form;”

  21. Patrick Kamelan Jan 30, 11:26 pm

    I’ve created all the file, and I’ll know how do I use the files in wordpress.

Leave a Reply

* Minimum length: 20 characters