Our client want User Date Of Birth Field in Worpdress Registration Form with restrict the minimum age of registering users has to be 18. For Registration we using Theme My Login — WordPress Plugins and for DOB Calendar use the fabulous jQuery UI Datepicker
1st – How to add jQuery Datepicker in WordPress website
In WordPress, Very easy to add jQuery Datepicker by adding few line code.
to use jQuery Datepicker in your wordpress website you need to load require jQuery script and css for Datepicker.
with use of WordPress wp_enqueue_scripts action load jQuery Datepicker CSS and JS file. add below code in your active theme functions.php file
add_action( 'wp_enqueue_scripts', 'wdo_theme_enqueue_styles', 1000);
function wdo_theme_enqueue_styles() {
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_register_style( 'jquery-ui', 'https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'jquery-ui' );
}
In Form in which you want to use Datepicker add below jQuery script
Let’s back on our main task – Set minimum age limit with the jQuery UI Datepicker
With following few lines Javascript code it’s very easy to set up a Date of Birth field so that the a user has to be a least 18 years old from current Day.
$(function() {
$("#dob").datepicker(
{
minDate: new Date(1900,1-1,1), maxDate: '-18Y',
dateFormat: 'dd/mm/yy',
defaultDate: new Date(1970,1-1,1),
changeMonth: true,
changeYear: true,
yearRange: '-110:-18'
}
);
});
To use jQuery UI Datepicker we need load jQuery UI Datepicker css and js files with use of WordPress wp_enqueue_scripts action below code
add_action( 'wp_enqueue_scripts', 'wdo_enqueue_styles_script');
function wdo_enqueue_styles_script() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/css/ui-lightness/jquery-ui-1.8.16.custom.css', array(''));
wp_enqueue_script('wdo-js-dp',get_stylesheet_directory_uri().'/js/jquery-ui-1.8.16.custom.min.js',array('jquery'));
wp_enqueue_script('wdo-js-dpa',get_stylesheet_directory_uri().'js/jquery-ui-sliderAccess.js',array('wdo-js-dp'));
}
// make sure you uploaded css, js files on correct folder path given in above code
With load JS, CSS files by above code it get loaded in all pages of your wordpress sites. so if you sure you need Jquery Datepicker only on User Registration page than i recommended instead of load Datepicker library files by wp_enqueue_scripts action direct add it on register-form.php like below
How to add additional Field in Registration form by Theme By login plugin
– Move register-form.php file from Theme By login plugin folder to active theme.
– Add Date of Birth field code where you want to show it
Validate DOB field required
add_filter( 'registration_errors', 'registration_custom_errors', 0, 3 );
function registration_custom_errors( $errors, $sanitized_user_login, $user_email ) {
if ( ! isset( $_POST['user_dob'] ) || $_POST['user_dob']=='' ) {
$errors->add( 'user_dob_error', __( 'ERROR: You must enter Date of Birth.', 'theme-my-login' ) );
}
return $errors;
}
Save DOB field value in Database
On User form submit action we need capture custom added DOB field value and store in Database
add_action( 'user_register', 'custom_update_user' );
function custom_update_user( $user_id ) {
if ( isset( $_POST['user_dob'] ) && $_POST['user_dob']!='' ) {
update_user_meta( $user_id, '_user_dob', $_POST['user_dob'] );
}
}
Show User’s DOB in wp-admin side Users list page
add_filter( 'manage_users_columns', 'wdo_usr_column_addded_to_user' );
function wdo_usr_column_addded_to_user( $column ) {
$column['_user_dob'] = 'DOB';
return $column;
}
add_filter( 'manage_users_custom_column', 'wdo_usr_column_addded_to_user_row', 10, 3 );
function wdo_usr_column_addded_to_user_row( $val, $column_name, $user_id ) {
global $wpdb;
if ( '_user_dob' == $column_name ) {
//$user = get_userdata( $user_id );
$dob = get_user_meta( $user_id, '_user_dob', true );
if($dob =='') $dob ='--';
return $dob ;
}
}