User Profile / Add Custom Fields

Hello: I am trying to add 7 custom fields to the standard WordPress wp-admin/profile.php page. There are a few site which suggest a simple bit of code to do this, for example:

Adding Custom Fields to WordPress User Profile

But, I want to be able to add my custom fields so that they appear exactly below the “Biographical Info” box and above the “change password” field. Everything I have read and tried places custom fields at the bottom of the page, but I want them to appear between the “Biographical Info” box and above the “change password” field.

How can I do this? Is it possible? Does this involve using javascript as well? Please advise. Thank you.

There is no WordPress way to add fields between user’s bio and password, but as you said your self you can do it the javascript way. Below is the code that adds single field to give you an example on how you can achieve the same.

NOTE: The code below only display the fields but does not process any information or save the field values, because that part is same as described in the article linked in the question.

Add the fields

Place the code below in your functions.php to display the fields.

function wpse39285_add_custom_user_profile_fields( $user ) {
?>
    <table id="custom_user_field_table" class="form-table">
        <tr id="custom_user_field_row">
            <th>
                <label for="custom_field"><?php _e('Field', 'your_textdomain'); ?></label>
            </th>
            <td>
                <input type="text" name="custom_field" id="custom_field" value="<?php echo esc_attr( get_the_author_meta( 'custom_field', $user->ID ) ); ?>" class="regular-text" /><br />
                <span class="description"><?php _e('Please enter your custom_field value.', 'your_textdomain'); ?></span>
            </td>
        </tr>
    </table>
<?php 
}
add_action( 'show_user_profile', 'wpse39285_add_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'wpse39285_add_custom_user_profile_fields' );

The above code will place your custom fields after the password fields.

Move the fields

The code below inserts a javascript in WordPress Admin head only if the user is view their own profile or an admin is editing someone else’s profile.

function wpse39285_field_placement_js() {
    $screen = get_current_screen();
    if ( $screen->id != "profile" && $screen->id != "user-edit" ) 
        return;
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            field = $('#custom_user_field_row').remove();
            field.insertBefore('#password');
        });
    </script>
    <?php
}
add_action( 'admin_head', 'wpse39285_field_placement_js' );

The above javascript will make the field move to between the password and bio fields. In case user is viewing the page from non-javascript browser the fields will not be moved and will show up as they do by default.

Field with JavaScript enabled browser

Field with non JavaScript browser