Front Facing User Profile Editing & Customization with ACF
Advanced Custom Fields (ACF) is a plugin that adds easy access to creating, editing, and maintaining custom meta boxes and fields to Wordpress. Using a very simple API, developers can show the values of these custom fields on the front end of by editing theme template files. The official ACF site has a lot of awesome documentation to show you how to use almost every feature included in the plugin, but today we are going to go a little further. Let's take a look at adding custom profile fields to users in the backend and create a way for logged in users to edit that information without going to the dashboard.
I'm going to make some assumptions that you already know the basics about how to access, create, and edit field groups and fields.
First we need to add some fields to the default user profiles. I've added three popular fields that are commonly requested for users to update/maintain. A twitter handle, facebook URL, and avatar image. Gone are the days of directing your users to Gravatar to upload a profile image!
The important bit to notice is the new rules that were added with v5. In this case, we are targeting User Forms is equal to Add / Edit. You can also set this to "Register" or "All" if you want to collect this data up front. Personally, I like to keep user registration simple so I've opted out of showing the fields when registering. Another thing to note, is that image field for the avatar is set to upload the photo to the post only and not show the user the entire media library.
Navigating to "Your Profile" in the Wordpress admin area, shows our new fields at the bottom of the page. The Twitter handle has been prefixed with "@" and the Facebook URL is taking advantage of the new URL field type in ACF v5. Pretty nifty huh?
Using the right field for the job will help mitigate user error on the front end. Validation is a key part of user experience. We want the user to correct any problems before shit ever hits the fan. Take advantage of these fields and the built in validation tools given to you. If users are inputting a URL to a youtube video, the link probably shouldn't be over 50 characters. Otherwise they are putting in a URL with a bunch of parameters you might not need. Just something to think about.
For the purposes of this tutorial, I'll be using the TwentyTwelve theme. It's a lot cleaner than 2014 in my opinion, however the principles will be the same for any theme you are modifying.
To take advantage of the acf_form() function (docs), well will need to modify our theme files a bit. I've created a new theme file based on a page and renamed it to page-user-profile.php. User-profile is the slug of my new page where the edit screen will live.
You will need to add the acfformhead() function to the top of your template to use this method. This loads all the necessary styles and scripts needed to display the fields on the front end. It's important to note that the admin stylesheet will be loaded on any page with this function included. Check out the docs on how to remove the de-register the stylsheets.
<?php
acf_form_head();
get_header();
?>Once you've added that to the top of the document, find a suitable place to insert the form. I've chosen to add the form right after the_content() to facilitate adding instructions on the page before the form.
<?php
if ( !is_user_logged_in() ){
echo 'You are not logged in. <br /> <a href="' . get_permalink(31) .'">Log In →</a>';
} else {
$options = array(
'post_id' => 'user_'.$current_user->ID, // $user_profile,
'field_groups' => array(9),
'submit_value' => 'Update Profile'
);
echo '<p>Your username is <b>'.$current_user->user_login.'</b>. This cannot be changed.</p>';
acf_form( $options );
}
?>Above we have some pretty easy to digest stuff going on. First, we check to see if the user is logged in. If they aren't we show the error and provide a link to log in. I'm passing the getpermalink() function with the ID of the login page I have already set up. If the user is logged in, we set up and display the form. acfform() requires an array of parameters to retrieve and render the form. The post ID can be any ID from wordpress, from posts, to pages, comments, or users. Wordpress stores the user ID in a string called 'user#' where the # is the unique ID of the user. If we don't append "user" to the front of the user ID, ACF will look for a post/page with the same numeric ID instead.
Next I've used the field groups parameter to pull in all the fields from the field group with the post ID of 9. As of v5, ACF stores fields and field groups as custom post types, so you can reference them using their unique post ID's. Mine just happens to be 9. You can find this number in the URL on the field group edit page. Finally I've set a custom submit value for the form. This is just to customize it a bit for the users. I think the normal value is "Save."
I've also shown the username of whoever is logged in. It's good to show users that kind of information, even if they can't change it. You can access the username from the $current_user global variable.
Now let's check this bad boy out on the front end!
Awesome! There are our three fields. There are some styling and placement issues, but you get the idea. You can upload an image and input some information. After saving some info, navigate back to the admin area and see in the information on your user profile page. Now let's check out what happens if a user isn't logged in.
Perfect! Not the most beautiful, but you get the idea. The fun doesn't stop here though. Front end forms are a powerful feature, and ACF v5 has provided a lot of flexibility for users to customize exactly what fields get shown to the user on the front end. Be sure to check out the ACF docs for more info.
I recently started participating in a new sub-reddit, if you are into that kind of thing, solely devoted to ACF. Stop by and join the discussion. I will post my new blog entries there if they relate to the ACF community.
If you have any questions, be sure to leave a comment somewhere.