wordpress allow admin to edit user profile with custom fields

Question

I am trying to customize a Wordpress site user's profile with some custom fields. The custom fields should then display on the front-end. I've managed to display the fields on the user admin dashboard to allow the site admin to make updates.

Problem 1: However, the updates are not saving in the dashboard after saving the profile.

Problem 2: The updated fields are not displaying on the front-end in the user profile.

Here's the code I have in my child-theme's functions.php:

//add field for editing on user profile

/**
 *  @param $user
 *  @author Webkul edited by Wano
 */

// add_action('show_user_profile', 'wk_custom_user_profile_fields');
add_action('edit_user_profile', 'wk_custom_user_profile_fields');

function wk_custom_user_profile_fields($user)
{
    echo '<h3 class="heading">Custom Fields</h3>';

?>

    <table class="form-table">
        <tr>
            <th><label for="due">Amount Due</label></th>

            <td><input type="text" class="input-text form-control" name="due" id="due" />
            </td>
        </tr>
        <tr>
            <th><label for="status">Payment Status</label></th>

            <td>
                <select id="status" name="status" size="">
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="received">Payment received</label></th>

            <td><input type="text" class="input-text form-control" name="received" id="received" />
            </td>
        </tr>
    </table>

<?php
}

Here's what it looks like in the dashboard. All good so far.

Then I'm saving the fields here.

//Save custom user profile meta data fields
//add_action('personal_options_update', 'wk_save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'wk_save_custom_user_profile_fields');

/**
 *   @param User Id $user_id
 */
function wk_save_custom_user_profile_fields($user_id)
{

    // $custom_data = $_POST['due'];
    // update_user_meta($user_id, 'due', $custom_data);

    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    update_user_meta($user_id, 'due', $_POST['due']);
    update_user_meta($user_id, 'status', $_POST['status']);
    update_user_meta($user_id, 'received', $_POST['received']);
}

?>

And then the fields don't show up on the front-end. Any help would be greatly appreciated.

This is a screenshot of the profile page called dashboard.php. My custom code is between the comments //Code by Wayne.

What I'm displaying is the logged in users username and then below I intend to display the custom fields $due, $status and $received. I'm including custom-code.php for the code.

Here's what I've have in custom-code.php to display the fields which is obviously very wrong.

<?php 
    do_action('wk_custom_user_profile_fields', $due);
    do_action('wk_custom_user_profile_fields', $status);
    do_action('wk_custom_user_profile_fields', $received);
?>

Andrii Kovalenko Andrii Kovalenko · Accepted Answer · 2020-12-23T23:17:40

Seems like logic is right.

Probably, fetching values to your HTML template could solve the problem

add_action( 'edit_user_profile', 'wk_custom_user_profile_fields' );

function wk_custom_user_profile_fields( $user ) {
    $due      = get_user_meta( $user->ID, 'due', true );
    $status   = get_user_meta( $user->ID, 'status', true );
    $received = get_user_meta( $user->ID, 'received', true );

    echo '<h3 class="heading">Custom Fields</h3>';

    ?>

    <table class="form-table">
        <tr>
            <th><label for="due">Amount Due</label></th>

            <td><input type="text" class="input-text form-control" name="due" id="due" value="<?php echo esc_attr( $due ) ?>"/>
            </td>
        </tr>
        <tr>
            <th><label for="status">Payment Status</label></th>

            <td>
                <select id="status" name="status" size="">
                    <option value="pending" <?php selected( $status, 'pending' ) ?>>Pending</option>
                    <option value="approved" <?php selected( $status, 'approved' ) ?>>Approved</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="received">Payment received</label></th>

            <td><input type="text" class="input-text form-control" name="received" id="received" value="<?php echo esc_attr( $received ) ?>"/>
            </td>
        </tr>
    </table>

    <?php
}

I think, showing fields without do_action could solve the problem

custom-code.php content:

<?php

    $user_id = get_current_user_id();
    
    if ( ! is_user_logged_in() ) {
        return;
    }
    
    $due      = get_user_meta( $user_id, 'due', true );
    $status   = get_user_meta( $user_id, 'status', true );
    $received = get_user_meta( $user_id, 'received', true );
    
    echo esc_html( $due );
    echo esc_html( $status );
    echo esc_html( $received );

wordpress allow admin to edit user profile with custom fields

1 Answers