User Profile / Add Custom Fields

1 Views

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:

http://wpengineer.com/2173/custom-fields-wordpress-user-profile/

Read More

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.

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. 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 javascript enabled browser

    Field with non JavaScript browser

    field with javascript disabled browser

  2. My advice is: Don’t game/hack the system. Create content where the core devs want you to; the reason why you want to have the fields exactly there is probably not a good one for circumventing WordPress’ flow.

    Use the action hook profile_personal_options to put a new section for the settings you need on the page. This is not only technically sound but also clearer for users (that know what WP normally looks like).

  3. For me Hameedullah Khan answer worked well. I’ve made just a little fix because my new fields have broken the page layout. So in the jquery code I’ve added 

    jQuery(document).ready(function($) {
            field = $('#custom_user_field_row').remove();
            field.insertBefore('#password');
            $('#custom_user_field_row').wrapAll('<tr><td colspan="2"></td></tr>');
        });

    to keep the table aligned.

  4. Since you can’t really do this, I would recommend using the Theme My Login plugin, a very simple member plugin which will just create “log-in”, “log-out” and “profile” pages that will fit the customization of your theme. You’ll be able to change the order of the fields as you wish in a distinct file that you can add in your child theme, so you won’t have any trouble if something goes wrong.

    The only thing is that your profile won’t be visible anymore at user-edit.php but at your-profile.php.