Dynamically integrate custom fields into the BuddyPress registration process – BuddyPress Profile Pro

This documentation explains how to dynamically integrate custom fields into the BuddyPress registration process and save them into user meta.

Step 1: Define User Meta Keys

Define all user meta keys, their field types, and labels in a centralized function:

function wbcom_get_meta_keys() {
    return [
        'wbbpp_bprm_contact_details_bprms_phone' => [
            'type'  => 'textbox',
            'label' => 'Phone Number',
        ],
        'wbbpp_bprm_contact_details_bprms_email' => [
            'type'  => 'email',
            'label' => 'Public Email',
        ],
        'wbbpp_bprm_contact_details_1732005551' => [
            'type'  => 'calender_field',
            'label' => 'Target Date',
        ],
    ];
}

Step 2: Add Custom Fields to Registration Form

Dynamically add the custom fields to the BuddyPress registration form:

function wbcom_add_dynamic_custom_fields_to_bp_registration() {
    $meta_keys = wbcom_get_meta_keys(); // Get all meta keys.

    echo '<div class="custom-bp-registration-fields">';
    echo '<h4>' . esc_html__('Additional Details', 'buddypress-profile-pro') . '</h4>';

    foreach ($meta_keys as $meta_key => $field_details) {
        $field_label = $field_details['label']; // Use label explicitly.
        $field_type  = $field_details['type'];

        echo '<div class="bp-registration-field">';
        echo '<label for="' . esc_attr($meta_key) . '">' . esc_html($field_label) . '</label>';

        // Generate the HTML field based on the type.
        switch ($field_type) {
            case 'textbox':
                echo '<input type="text" name="' . esc_attr($meta_key) . '" id="' . esc_attr($meta_key) . '" value="" />';
                break;
            case 'email':
                echo '<input type="email" name="' . esc_attr($meta_key) . '" id="' . esc_attr($meta_key) . '" value="" />';
                break;
            case 'calender_field':
                echo '<input type="date" name="' . esc_attr($meta_key) . '" id="' . esc_attr($meta_key) . '" value="" />';
                break;
        }

        echo '</div>';
    }

    echo '</div>';
}
add_action('bp_after_signup_profile_fields', 'wbcom_add_dynamic_custom_fields_to_bp_registration');

Step 3: Validate and Save Fields During Registration

Validate and save custom fields during registration:

function wbcom_validate_and_save_signup_fields($meta) {
    $meta_keys = wbcom_get_meta_keys(); // Get all meta keys.

    foreach ($meta_keys as $meta_key => $field_type) {
        if (isset($_POST[$meta_key])) {
            $value = sanitize_text_field(wp_unslash($_POST[$meta_key]));

            // Add validation based on field type.
            switch ($field_type) {
                case 'email':
                    if (!is_email($value)) {
                        bp_core_add_message(__('Invalid email address.', 'buddypress-profile-pro'), 'error');
                        return $meta;
                    }
                    break;
                case 'calender_field':
                    if (!preg_match('/^d{4}-d{2}-d{2}$/', $value)) {
                        bp_core_add_message(__('Invalid date format.', 'buddypress-profile-pro'), 'error');
                        return $meta;
                    }
                    break;
                case 'textbox':
                    if (empty($value)) {
                        bp_core_add_message(__('This field is required.', 'buddypress-profile-pro'), 'error');
                        return $meta;
                    }
                    break;
            }

            // Save validated value in the meta array.
            $meta[$meta_key] = $value;
        }
    }

    return $meta;
}
add_filter('bp_signup_usermeta', 'wbcom_validate_and_save_signup_fields');

Step 4: Save Fields After Activation

Save custom fields to user meta during BuddyPress user activation:

function wbcom_save_custom_fields_after_activation($user_id, $key, $user_data) {
    $meta_keys = wbcom_get_meta_keys(); // Get all meta keys.
    $signup_meta = maybe_unserialize($user_data['meta']);

    foreach ($meta_keys as $meta_key => $field_type) {
        if (isset($signup_meta[$meta_key])) {
            $value = sanitize_text_field($signup_meta[$meta_key]);
            update_user_meta($user_id, $meta_key, $value);
        }
    }
}
add_action('bp_core_activated_user', 'wbcom_save_custom_fields_after_activation', 10, 3);

Notes

• Dynamic Fields: This implementation is highly dynamic. You only need to define your fields in the wbcom_get_meta_keys() function.
• Validation: Validation is added for email and date fields. You can extend this logic for other field types.
• Scalability: Easily add new fields by extending the wbcom_get_meta_keys() function.

Happy coding with BuddyPress!