Displaying and Saving ACF Fields in Business Profiles

This documentation outlines how to create and manage Advanced Custom Fields (ACF) in a WordPress business profile context. It provides a general approach to rendering, saving, and displaying custom fields created with ACF in a business profile, ensuring the code is flexible and avoids potential errors.

Step 1: Define the ACF Field Group

First, create the ACF field group and define the fields you need for the business profile. Below is an example of how to create a field group with a couple of fields:

add_action( 'acf/include_fields', function() {
    if ( ! function_exists( 'acf_add_local_field_group' ) ) {
        return;
    }

    acf_add_local_field_group( array(
        'key' => 'group_1234567890abc',
        'title' => 'Business Information',
        'fields' => array(
            array(
                'key' => 'field_1234567890def',
                'label' => 'Website',
                'name' => 'website',
                'type' => 'url',
                'instructions' => 'Enter the website URL',
                'required' => 0,
                'conditional_logic' => 0,
                'wrapper' => array(
                    'width' => '',
                    'class' => '',
                    'id' => '',
                ),
                'default_value' => '',
                'placeholder' => 'https://example.com',
            ),
            array(
                'key' => 'field_1234567890ghi',
                'label' => 'Year Founded',
                'name' => 'year_founded',
                'type' => 'number',
                'instructions' => 'Enter the year the business was founded',
                'required' => 0,
                'conditional_logic' => 0,
                'wrapper' => array(
                    'width' => '',
                    'class' => '',
                    'id' => '',
                ),
                'default_value' => '',
                'placeholder' => '',
                'min' => 1900,
                'max' => date('Y'),
            ),
        ),
        'location' => array(
            array(
                array(
                    'param' => 'post_type',
                    'operator' => '==',
                    'value' => 'business',
                ),
            ),
        ),
        'menu_order' => 0,
        'position' => 'normal',
        'style' => 'default',
        'label_placement' => 'top',
        'instruction_placement' => 'label',
        'hide_on_screen' => '',
        'active' => true,
        'description' => '',
        'show_in_rest' => 0,
    ) );
} );

Step 2: Retrieve and Render ACF Fields

The following functions allow you to dynamically retrieve and render the ACF fields on the business profile page.

// Define a constant for the ACF group key
define('WBCOM_ACF_BUSINESS_INFO_GROUP_KEY', 'group_1234567890abc');

/**
 * Get ACF Business Information group fields
 *
 * @return array|false
 */
function wbcom_get_business_info_group_fields() {
    if (function_exists('acf_get_fields')) {
        $fields = acf_get_fields(WBCOM_ACF_BUSINESS_INFO_GROUP_KEY);
        return is_array($fields) ? $fields : false;
    }
    return false; // Return false if ACF function does not exist
}

/**
 * Display ACF Business Information fields in the contact tab
 *
 * @return void
 */
function wbcom_display_business_info_fields_in_contact() {
    if (function_exists('acf_form_head')) {
        acf_form_head();    
    }

    $fields = wbcom_get_business_info_group_fields();

    if (!empty($fields)) {
        acf_render_fields($fields, get_the_ID());
    } else {
        // Handle the case where no fields are found or an error occurred
        echo '<p>No fields available to display.</p>';
    }
}
add_action('business_profile_after_contact_info', 'wbcom_display_business_info_fields_in_contact');

Step 3: Save ACF Field Data

Use the following function to save the data entered in the ACF fields when the business profile is updated.

/**
 * Save ACF Business Information fields
 *
 * @param int $post_id
 * @return void
 */
function wbcom_save_business_info_fields($post_id) {
    if (isset($_POST['acf']) && !empty($_POST['acf'])) {
        foreach ($_POST['acf'] as $field_key => $field_value) {
            $field = function_exists('get_field_object') ? get_field_object($field_key) : null;

            if ($field) {
                switch ($field['type']) {
                    case 'text':
                    case 'textarea':
                    case 'email':
                    case 'url':
                        update_field($field_key, sanitize_text_field($field_value), $post_id);
                        break;
                    case 'number':
                        update_field($field_key, floatval($field_value), $post_id);
                        break;
                    default:
                        update_field($field_key, $field_value, $post_id);
                        break;
                }
            }
        }
    }
}
add_action('save_post', 'wbcom_save_business_info_fields', 99, 1);

Step 4: Display ACF Fields on the Frontend

Finally, display the saved ACF fields on the frontend of the business profile page. The following function can be hooked into the appropriate action to render the fields.

/**
 * Show ACF Business Information fields in the about section
 *
 * @return void
 */
function wbcom_show_business_info_fields_in_about_section() {
    $fields = wbcom_get_business_info_group_fields();

    if (!empty($fields)) {
        foreach ($fields as $field) {
            $value = get_field($field['name'], get_the_ID());
            if (!empty($value)) {
                echo '<h2>' . esc_html($field['label']) . '</h2>';

                switch ($field['type']) {
                    case 'url':
                        echo '<p><a href="' . esc_url($value) . '" target="_blank">' . esc_html($value) . '</a></p>';
                        break;
                    default:
                        echo '<p>' . esc_html($value) . '</p>';
                        break;
                }
            }
        }
    }
}
add_action('bp_business_profile_after_render_contact_info', 'wbcom_show_business_info_fields_in_about_section');

Summary

This general approach allows you to easily create, render, save, and display ACF fields within a WordPress business profile. By following this pattern, you ensure that your custom fields are handled safely, and the code is flexible enough to adapt to additional fields or changes in field types. The checks implemented throughout the functions help prevent fatal errors and improve the stability of your code.