0

I'm creating a form to allow users to update their bio ('description' metadata) on a custom profile page.

Current values are successfully retrieved and new values are being stored to the DB, but with a few unexpected issues:

  1. After clicking 'Save', the page updates with a blank field. I have to refresh to show the updated value. Can I get this to update automatically on form submit?
  2. Is there a better alternative to an HTML textarea tag? I don't like the idea of the textarea being below the Save button. I see there is a wp_editor() function but I don't understand the required syntax to use it.

Also, please feel free to give any pointers on my function. I'm new at PHP so I'm sure it's not 100% solid.

    function show_user_bio_edit_form() {
    global $current_user;

    $get_user_bio = get_user_meta( $current_user->ID, 'description', true);

    ?>
    <form id="update_user_bio" name="update_user_bio" action="" method="POST">
      <button type="submit">Save</button>
    </form>

    <textarea id="bio_field" name="bio_field" form="update_user_bio"><?php echo $get_user_bio; ?></textarea>

    <?php
    $update_user_bio = wp_kses_post( $_POST['bio_field'] );

    update_user_meta( $current_user->ID, 'description', $update_user_bio);
}
add_shortcode('user_bio_edit', 'show_user_bio_edit_form');
0

( I'm not giving you the full code for easy copy/paste... I.e. You should manually implement each changes/suggestion mentioned below. ;-) )

Making the code works as expected

  1. You should first update the meta (by calling update_user_meta()) and only then you may call get_user_meta() to retrieve the updated meta value. But your code is doing the exact opposite, hence the returned meta value is the old one in the database.

    So basically, move the bits after the <?php to above the $get_user_bio = get_user_meta() part:

    $update_user_bio = wp_kses_post( $_POST['bio_field'] );
    
    update_user_meta( $current_user->ID, 'description', $update_user_bio );
    
    $get_user_bio = get_user_meta( $current_user->ID, 'description', true );
    
  2. "I don't like the idea of the textarea being below the Save button." — then just move the textarea to above the button...:

    <textarea id="bio_field" name="bio_field"><?php echo $get_user_bio; ?></textarea>
    <button type="submit">Save</button>
    
  3. Regarding wp_editor(), you can check the details (syntax, parameters, etc.) here. But you'd replace the entire <textarea></textarea> with this:

    <?php wp_editor( $get_user_bio, 'bio_field' ); ?>
    

Additional issues

  1. A shortcode function/callback should always return the output and not echoing it, but if you need to echo it, then you would want to use output buffering. E.g.:

    function my_shortcode_callback() {
        // Call this before you echo **anything**.
        ob_start();
    
        echo 'something good..';
        ?>
            This is echoed, too.
        <?php
    
        // And call this one at the end of the function.
        return ob_get_clean();
    }
    
  2. You should check if the current user is authenticated (or logged-in) and if not, you should not update the meta or display the form. And for that purpose, you can use is_user_logged_in():

    function show_user_bio_edit_form() {
        if ( ! is_user_logged_in() ) {
            return '';
        }
        ...
    }
    
  3. You should check if the form was actually submitted.. or technically, check whether $_POST['bio_field'] is set/defined:

    if ( isset( $_POST['bio_field'] ) ) {
        $update_user_bio = wp_kses_post( $_POST['bio_field'] );
    
        update_user_meta( $current_user->ID, 'description', $update_user_bio );
    }
    

Other things you should consider

  1. I strongly suggest you to use nonces in your form and escape output used in form fields — in fact, wherever necessary like when displaying a text which might contain special characters such as » — but I'm not going to cover that in details and you can find more details on the theme security or plugin security handbook.

  2. You should update the meta data as early as possible before the page is loaded. You can do that via hooks like template_redirect which is triggered before the template is loaded. Using this approach would also allow you to perform redirection (back to the form page) which can avoid duplicate form submission that may happen due to an unintentional page reload.

  • Thanks Sally CJ. I didn't use conditional logic to check if the user is logged in only because the page where this form is displayed already has a mechanism for hiding the pages contents and telling the user to login, so I won't be needing that. In addition, the textarea tag can't be placed within a form, hence why it has a name attribute to identify the form it belongs to. But I'm going to look more into wp_editor() – Joseph Nov 1 at 20:47
  • Perhaps this fiddle can help you with the CSS thing (placing the textarea above the Save button). But I'm not adding that to the answer, and do let me know how the updating goes - I hope it works now.. – Sally CJ Nov 3 at 11:12
  • Did the answer help you with updating the meta data?? Have you've tried wp_editor()? If the answer helped, consider accepting it, or at the very least, let me know what's your solution. :( – Sally CJ Nov 15 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.