This tutorial explains how to submit custom user metadata and then display it on the User Profile screen in the WordPress Admin Area. This technique requires USP Pro version 2.2 or better.

Step 1

Add the following code snippet via your theme’s functions.php file:

// shortcode to add custom user metadata field
function usp_custom_user_meta_field($atts) {
	
	extract(shortcode_atts(array(
		'name'        => 'usp-custom-user-meta',
		'label'       => 'Awesome Level',
		'placeholder' => 'Awesome Level',
		'required'    => 'true',
		'custom'      => '',
		'length'      => '99',
	), $atts, 'usp_awesome_level'));
	
	$required = ($required === 'true') ? ' data-required="true" required="required"' : '';
	
	$content  = '<fieldset class="usp-fieldset usp-fieldset-default">';
	$content .= '<label for="'. $name .'" class="usp-label">'. $label .'</label>';
	$content .= '<input id="'. $name .'" name="'. $name .'" maxlength="'. $length .'" value="" type="text" placeholder="'. $placeholder .'" class="usp-input"'. $required .' '. $custom .'/>';
	$content .= '</fieldset>';

	return $content;
}
add_shortcode('usp_awesome_level', 'usp_custom_user_meta_field');

Once added, this code creates a shortcode that you can add to any USP Form:

[usp_awesome_level]

This shortcode will display the input field that is necessary to collect the custom user data. You can customize it using the following attributes:

  • name — value of the name attribute
  • label — value of the <label> tag
  • placeholder — value for the placeholder attribute
  • required — whether or not the field is required
  • custom — any custom attributes for the input tag
  • length — value for the maxlength attribute

Here is an example showing these attributes in play:

[usp_awesome_level name="usp-custom-1" label="Favorite Movie" placeholder="Favorite Movie" required="true" length="99"]

Note: the name attribute must be prefixed with usp-custom- if using a default Custom Field. To use a Custom Field name that is not prefixed with usp-custom-, you must define it as explained here.

Step 2

Here there are two possibilities:

  • Add the custom user data via registration form
  • Add the custom user data via post-submission form

So the code to use for this step will depend on which of these types of forms you are using. Let’s look at each, in order.

User Registration Form

If using a registration form, add this snippet to your theme’s functions.php file:

// add custom user metadata to user meta
function usp_add_custom_user_meta($args) {
	
	if (!empty($args['usp_error_register'])) return;
	
	$awesome = isset($_POST['usp-custom-user-meta']) ? sanitize_text_field($_POST['usp-custom-user-meta']) : '';
	
	if (empty($awesome)) return;
	
	$user_id = isset($args['user_id']) ? $args['user_id'] : null;
	
	if (isset($user_id)) add_user_meta($user_id, 'usp_user_meta_awesome', $awesome);
	else return;
	
}
add_action('usp_register_user_after', 'usp_add_custom_user_meta');

Once added, this code adds the submitted data to the user’s metadata when the user first registers for the site.

Post-Submission Form

Or, if using a post-submission form, add this snippet to your theme’s functions.php file:

// add custom user metadata to user meta
function usp_add_custom_user_meta($fields, $user_id, $logged_cats, $default_tags, $default_cats, $custom_type) {
	
	$awesome = isset($_POST['usp-custom-user-meta']) ? sanitize_text_field($_POST['usp-custom-user-meta']) : '';
	
	if (empty($awesome)) return;
	
	if (!empty($user_id)) add_user_meta($user_id, 'usp_user_meta_awesome', $awesome);
	else return;
	
}
add_action('usp_submit_post_before', 'usp_add_custom_user_meta', 10, 6);

Once added, this code adds the submitted data to the user’s metadata when the logged-in user submits their first post.

Step 3

Lastly, add this snippet to your theme’s functions.php file:

// display custom user metadata in user profile
function usp_display_custom_user_meta($user) {
	
	if (!isset($user->ID)) return;
	
	$awesome = get_user_meta($user->ID, 'usp_user_meta_awesome', true);
	
	if (!empty($awesome)) : ?>
		
		<h3>Awesome Level</h3>
		
		<table class="form-table">
			<tr>
				<th>How much awesome?</th>
				<td><?php echo esc_html($awesome); ?></td>
			</tr>
		</table>
		
<?php endif; 
}
add_action('show_user_profile', 'usp_display_custom_user_meta');
add_action('edit_user_profile', 'usp_display_custom_user_meta');

Once added, this code displays the submitted user metadata in the user’s Profile, which is located in the WP Admin Area via the Users screen.

Step 4

Done! That’s all there is to it: add those three snippets and you’re good to go. You can verify proper functionality by submitting some test posts and visiting the User Profile screen for the user that submitted the posts.

This tutorial is meant to provide a working example showing how to add custom user metadata via USP Pro. The technique is very basic and meant to serve as a starting point for further customization and implementation.

References & Resources