How to customize the fields output on profile page

Introduced in version 1.2.0 a new filter has been added that allows developers to customize the output of the field value into the user's profile page. An example of how the filter works, can be seen into the plugin's source code in file filters.php into the subfolder includes/fields/ or live here  https://github.com/alessandrotesoro/wp-user-manager/blob/origin/master/includes/fields/filters.php

In the above file, I'm using the filter twice to modify the output of the user website field and the first name and last name field.

For the user website field, I'm modifying the output from a simple text string to an html link.

For the first name and last name fields, I'm modifying the output to append or prepend the user first name or last name so that it can be displayed in full.

How the filter works 

The  wpum_get_the_field_value filter passes 2 arguments, the $value saved into the database and the object containing information about the field $field.

Example of a custom field customization

In this example I will guide you through the customization of a checkboxes field created through the Custom Fields addon. This example will show you how you can style the list and create a "tags cloud" like design instead of a simple comma separated list.

1) Create the field

Assuming you're using the Custom Fields addon, create a checkboxes field and set it up like this  https://www.dropbox.com/s/kd59tmrco7y5ak7/wpumcf_example_1.png?dl=0

As you can see I've created a sample "skills" field where the user can select his skills.

2) The default output

Visiting the account editing page, you'll now see the new field:

Select a few options from the list and then save your profile changes.

If you now visit your public profile page, you'll notice that the selected skills appear as a comma separated list.

3) Changing the output

By default the comma separated list does not have any special html tags. This means that customizing the design via css is almost impossible. To facilitate customization we're going to wrap each skill into a span html tag and then style them through css.

Let's start by editing the output through the newly introduced filter. Add the following snippet at the bottom of your theme's functions.php file:

function wpum_custom_field_output( $value, $field ) {

	return $value;
	
}
add_filter( 'wpum_get_the_field_value', 'wpum_custom_field_output', 10, 2 );

It's important that every time you use the filter, you return the $value variable. Not doing so, will break other fields output too. You can use the $field variable to check that you're editing the correct field's output.

Adding the above code will produce no change on the frontend, it's simply returning it's original value. Now we proceed by detecting that we're editing our custom field. We can do so by checking the field meta key. When I've created the field, the meta key was set to field_13. So we modify the code in this way.

function wpum_custom_field_output( $value, $field ) {

	if( $field->meta == 'wpum_field_13' ) {
		$value = 'test';
	}

	return $value;

}
add_filter( 'wpum_get_the_field_value', 'wpum_custom_field_output', 10, 2 );

In the above example, I'm replacing the original value with the word "test". If you check the public profile page, you'll now see the word "test" appearing instead of the selected skills.

4) Creating the tag cloud

As previously mentioned, we're going to wrap each skill into a span tag. To do so, we need to convert the existing value into an array. Because we know the list is separated by a comma, we can use the explode php function to convert it to an array. We then do a foreach loop and wrap each single skill into the array into a span tag and append it to the $value variable.

function wpum_custom_field_output( $value, $field ) {

	if( $field->meta == 'wpum_field_13' ) {

		$skills = explode( ',', $value );
		$value = ''; // Reset value to an empty string so we can add html in it.

		foreach ( $skills as $skill ) {
			$skill = str_replace(' ', '', $skill); // remove white spaces.
			$value .= '<span class="skill">'. esc_html( $skill ) .'</span>';
		}

	}

	return $value;

}
add_filter( 'wpum_get_the_field_value', 'wpum_custom_field_output', 10, 2 );

Most of the job is now done.

If you now check your public profile page, you'll see the skills wrapped into a span without a comma.

5) Css customization

The last step is to use css and create a tag cloud like design. For the purpose of this tutorial I will make it very easy, your imagination is your only limit in terms of customizations.

As you can see in the previous snippet, I've added a "skill" class to each span. You can use that class via css to customize it's style.

.skill {
	background: #f5f5f5;
	color: #000;
	padding: 5px;
	border-radius:3px;
	margin-right: 10px;
}

You can add the above css to your theme's style.css file or through any custom css plugin.

If you've followed every step correctly, your public profile page should now display the list like this:

You can use this method to customize the output of every field to anything you want.