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)

Sometimes, instead of displaying the user as a link, you may need to display some fields of the selected user with your current Layout. 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. With Advanced Views Pro, you can do this.

Users displayed with their details.

To display user details, follow these steps:

1. Install the Advanced Views Pro plugin, which allows you to customize the appearance of object fields.

2. Create the Primary Layout: Start by creating the main Layout. Choose the field User (WordPress) Group, then the Bio field and publish to save your Layout.

3. Create a ‘User Details’ Layout:

   This Layout will be responsible for displaying user details.

   In the Fields tab, assign the user fields you want to display, such as the Name and Bio.

4. Publish the 'User Details' Layout: After assigning the fields, save the 'User Details' Layout.

5. Select the Field Layout:

   Go back to the primary (main) Layout.

   In the field row, select the Layout in the 'Field Layout' dropdown.

6. Save the Primary Layout: Save the main Layout to complete the setup.

7. Customize as Needed: Now, each chosen User will be displayed according to the Layout chosen in the Field Layout. You can further customize the markup and add CSS styles as needed in the CSS & JS tab.

That's it! By following these steps, you can display detailed user information and have full control over the display 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)

Advanced Views 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 Layout, change the 'Enable Slider' option to 'Splide v4' and Save. 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 Post Selection with Meta Filters and use dynamic injection to retrieve the field value dynamically. This approach allows the Post Selection 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.