Wordpress: Add a custom radio input field to user profile

Question

I have this code to add a custom field to user profile. It works fine but it is only useful for 'text' input type.

I need to add a 'radio' input type. I need help with the code.

/***********************************************************/
/**********  Custom User field  ************/
/***********************************************************/
add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );

function extra_user_profile_fields( $user ) { 
    
?>
    <h3><?php _e("Extra profile information", "blank"); ?></h3>

    <table class="form-table">
    <tr>
        <th><label for="equivalence_surcharge"><?php _e("Equivalence Surcharge"); ?></label></th>
        <td>
            <input type="text" name="equivalence_surcharge" id="equivalence_surcharge" value="<?php echo esc_attr( get_the_author_meta( 'equivalence_surcharge', $user->ID ) ); ?>" class="regular-text" /><br />
            <span class="description"><?php _e("Equivalence Surcharge"); ?></span>
        </td>
    </tr>

    </table>
<?php }
    
    
    add_action( 'personal_options_update', 'save_extra_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_user_profile_fields' );

function save_extra_user_profile_fields( $user_id ) {
    if ( empty( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'update-user_' . $user_id ) ) {
        return;
    }
    
    if ( !current_user_can( 'edit_user', $user_id ) ) { 
        return false; 
    }
    update_user_meta( $user_id, 'equivalence_surcharge', $_POST['equivalence_surcharge'] );

}

Answer 1

To add radio buttons input field to user profile use the following:

add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );
function extra_user_profile_fields( $user ) {
    $meta_key   = 'equivalence_surcharge'; // <== Define the meta key
    $meta_value = get_user_meta( $user->id, $meta_key, true ); // Get meta value
    $index      = 0; // Initialize

   // Define radio button options option value / label pairs, in the array
    $options    = array(
        'option_1' => __('Option 1', 'text-domain'),
        'option_2' => __('Option 2', 'text-domain'),
        'option_3' => __('Option 3', 'text-domain'),
    );

    echo '<style>.extra-infos label{display:block; padding:2px 0}</style>'; // CSS inline styles
    
    echo '<h3>'. __('Extra profile information', 'text-domain') . '</h3>
    <table class="extra-infos"><tr>
    <th style="text-align:left; padding:0 0 8px">'.__('Equivalence surcharge', 'text-domain').'</th></tr>
    <tr><td>';

    foreach ( $options as $option => $label ) {
        printf('<label for="radio_%d">
            <input type="radio" id="input-radio_%d" class="input-radio" name="%s" value="%s" %s> %s
        </label>', 
        $index, $index, $meta_key, $option, checked($option, $meta_value, false), $label );
        $index++;
    }
    echo '</td></tr></table><br>';
}

add_action( 'personal_options_update', 'save_extra_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_user_profile_fields' );

function save_extra_user_profile_fields( $user_id ) {
    if ( empty( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'update-user_' . $user_id ) ) {
        return;
    }
    
    if ( ! current_user_can( 'edit_user', $user_id ) ) { 
        return; 
    }

    $meta_key   = 'equivalence_surcharge'; // Define the meta key
    $meta_value = isset($_POST[$meta_key]) ? esc_attr($_POST[$meta_key]) : '';

    update_user_meta( $user_id, $meta_key, $meta_value );
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

You will get something like:

Display the radio buttons in a row (horizontaly):

You can display the radio buttons in a row by changing:

echo '<style>.extra-infos label{display:block; padding:2px 0}</style>'; // CSS inline styles

with:

echo '<style>.extra-infos label{display:inline-block; padding:2px 20px 2px 0}</style>'; // CSS inline styles

and you will get something like: