User

This User field type (e.g. ACF User field) is useful for creating relationships between data objects. It stores its value as the WordPress user ID.

1. How to use it

Select the user field from your field Group.

2. Displaying user details (Pro)

Displaying a simple user link is minimalist, but in many cases, you may want to show more details about the selected user(s). For example, besides the user’s name, you might also want to display their bio, website, and avatar, with the avatar being an ACF Image field attached to the user.

Users are displayed with their details.

To display user details, follow these steps:

1. Use the AVF Pro Edition: Ensure you have the AVF Pro edition, which allows you to customize the appearance of object fields.

2. Create the Primary View: Start by creating the main View, which will act as the master View. Choose the target user field as save the View.

3. Create a ‘User Details’ View:

   This View will be responsible for displaying user details.

   In the Fields tab, select the user fields you want to display, such as the display name, bio, website, and avatar (an ACF Image field).

4. Save the 'User Details' View: After setting up the fields, save the 'User Details' View.

5. Link the Views:

   Go back to the primary (master) View.

   In the User field settings, select the 'User Details' View in the 'View' setting.

6. Save the Master View: Save the master View to complete the setup.

7. Customize as Needed: Now, each chosen user in the User field will be displayed according to the 'User Details' View. You can further customize the markup and add CSS styles as needed.

That's it! By following these steps, you can display detailed user information and have full control over the layout and styling.

As a list

To display all the items in a single row, you can use the CSS Flexbox:

#view__users {
display: flex;
gap: 10px;
}

As a grid

To display all the items as a grid, you can use the CSS Grid:

#view__users {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
 }

@media screen and (min-width:992px) {
 #view__users {
  grid-template-columns: repeat(4, 1fr);
 }
}

3. Displaying user's slider (Pro)

AVF comes with a set of pre-configured JS libraries, so you can easily turn the user items into a slider. Before activating the slider feature, read the 'displaying user details' section to learn how to setup the details look for each item.

After adding the User field to the target View, change the 'Enable Slider' option to 'Splide v4' and press the Save button. It'll automatically change the field markup to incorporate the necessary classes, and add the default JS instance:

var users_field = this.querySelector('.acf-view__users');
if (users_field) {
	/* https://splidejs.com/guides/options/ */
	new Splide(users_field, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

You can customize it according to your needs, using any available Splide options.

4. Displaying posts of the chosen user (Pro)

In addition to displaying user details, it can be valuable to query and display all posts or products related to a specific user. For example, let's say you have WooCommerce Products and an ACF User field called "Vendor" assigned to them. On a single product page, you might want to display all products linked to the same user.

To achieve this, you should create a Card with a Meta Filters and use dynamic injection to retrieve the field value dynamically. This approach allows the Card to query all products made by the user chosen in the current product's field.

5. See it in action

Visit the Playground and Navigate to Display Meta fields > Relationship fields.