User Profiles - Advanced Custom Fields

User Profiles - You can do that with Advanced Custom Fields?

After recently working on a new online booking website for Makeup and Mane, we came across solving the problem of staff-user profiles.

We wanted to create a solution that allowed members of staff to log in to their user account and be able to insert their information that would populate their staff profile page for potential customers to view.

One thing that we didn't want to do was expose the staff members to the WordPress administrator dashboard.

Not because it would be insecure, or because the WordPress administrator dashboard isn't user-friendly, but because we wanted to create a consistent staff editing experience that followed the design of the website's front-end without fighting with the WordPress administrator styles.

Before extending out and implementing our advanced functionality, potentially adding bloat to the current build, we first looked internally at the site and what tools we had available.

One plugin which we use extensively in all of our WordPress builds is Advanced Custom Fields. After a bit of digging around, we found that it's possible to create the user profile functionality purely with ACF's.

Not only would relying on the plugin provide some much-needed functionality, but it would ensure the process was secure, authenticate data entered in fields automatically and create a group of flexible user profile fields that the developers could control from the WordPress administrator dashboard.

Prerequisite

• Have a WordPress install
• Have ACF Pro installed
• You will need to include acf_head(); in your page header. This function will register the necessary assets (CSS/JS), process the saved data, and redirect the URL. This function does not accept any parameters.

Creating the User Fields

Before we dive deep into the functions, ACF (Advanced Custom Fields) offers our users. We first want to create the fields that they will enter information into.

For this post, we'll be looking at three different fields -

• Avatar Image (Image)
• Twitter Handle (Text)
• LinkedIn Link (URL)

In our configuration, we have created a new Fields Group called 'User Fields' and included the fields aforementioned above.

Be sure to set the image to use the 'uploaded to post' library to limit the user's image library to images that have only been uploaded by the current user.

When adding a location, be sure to select from the group of values under 'User' and target the user role that you want to have access to the fields. For this example, we are using the role 'editor', but it will work with any role you choose.

Including the Fields in Your Site

Once you have published the new fields group, you should have access to the fields within the WordPress administrator dashboard, under the 'users' tab.

If you go into 'users', then 'edit profile', you'll see a group of new fields that you've just created!

You can throw in the applicable information related to the fields as shown above. ACF by default has authentication on these fields to ensure the correct data is being entered. Try adding in a text string instead of a URL into the LinkedIn Link field, and you'll see a warning that the data entered is not a valid URL.

So now you've got your fields, and your content. Let us get it showing on your site.

ACF documentation covers showing custom fields related to an account using the user ID.

We found that the author pages were the logical place to display the information set for users. On author pages, we can query the author meta information to get ahold of the user ID and use it in our ACF functions.

ACF User/Author ID Example

<?php
acf_form_head();
get_header();
$author_id = get_the_author_meta('ID');
$avatar_image= get_field('avatar_image', 'user_'. $author_id );
$linkedin_link= get_field('linkedin_link', 'user_'. $author_id );
$twitter_handle= get_field('twitter_handle', 'user_'. $author_id );
?>

<img src="<?php echo $avatar_image['url']; ?>" alt="<?php echo $avatar_image['alt']; ?>" />
<a href="<?php echo $linkedin_link; ?>">LinkedIn</a>
<a href="https://twitter.com/<?php echo $twitter_handle; ?>">Twitter</a>

Using the code above in the author.php template file, we were able to query the user's profile for the user ID, then use that ID to grab the information entered in the administrator dashboard.

Now I can hear you already saying, "that's all well and good, but how do I get it so that the user doesn't have to be in the administrator dashboard? I thought that was the whole point of the article!"

We've been setting the foundations for the bespoke user editing portion of the site. If you've followed the above steps then you've completed most of the work already!

Building the User Editing Experience

Before we getting into the editing experience, lets put together some assumptions. We want -

• The user to be logged in to the site
• The user to have a role that matches our ACF role
• To display the custom fields from our User Fields ACF Group

To do this, we're going to be creating a page called `Edit Profile` with the slug `edit-profile`. We then created a PHP file in our theme called `page-edit-profile.php` where we will add the functions required for the editing experience.

To begin with, our PHP code is going to check that the user is first logged in with the use of the `is_user_logged_in` function that will return false or true. If true, we will begin the next step fo the requirements of our code.

<?php
if (is_user_logged_in())
{
}
?>

Next, we want to access the user's logged in user role. We can do this by obtaining the global variable $current_user and assessing the wp_get_current_user object, examining the role property. If the property is equal to 'editor' we will continue executing code; otherwise we can add error handling to inform the user of insufficient permissions.

global $current_user;
$user = wp_get_current_user();
$role = ( array )$user->roles;
$role = $role[0];
if ($role === "editor") {
// Echo Form
} else {
// Error Handling
}

Finally, we will create the form which allows users to edit their profile fields. The form is created using an ACF function `acf_form`, this function can be passed a number of arguments which will shape what fields are populated in the form.

For our example, we used the following -

$options = array(
'post_id' => 'user_' . $current_user->ID,
'field_groups' => array(
427
) ,
'submit_value' => 'Update Profile'
);
acf_form($options);
}

The ACF function `acf_form` is using the `post_id` equal to our user profiles user_id property. We created the global variable $current_user when accessing the user roles/permissions.

Next, we are accessing the User Field Group. You'll need to explicitly state the field group's ID by going into your ACF plugin group editor and clicking 'edit'. When in editing mode, you should notice an ID in the URL of your browser, ours is 427 but will almost definitely be different when you are creating the field group.

The last property entered in the arguments of this function is the 'submit_value' property, this is the text displayed in the save/submit button of the form.

The acf_form function can pass in a s**t tonne of arguments and properties, we recommend viewing the full documentation for a detailed breakdown in what you can do with the function.

Accessing the ACF Form

If a user is logged in to the site, with 'editor' role assigned to the account, they will now be presented with an ACF form at the site URL, followed by `/edit-profile`.

That's it, and you've now got a page on your WordPress site that allows editors to freely update their profile fields, without the need to access the back-end of the website. The primary benefit is that you can now style the containers and fields for the form freely with CSS files.

This post is only the tip of what you can do with the ACF form, and we'd be excited to see how you implement it in your site. Leave us a comment with a link to your website or tweet at us and show us a screen-grab of your custom editor area!

Our Finished Product

We implemented the steps found in this post and extended it with additional fields for the Makeup and Mane staff.

This allows for easy update of relevant information to a staff members profile with an interface that feels native to the theme design.