adding custom user input fields in WordPress admin dashboard gives error The link you followed has expired. Please try again

Question

I am developing a wordpress theme for themeforest so its for commercial use and adding a custom input field of social media to the user menu in the WordPress dashboard gives error after i click Update Profile. The front-end appears correctly but when i submit it by clicking Update Profile button it takes me to a next page where it says

The link you followed has expired.Please try again.

it works when i remove my custom input fields. Following are its screenshots

Following is my code (written in a extra-user-fields.php file which i include in functions.php):

<?php

add_action( 'show_user_profile', '_themename_extra_user_profile_fields' );
add_action( 'edit_user_profile', '_themename_extra_user_profile_fields' );
add_action('user_new_form', '_themename_extra_user_profile_fields');

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

    <table class="form-table">

    <?php wp_nonce_field( '_themename_user_extra_fields_verify' ); ?>

    <tr>
        <th><label for="facebook"><?php _e("Facebook Profile Link","_themename"); ?></label></th>
        <td>
            <input type="text" name="facebook" id="facebook" value="<?php echo esc_url( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text"/><br />
            <span class="description"><?php _e("Please enter your facebook profile link."); ?></span>
        </td>
    </tr>
    <tr>
        <th><label for="twitter"><?php _e("Twitter Profile Link","_themename"); ?></label></th>
        <td>
            <input type="text" name="twitter" id="twitter" value="<?php echo esc_url( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text"/><br />
            <span class="description"><?php _e("Please enter your twitter profile link."); ?></span>
        </td>
    </tr>
    </table>
<?php }

    function _themename_save_extra_user_profile_fields( $user_id ) {

        if ( !current_user_can( 'edit_user', $user_id ) ) {
            wp_die( __( 'You are not allowed to be on this page.', '_themename' ) );
        }
        check_admin_referer( '_themename_user_extra_fields_verify' );

        $escaped_facebook_url   = esc_url($_POST['facebook']);
        $escaped_twitter_url    = esc_url($_POST['twitter']);
        update_user_meta( $user_id, 'facebook', $escaped_facebook_url);
        update_user_meta( $user_id, 'twitter', $escaped_twitter_url);
    }
    
    add_action( 'personal_options_update', '_themename_save_extra_user_profile_fields' );
    add_action( 'edit_user_profile_update', '_themename_save_extra_user_profile_fields' );
    add_action('user_register', '_themename_save_extra_user_profile_fields');
?>

The error only gets removed when i completely remove the _themename_save_extra_user_profile_fields() function and its add_action and completely empties the _themename_extra_user_profile_fields() function too.

Also i researched online and to fix this error i need to increase the limit size of uploading of WordPress through htaccess file etc. But as i said i am making a theme for themeforest so it will be for commercial use and i can't just fix this error here and then ask users of my theme to do the same to change the limit size of uploading etc. so that fix doesn't work for me

Answer 1

That error messages means a failed admin nonce validation (check_admin_referer, which calls wp_nonce_ays). And you don't actually need an extra nonce here: these are extra fields to be added to existing forms that already have their own nonces, and the one you've added just clashes with them. (If you were adding a new form you would need these, yes.)

So I think the fix is to remove

<?php wp_nonce_field( '_themename_user_extra_fields_verify' ); ?>

and

check_admin_referer( '_themename_user_extra_fields_verify' );

and the forms will still be secure. I don't think you need the user edit permissions check either.

---

That all said, you could implement Facebook and Twitter as extra contact info fields instead:

function wpse_376873_add_contactmethods( $contactmethods ) {
    $contactmethods['facebook'] = __( "Facebook Profile Link", "_themename" );
    $contactmethods['twitter'] = __( "Twitter Profile Link","_themename" );

    return $contactmethods;
}
add_filter( 'user_contactmethods', 'wpse_376873_add_contactmethods', 10, 1 );

and most of this should just work automatically without having to write HTML for the fields. I don't think you can set extra field descriptions though as you have for your own fields.