Displaying and Editing User Profile Fields from ACF on the Front End

I was recently faced with the task of adding custom fields to my user profiles in WordPress and needed them to be both displayed and editable on the front end. The idea is that my users could change those fields themselves without being redirected to the backend admin section of the site. I wanted to achieve this with Advanced Custom Fields using the “Current User” role settings.

Researching this led me down a path to this website: https://usersinsights.com/acf-user-profile/ which is a tutorial on how to accomplish this and display the entire custom field group. I didn’t want to display the entire group, though. I wanted to display a singular field (or multiple) but no the entire group. This would allow me to break them up into sections as I see fit.

Displaying Editable Fields

You can put this code into the page template you want your members to be able to edit their profile on. For additional details, you can visit this page: https://www.advancedcustomfields.com/resources/acf_form/ which will give you more options on what to add to your fields.

Dissecting the code below you need to include the acf_form_head at before the rest of the snippet. If you want to display the entire field group just remove the // before “field_groups” and change the array ID to your group number. For individual custom fields just add your field ID to the array where it says ‘fields’ . Dump this code in a template file and you are good to go.

<?php acf_form_head(); ?>

<?php // https://www.advancedcustomfields.com/resources/acf_form/  ?>
	<?php acf_form(array(
        'post_id'       => $current_user,
        'form' => true,
        'form_attributes' => array(),
        'post_title'    => false,
        //'field_groups' => array(251),
        'fields' => array('user_test_field'),
		'return' => add_query_arg( 'updated', 'true', get_permalink() ),
        'submit_value'  => __('Update Profile')
    )); ?>

Displaying Profile Fields

If you want to display your profile fields on the front end but not in an editable format use the follow code:

	<?php $current_user = wp_get_current_user(); ?>  
	<?php the_field('user_test_field', 'user_' . $current_user->ID); ?>		

The will get the ID of the current user and the find the field you want to display. Just switch out “user_test_field” with your field and ID. Add this to a page in your theme and it should work.