How to add custom fields to the user settings page?

Summary

1. Create new tab with fields (Add custom fields to a new tab)
2. Create new section with fields (Add new sections with fields to 'Account' tab)
  • New section at the beginning of the page
  • New section between 'Registration Data' and 'Address'
  • New section at the bottom of the page
3. Create new fields at the beginning of existing sections, but change the structure (Add new fields to the beginning of existing sections in the "Account" tab)
  • New fields at the beginning of the 'Registration Data' section
  • New fields at the beginning of the 'Address' section
4. Create new fields at the beginning of existing sections, but keep the structure (Add new fields to the structure of existing sections on the "Account" tab)
  • New fields at the beginning of the 'Registration Data' section
  • New fields at the end of the 'Registration Data' section
  • New fields at the end of the 'Address' section
  • Rearrange the fields inside section
5. Create new fields on the "Payments" tab (Add new fields in the 'Payments' tab)
6. Show the field value


Add custom fields to a new tab

To add a new custom tab containing your fields, use the following code:
// Add tab slug
add_filter( 'wpj_user_settings_tab_filter', 'wpj_user_settings_my_custom_field_tab_slug_name', 10, 1 );
function wpj_user_settings_my_custom_field_tab_slug_name( $tabs ) {
	$tabs[] = 'my-custom-field-tab-slug';
	return $tabs;
}

// Add tab name
add_action( 'wpj_user_settings_add_tab_name', 'wpj_user_settings_my_custom_field_tab_label_name', 10, 1 );
function wpj_user_settings_my_custom_field_tab_label_name( $pg ) { ?>

	<div class="item force-white-btn <?php echo 'my-custom-field-tab-slug' == wpj_get_current_tab_user_settings() ? 'active' : ''; ?>" data-tab="my-custom-field-tab-slug">
		<?php _e( "My custom tab name", "wpjobster" ); ?>
	</div>

<?php }

// Show fields to created tab
add_action( 'wpj_user_settings_add_tab_content', 'wpj_user_settings_my_custom_field_tab_content', 10, 2 );
function wpj_user_settings_my_custom_field_tab_content( $pg, $user_id ) {
	if ( $pg == 'my-custom-field-tab-slug' ) { ?>

		<!-- One field per row -->
		<div class="field">
			<label><?php _e( 'Field 1 label', 'wpjobster' ); ?></label>
			<input type="text" name="field1_name" value="<?php echo empty( $_POST['field1_name'] ) ? stripslashes( user( $user_id, 'field1_name' ) ) : stripslashes( $_POST['field1_name'] ); ?>" placeholder="<?php _e( 'Field 1 palceholder', 'wpjobster' ); ?>" />
		</div>

		<!-- Two fields per row -->
		<div class="two fields">
			<div class="field">
				<label><?php _e( 'Field 2 label', 'wpjobster' ); ?></label>
				<input type="text" name="field2_name" value="<?php echo empty( $_POST['field2_name'] ) ? stripslashes( user( $user_id, 'field2_name' ) ) : stripslashes( $_POST['field2_name'] ); ?>" placeholder="<?php _e( 'Field 2 palceholder', 'wpjobster' ); ?>" />
			</div>

			<div class="field">
				<label><?php _e( 'Field 3 label', 'wpjobster' ); ?></label>
				<input type="text" name="field3_name" value="<?php echo empty( $_POST['field3_name'] ) ? stripslashes( user( $user_id, 'field3_name' ) ) : stripslashes( $_POST['field3_name'] ); ?>" placeholder="<?php _e( 'Field 3 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>

	<?php }
}

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_save_custom_fields', 10, 1 );
function wpj_user_settings_save_custom_fields( $user_id ) {

	update_user_meta( $user_id, 'field1_name', WPJ_Form::post( 'field1_name' ) );
	update_user_meta( $user_id, 'field2_name', WPJ_Form::post( 'field2_name' ) );
	update_user_meta( $user_id, 'field3_name', WPJ_Form::post( 'field3_name' ) );

}
The above code will be reflected as follows:

Original size


Add new sections with fields to 'Account' tab

To add a new section containing your fields to the 'Account' tab, use the following code:
A new section at the beginning of the page (before 'Registration Data' section)
// New section at the beginning of the page
add_action( 'wpj_user_profile_account_tab_before_fields_action', 'wpj_user_settings_new_section_beginning_fnc', 10, 1 );
function wpj_user_settings_new_section_beginning_fnc( $user_id ) { ?>

	<h4 class="ui dividing header custom-section-data-lbl"><?php echo __( 'My custom section name', 'wpjobster' ); ?></h4>

	<div class="two fields wrap-fix">

		<div class="field">
			<label><?php echo __( 'Field 4 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field4_name" value="<?php echo empty( $_POST['field4_name'] ) ? stripslashes( user( $user_id, 'field4_name' ) ) : stripslashes( $_POST['field4_name'] ); ?>" placeholder="<?php _e( 'Field 4 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>

		<div class="field">
			<label><?php echo __( 'Field 5 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field5_name" value="<?php echo empty( $_POST['field5_name'] ) ? stripslashes( user( $user_id, 'field5_name' ) ) : stripslashes( $_POST['field5_name'] ); ?>" placeholder="<?php _e( 'Field 5 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>

	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_section_beginning_save_fnc', 10, 1 );
function wpj_user_settings_new_section_beginning_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field4_name', WPJ_Form::post( 'field4_name' ) );
	update_user_meta( $user_id, 'field5_name', WPJ_Form::post( 'field5_name' ) );
}
A new section between 'Registration Data' and 'Address' sections
// New section between 'Registration Data' and 'Address' sections
add_action( 'wpj_user_profile_account_tab_beetwen_fields_action', 'wpj_user_settings_new_section_between_fnc', 10, 1 );
function wpj_user_settings_new_section_between_fnc( $user_id ) { ?>

	<h4 class="ui dividing header custom-section-2-data-lbl"><?php echo __( 'My custom section 2 name', 'wpjobster' ); ?></h4>

	<div class="field">
		<label><?php _e( 'Field 6 label', 'wpjobster' ); ?></label>
		<div class="input-relative">
			<input type="text" name="field6_name" value="<?php echo empty( $_POST['field6_name'] ) ? stripslashes( user( $user_id, 'field6_name' ) ) : stripslashes( $_POST['field6_name'] ); ?>" placeholder="<?php _e( 'Field 6 palceholder', 'wpjobster' ); ?>" />
		</div>
	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_section_between_save_fnc', 10, 1 );
function wpj_user_settings_new_section_between_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field6_name', WPJ_Form::post( 'field6_name' ) );
}
A new section at the end of the page
// New section at the end of the page
add_action( 'wpjobster_user_profile_extra_fields_display', 'wpj_user_settings_new_section_end_fnc', 10, 1 );
function wpj_user_settings_new_section_end_fnc( $user_id ) { ?>

	<h4 class="ui dividing header custom-section-2-data-lbl"><?php echo __( 'My custom section 3 name', 'wpjobster' ); ?></h4>

	<div class="three fields">

		<div class="field">
			<label><?php _e( 'Field 7 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field7_name" value="<?php echo empty( $_POST['field7_name'] ) ? stripslashes( user( $user_id, 'field7_name' ) ) : stripslashes( $_POST['field7_name'] ); ?>" placeholder="<?php _e( 'Field 7 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>

		<div class="field">
			<label><?php _e( 'Field 8 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field8_name" value="<?php echo empty( $_POST['field8_name'] ) ? stripslashes( user( $user_id, 'field8_name' ) ) : stripslashes( $_POST['field8_name'] ); ?>" placeholder="<?php _e( 'Field 8 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>

		<div class="field">
			<label><?php _e( 'Field 9 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field9_name" value="<?php echo empty( $_POST['field9_name'] ) ? stripslashes( user( $user_id, 'field9_name' ) ) : stripslashes( $_POST['field9_name'] ); ?>" placeholder="<?php _e( 'Field 9 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>

	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_section_end_save_fnc', 10, 1 );
function wpj_user_settings_new_section_end_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field7_name', WPJ_Form::post( 'field7_name' ) );
	update_user_meta( $user_id, 'field8_name', WPJ_Form::post( 'field8_name' ) );
	update_user_meta( $user_id, 'field9_name', WPJ_Form::post( 'field9_name' ) );
}
The above code will be reflected as follows:


Add new fields to the beginning of existing sections in the "Account" tab

To add new fields to the beginning of existing sections in the 'Account' tab but with other structure than 'two per row', use the following code:
New fields at the beginning of the 'Registration Data' section but with other structure than two fields per row
// New fields at the beginning of the 'Registration Data' section but with other structure than two fields per row
add_action( 'wpj_user_profile_account_tab_after_first_subtitle_action', 'wpj_user_settings_new_fields_after_registration_title_fnc', 10, 1 );
function wpj_user_settings_new_fields_after_registration_title_fnc( $user_id ) { ?>


	<div class="three fields">
		<div class="field">
			<label><?php _e( 'Field 10 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field10_name" value="<?php echo empty( $_POST['field10_name'] ) ? stripslashes( user( $user_id, 'field10_name' ) ) : stripslashes( $_POST['field10_name'] ); ?>" placeholder="<?php _e( 'Field 10 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>


		<div class="field">
			<label><?php _e( 'Field 11 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field11_name" value="<?php echo empty( $_POST['field11_name'] ) ? stripslashes( user( $user_id, 'field11_name' ) ) : stripslashes( $_POST['field11_name'] ); ?>" placeholder="<?php _e( 'Field 11 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>


		<div class="field">
			<label><?php _e( 'Field 12 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field12_name" value="<?php echo empty( $_POST['field12_name'] ) ? stripslashes( user( $user_id, 'field12_name' ) ) : stripslashes( $_POST['field12_name'] ); ?>" placeholder="<?php _e( 'Field 12 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>
	</div>


<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_fields_after_registration_title_save_fnc', 10, 1 );
function wpj_user_settings_new_fields_after_registration_title_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field10_name', WPJ_Form::post( 'field10_name' ) );
	update_user_meta( $user_id, 'field11_name', WPJ_Form::post( 'field11_name' ) );
	update_user_meta( $user_id, 'field12_name', WPJ_Form::post( 'field12_name' ) );
}
New fields at the beginning of the 'Address' section but with other structure than two fields per row
// New fields at the beginning of the 'Address' section but with other structure than two fields per row
add_action( 'wpj_user_profile_account_tab_after_second_subtitle_action', 'wpj_user_settings_new_fields_after_address_title_fnc', 10, 1 );
function wpj_user_settings_new_fields_after_address_title_fnc( $user_id ) { ?>


	<div class="three fields">
		<div class="field">
			<label><?php _e( 'Field 13 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field13_name" value="<?php echo empty( $_POST['field13_name'] ) ? stripslashes( user( $user_id, 'field13_name' ) ) : stripslashes( $_POST['field13_name'] ); ?>" placeholder="<?php _e( 'Field 13 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>


		<div class="field">
			<label><?php _e( 'Field 14 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field14_name" value="<?php echo empty( $_POST['field14_name'] ) ? stripslashes( user( $user_id, 'field14_name' ) ) : stripslashes( $_POST['field14_name'] ); ?>" placeholder="<?php _e( 'Field 14 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>


		<div class="field">
			<label><?php _e( 'Field 15 label', 'wpjobster' ); ?></label>
			<div class="input-relative">
				<input type="text" name="field15_name" value="<?php echo empty( $_POST['field15_name'] ) ? stripslashes( user( $user_id, 'field15_name' ) ) : stripslashes( $_POST['field15_name'] ); ?>" placeholder="<?php _e( 'Field 15 palceholder', 'wpjobster' ); ?>" />
			</div>
		</div>
	</div>


<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_fields_after_address_title_save_fnc', 10, 1 );
function wpj_user_settings_new_fields_after_address_title_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field13_name', WPJ_Form::post( 'field13_name' ) );
	update_user_meta( $user_id, 'field14_name', WPJ_Form::post( 'field14_name' ) );
	update_user_meta( $user_id, 'field15_name', WPJ_Form::post( 'field15_name' ) );
}
The above code will be reflected as follows:


Add new fields to the structure of existing sections on the "Account" tab

To add new fields to the structure (two per row) of existing sections on the "Account" tab , use the following code
New fields at the beginning of the 'Registration Data' section
// New fields at the beginning of the 'Registration Data' section
add_action( 'wpjobster_before_user_profile_registration_fields_action', 'wpj_user_settings_new_fields_registration_beginning_fnc', 10, 1 );
function wpj_user_settings_new_fields_registration_beginning_fnc( $user_id ) { ?>

	<div class="field field16-class">
		<label><?php echo __( 'Field 16 label', 'wpjobster' ); ?></label>
		<div class="input-relative">
			<input type="text" name="field16_name" value="<?php echo empty( $_POST['field16_name'] ) ? stripslashes( user( $user_id, 'field16_name' ) ) : stripslashes( $_POST['field16_name'] ); ?>" placeholder="<?php _e( 'Field 16 palceholder', 'wpjobster' ); ?>" />
		</div>
	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_fields_registration_beginning_save_fnc', 10, 1 );
function wpj_user_settings_new_fields_registration_beginning_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field16_name', WPJ_Form::post( 'field16_name' ) );
}
New fields at the end of the 'Registration Data' section
// New fields at the end of the 'Registration Data' section
add_action( 'wpjobster_after_user_profile_registration_fields_action', 'wpj_user_settings_new_fields_registration_end_fnc', 10, 1 );
function wpj_user_settings_new_fields_registration_end_fnc( $user_id ) { ?>

	<div class="field field17-class">
		<label><?php echo __( 'Field 17 label', 'wpjobster' ); ?></label>
		<div class="input-relative">
			<input type="text" name="field17_name" value="<?php echo empty( $_POST['field17_name'] ) ? stripslashes( user( $user_id, 'field17_name' ) ) : stripslashes( $_POST['field17_name'] ); ?>" placeholder="<?php _e( 'Field 17 palceholder', 'wpjobster' ); ?>" />
		</div>
	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_fields_registration_end_save_fnc', 10, 1 );
function wpj_user_settings_new_fields_registration_end_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field17_name', WPJ_Form::post( 'field17_name' ) );
}
New fields at the beginning of the 'Address' section
// New fields at the beginning of the 'Address' section
add_action( 'wpjobster_before_user_profile_address_fields_action', 'wpj_user_settings_new_fields_address_beginning_fnc', 10, 1 );
function wpj_user_settings_new_fields_address_beginning_fnc( $user_id ) { ?>

	<div class="field field18-class">
		<label><?php echo __( 'Field 18 label', 'wpjobster' ); ?></label>
		<div class="input-relative">
			<input type="text" name="field18_name" value="<?php echo empty( $_POST['field18_name'] ) ? stripslashes( user( $user_id, 'field18_name' ) ) : stripslashes( $_POST['field18_name'] ); ?>" placeholder="<?php _e( 'Field 18 palceholder', 'wpjobster' ); ?>" />
		</div>
	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_fields_address_beginning_save_fnc', 10, 1 );
function wpj_user_settings_new_fields_address_beginning_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field18_name', WPJ_Form::post( 'field18_name' ) );
}
New fields at the end of the 'Address' section
// New fields at the end of the 'Address' section
add_action( 'wpjobster_after_user_profile_address_fields_action', 'wpj_user_settings_new_fields_address_end_fnc', 10, 1 );
function wpj_user_settings_new_fields_address_end_fnc( $user_id ) { ?>

	<div class="field field19-class">
		<label><?php echo __( 'Field 19 label', 'wpjobster' ); ?></label>
		<div class="input-relative">
			<input type="text" name="field19_name" value="<?php echo empty( $_POST['field19_name'] ) ? stripslashes( user( $user_id, 'field19_name' ) ) : stripslashes( $_POST['field19_name'] ); ?>" placeholder="<?php _e( 'Field 19 palceholder', 'wpjobster' ); ?>" />
		</div>
	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_user_profile_extra_fields_update', 'wpj_user_settings_new_fields_address_end_save_fnc', 10, 1 );
function wpj_user_settings_new_fields_address_end_save_fnc( $user_id ) {
	update_user_meta( $user_id, 'field19_name', WPJ_Form::post( 'field19_name' ) );
}
To arrange the order of the fields in a section, enter the following code:
add_action( 'wpj_user_profile_account_tab_before_fields_action', 'wpj_arrange_registration_data_fields' );
function wpj_arrange_registration_data_fields( $user_id ) { ?>

	<!-- Registration data -->
	<style>
		.field17-class    { order: 1; }
		.last-name-field  { order: 2; }
		.email-field      { order: 3; }
		.first-name-field { order: 4; }
		.field16-class    { order: 5; }
		.phone-field      { order: 6; }
		.tax-field        { order: 7; }
		.company-field    { order: 8; }
	</style>

	<!-- Address -->
	<style>
		.field19-class            { order: 1; }
		.country-field            { order: 2; }
		.zip-field                { order: 3; }
		.preferred-language-field { order: 4; }
		.timezone-field           { order: 5; }
		.state-field              { order: 6; }
		.city-field               { order: 7; }
		.field18-class            { order: 8; }
	</style>

<?php }


Add new fields in the 'Payments' tab

To add new fields to the "Payments" tab , use the following code
/* Add custom fields to 'Payments' tab */
add_action( 'wpjobster_show_withdraw_personalinfo_gateway', 'wpj_user_settings_show_payment_custom_fields', 9, 1 );
function wpj_user_settings_show_payment_custom_fields( $user_id ) { ?>

	<!-- Three fields row -->
	<div class="field">

		<label><?php _e( 'My new field label', 'wpjobster' ); ?></label>

		<div class="three fields">

			<div class="field">
				<input type="text" name="field20_name" value="<?php echo empty( $_POST['field20_name'] ) ? stripslashes( user( $user_id, 'field20_name' ) ) : stripslashes( $_POST['field20_name'] ); ?>" placeholder="<?php _e( 'Field 20 palceholder', 'wpjobster' ); ?>" />
			</div>

			<div class="field">
				<input type="text" name="field21_name" value="<?php echo empty( $_POST['field21_name'] ) ? stripslashes( user( $user_id, 'field21_name' ) ) : stripslashes( $_POST['field21_name'] ); ?>" placeholder="<?php _e( 'Field 21 palceholder', 'wpjobster' ); ?>" />
			</div>

			<div class="field">
				<input type="text" name="field22_name" value="<?php echo empty( $_POST['field22_name'] ) ? stripslashes( user( $user_id, 'field22_name' ) ) : stripslashes( $_POST['field22_name'] ); ?>" placeholder="<?php _e( 'Field 22 palceholder', 'wpjobster' ); ?>" />
			</div>

		</div>

	</div>

	<!-- Two fields row -->
	<div class="field">

		<label><?php _e( 'My new field2 label', 'wpjobster' ); ?></label>

		<div class="two fields">

			<div class="field">
				<input type="text" name="field23_name" value="<?php echo empty( $_POST['field23_name'] ) ? stripslashes( user( $user_id, 'field23_name' ) ) : stripslashes( $_POST['field23_name'] ); ?>" placeholder="<?php _e( 'Field 23 palceholder', 'wpjobster' ); ?>" />
			</div>

			<div class="field">
				<input type="text" name="field24_name" value="<?php echo empty( $_POST['field24_name'] ) ? stripslashes( user( $user_id, 'field24_name' ) ) : stripslashes( $_POST['field24_name'] ); ?>" placeholder="<?php _e( 'Field 24 palceholder', 'wpjobster' ); ?>" />
			</div>

		</div>

	</div>

	<!-- One field row -->
	<div class="field">
		<label><?php _e( 'My new field3 label', 'wpjobster' ); ?></label>
		<input type="text" name="field25_name" value="<?php echo empty( $_POST['field25_name'] ) ? stripslashes( user( $user_id, 'field25_name' ) ) : stripslashes( $_POST['field25_name'] ); ?>" placeholder="<?php _e( 'Field 25 palceholder', 'wpjobster' ); ?>" />
	</div>

	<!-- Field without label -->
	<div class="field">
		<input type="text" name="field26_name" value="<?php echo empty( $_POST['field26_name'] ) ? stripslashes( user( $user_id, 'field26_name' ) ) : stripslashes( $_POST['field26_name'] ); ?>" placeholder="<?php _e( 'Field without label', 'wpjobster' ); ?>" />
	</div>

<?php }

// Save fields to database
add_action( 'wpjobster_save_withdraw_personalinfo_gateway', 'wpj_user_settings_save_payment_custom_fields', 9, 1 );
function wpj_user_settings_save_payment_custom_fields( $user_id ) {
	update_user_meta( $user_id, 'field20_name', WPJ_Form::post( 'field20_name' ) );
	update_user_meta( $user_id, 'field21_name', WPJ_Form::post( 'field21_name' ) );
	update_user_meta( $user_id, 'field22_name', WPJ_Form::post( 'field22_name' ) );
	update_user_meta( $user_id, 'field23_name', WPJ_Form::post( 'field23_name' ) );
	update_user_meta( $user_id, 'field24_name', WPJ_Form::post( 'field24_name' ) );
	update_user_meta( $user_id, 'field25_name', WPJ_Form::post( 'field25_name' ) );
	update_user_meta( $user_id, 'field26_name', WPJ_Form::post( 'field26_name' ) );
}


Show the field value

To show the field value use the following code:
echo stripslashes( user( $user_id, 'field1_name' ) );<br>