This post documents the new wpmem_inc_registration function updates for the upcoming 2.9 release. This content is currently only available to premium members. If you are not currently a member, find out more here.
Changed the way the form is constructed so that elements of form construction can be hooked into easier.
- username (can be filtered as a row, see next item)
- rows in the fields array (rows are put into an array which can be filtered before the form construction is started)
- tos (already handled as a row, can already be filtered, new row filter above also applies)
- recaptcha (recaptcha section now filtered as a row, recaptcha itself is already filterable in the recaptcha function)
- hidden fields (hidden fields can be filtered separately from the form)
- buttons (button area can be filtered separately from the form)
- required field notation (can be changed via defaults, discussed later)
- heading (wrapper can be changed via defaults, text already filterable)
- fieldset wrapper (wrapper can be changed via defaults)
- attribution if enabled
- nonce if enabled (can now also be enabled via defaults)
- form tag (class and id can be changed via defaults)
- anchor tag
- div wrapper (wrapper can be changed via defaults)
- txt shortcode wrapper (wrapper can be changed via defaults)
- strip line breaks (can be turned on or off via defaults, defaults to on)
Existing filter hooks remain intact. However, depending on the level of complexity of filter functions using the hook, your filter functions may need to be updated. Any filter functions that are using str_replace to do a search and replace will need to consider if form output has changed for the search string. If line breaks are stripped in both the existing filter function and the new process, it will likely be compatible. I tried to be as accomodating as possible, but all filter functions using wpmem_inc_registration should be evaluated for compatibility.
New hooks have been added to make customization easier.
- ‘wpmem_register_form_args’ filters array of default tags, labels, and small items
- ‘wpmem_register_fields_arr’ filters the fields array – THIS MAY CHANGE
- ‘wpmem_register_form_rows’ filters the form field rows array before adding to the form
- ‘wpmem_register_captcha_row’ filters the captcha row before it is added to the form
- ‘wpmem_register_hidden_fields’ filters the hidden fields before adding to the form
- ‘wpmem_register_form_buttons’ filters the buttons wrapper and inputs before adding to the form
Existing filter hooks remain intact:
- ‘wpmem_register_form_before’ filter to add any string to the beginning of the registration form
- ‘wpmem_register_form’ filter to change any element of the generated HTML string of the registration form
- ‘wpmem_register_heading’ filter to change the heading of the registration form
- ‘wpmem_tos_link_txt’ filter to change the text (and link) for the TOS (Terms of Service) acknowledgement
The default arguments (which can be merged with values from the wpmem_register_form_args filter) has been added to make minor customizations much easier. This will allow things such as wrapper tags and small elements to be changed with a very minor filter. Here is a list of the defaults in the array:
<pre>// wrappers 'heading_before' => '<legend>', 'heading_after' => '</legend>', 'fieldset_before' => '<fieldset>', 'fieldset_after' => '</fieldset>', 'main_div_before' => '<div id="wpmem_reg">', 'main_div_after' => '</div>', 'txt_before' => '[wpmem txt]', 'txt_after' => '[/wpmem txt]', 'row_before' => '', 'row_after' => '', 'buttons_before' => '<div class="button_div">', 'buttons_after' => '</div>', // classes & ids 'form_id' => '', 'form_class' => 'form', 'button_id' => '', 'button_class' => 'buttons', // required field tags and text 'req_mark' => '<font class="req">*</font>', 'req_label' => __( 'Required field', 'wp-members' ), 'req_label_before' => '<div class="req-text">', 'req_label_after' => '</div>', // buttons 'show_clear_form' => true, 'clear_form' => __( 'Reset Form', 'wp-members' ), 'submit_register' => __( 'Register', 'wp-members' ), 'submit_update' => __( 'Update Profile', 'wp-members' ), // other 'strip_breaks' => true, 'use_nonce' => false, 'wrap_inputs' => true, 'n' => "\n", 't' => "\t",
NOTE: since the function uses wp_parse_args to merge the filtered arguments with the defaults, you do not need to use this entire set of defaults to filter individual elements. You only need to provide the element you are changing in the filter. For example, if you simply want to add a class to the fieldset html tag, you can do so like this:
add_filter( 'wpmem_register_form_args', 'my_form_defaults' );
function my_form_defaults( $args ) {
$args=array('fieldset_before'=>'<fieldset class="some-class">');
return $args;
}Here is an example of changing a wrapper altogether. Suppose you do not want to use the HTML label
tag but rather want your heading to be an h2 tag. That could be done like this:
add_filter( 'wpmem_register_form_args', 'my_form_defaults' );
function my_form_defaults( $args ) {
$args = array(
'heading_before' => '<h2>',
'heading_after' => '</h2>'
);
return $args;
}Most of these defaults are not changed from the original function, so the form that is generated using the new process will be pretty much the same as the form is currently. The idea here is low impact – there is little change in the way of output, but a new process of generating the form so as to allow a greater degree of control in customization.
One thing that does change is the form button text. Previously, “Submit” was used for both states of the form (New Registration and Update User Profile). I am adding different text for both states, and those can be customized via filtering. Instead of “Submit”, it will deliver a default of “Register” for new registration and “Update Profile” for profile update.
Also a button change is the text for the form reset button. This was previously “Clear Form” which was actually a misnomer. There is no such function in HTML, and it really was a form reset which resets the form to it’s original state. So for a new registration, this would clear the form. But a user profile update would be resetting the form to the original values that loaded. So changing this to “Reset Form” is more appropriate.
When customizing the forms to for integration into other themes, there is often a default button CSS in the theme that will be defined for the submit button, but the reset button, which is not really used all that much, may not have any styling. It’s easy to copy theme CSS for buttons to a custom stylesheet that includes the reset button, but what if you feel like you don’t really care if it is there or not. I added a boolean (true/false) in the default arguments that can turn off the reset button.
TRANSLATION NOTE: New button text is going to probably require updates to the .po/.mo files. If you are using a specific translation and know how to work with these, feel free to update accordingly and send me an update.
A new element that is included in the defaults is a wrapper for the field rows. I have had requests in the past for being able to wrap each row in the form with a
div tag. This is helpful for complex form layouts such as side-by-side fields, etc. This element is row_before and row_after in the wrapper section. Note the default is null (”). If you want a row wrapper, now instead of having to write a filter function on the entire form, you can add a wrapper by filtering the defaults. That could be something as simple as:
add_filter( 'wpmem_register_form_args', 'my_form_defaults' );
function my_form_defaults( $args ) {
$args = array(
'row_before' => '<div class="row">',
'row_after' => '</div>'
);
return $args;
}Another element that people have asked about customizing which in the past was difficult was removing the div wrapper around the input fields (mostly, these requests were combined with the previous request which was wrapping the whole row so that the label and input were inside the same div). If you want these off, you can now just toggle them off with a boolean (true/false) in the defaults. Here’s an example:
add_filter( 'wpmem_register_form_args', 'my_form_defaults' );
function my_form_defaults( $args ) {
$args = array( 'wrap_inputs' => false );
return $args;
}On occasion in the past, users unfamiliar with CSS and using a theme where some sizes might lead to form elements wrapping, an easy fix was needed to give an extra div at the end of each row. This workaround was mentioned here. But now, using the new arguments filter, adding this will be even easier as you could just add it using the row_after like this:
add_filter( 'wpmem_register_form_args', 'my_form_defaults' );
function my_form_defaults( $args ) {
$args = array( 'row_after' => '<div class="clear"></div>' );
return $args;
}Most of the other defaults should be relatively self explanatory. I hope that it is relatively obvious that if you make changes to the wrapper, tags, ids, classes, etc, that is going to require CSS work to utilize. Customizing these default elements is to provide designers (and developers) an easy way of changing those elements they need to change. These are generally folks who have some level of experience with CSS and need to add or remove tags so they can get exactly what they want from the form. In the past, filtering the whole form did provide this, but it was more difficult for a designer who may have limited php knowledge to write some parsing script to search and replace through an html string. I am hoping this makes it far easier to get granular with form layout (and I am hoping to see some spectacular design customization – feel free to send links or screenshots).