Adding Steps to the Sign-up Flow
Introduction
Since 1.1.0, developers can add custom steps to the sign-up flow. On version 1.4.0, the process of expanding the sign-up became much more flexible and easier to use.
Step 1: Add a Custom Step
To add a new step to your sign-up flow, you’ll need to use the function wu_add_signup_step. The sign-up flows load pretty early in during the WordPress startup, so we need to hook into the ‘init’ action hook.
This code can be placed inside the functions.php file of your main site’s active theme. Let’s say we want to add a User Information step, where we’ll collect the user’s first and last name.
/**<br> * We need to hook as soon as we can, to make sure we <br> * modify the steps before they get used<br> */<br>add_action('init', function() {<br> <br> /**<br> * First, we add a new step. The ID of this step is customer-info<br> * We also pass a order value of 33, that means that our custom step will sit between<br> * the third (order 30) and forth (order 40) steps.<br> */<br> wu_add_signup_step('customer-info', 33, array(<br> 'name' => 'User Information',<br> ));<br><br>});
Step 2: Adding Fields to your Step (or any other step, really)
After creating our step, we should be able to add fields to it. To add fields, we’ll make use of the function wu_add_signup_field().
Inside the same hook, we’ll add three fields: First Name, Last Name, and a submit button for that step.
/**<br> * We need to hook as soon as we can, to make sure we <br> * modify the steps before they get used<br> */<br>add_action('init', function() {<br><br> /**<br> * First, we add a new step. The ID of this step is customer-info<br> * We also pass a order value of 33, that means that our custom step will sit between<br> * the third (order 30) and forth (order 40) steps.<br> */<br> wu_add_signup_step('customer-info', 33, array(<br> 'name' => 'User Information',<br> ));<br><br> /**<br> * Now we add the fields<br> * The first argument tells the API the step we want to add fields to, in our case, customer-info<br> * The type argument tells which type of field we should render, we currently support<br> * text, number, password, email, url, html, submit<br> */<br> wu_add_signup_field('customer-info', 'first_name', 10, array(<br> 'name' => 'First Name',<br> 'tooltip' => "Tooltip text to give the user tips about the field (optional)",<br> 'type' => 'text',<br> ));<br><br> wu_add_signup_field('customer-info', 'last_name', 20, array(<br> 'name' => 'Last Name',<br> 'tooltip' => "Tooltip text to give the user tips about the field (optional)",<br> 'type' => 'text',<br> ));<br><br> /**<br> * Lastly, we add a submit button for that step<br> */<br> wu_add_signup_field('customer-info', 'submit', 100, array(<br> 'name' => 'Go to next step',<br> 'type' => 'submit',<br> ));<br><br>});
Note that the first value the function takes is the id of the step we want to add that field to, and the third value the function takes refers to the order of the fields.
When adding new fields. you are limited to custom steps you created. You can also add fields to every step that has a form display (like the domain and account steps). Use the order attribute to include your custom fields in the right positions.
Field Types
WP Ultimo currently supports the following field types: text, number, password, email, url, select, html, and submit.
The select field takes an ‘options’ argument, that should contain an array with key => values.
The HTML field takes a ‘content’ argument that takes pretty much everything you would like to put in there.
Take a look at the file /inc/class-wu-signup.php to have a better feeling of how the fields array should be structured.
Retrieving the data
All the extra fields added to the sign-up flow get saved as default WordPress user meta data. That means that you don’t have to do anything else in order to save the contents of the extra fields you’ve added to the sign-up. It just works. This data can then be retrieved using standard WordPress functions like get_user_meta.
We also added a handy shortcode to display that information on the front-end: [wu_user_meta]. It takes a user_id argument (which you can leave blank as it defaults to the current site’s owner id) and meta_name, which describes the name of the meta info you want to retrieve. To get the user’s last name, for example, you would simply add a [wu_user_meta meta_name="last_name"].
Another advantage of this approach is that WordPress already uses meta data to store major information about the user. If you create fields that match the specific keys used by WordPress, that information will get automatically updated. This means that in order to update the First and Last Name fields on the user profile’s page, you can just create two fields with the ids of first_name and last_name, like in the example above.