How to Use Custom Fields with Advanced Custom Fields (ACF)

Advanced Custom Fields (ACF) is one of the most popular plugins for adding custom fields to WordPress. It allows you to extend the default WordPress fields (like Title, Content, etc.) by adding your own fields that you can use to display custom data in posts, pages, custom post types, or any other WordPress entity. Using ACF, you can easily create and manage custom fields with a user-friendly interface. In this guide, we’ll walk through how to use custom fields with ACF, from installation to displaying the custom fields in your templates.

1. Installing Advanced Custom Fields (ACF)

To start using ACF, the first step is to install the plugin:

1. Go to your WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for Advanced Custom Fields.
4. Click on the Install Now button and then Activate the plugin.

You can choose between the free version (ACF) and the pro version (ACF Pro). ACF Pro provides additional field types like Repeater Fields, Flexible Content Fields, and more.

2. Creating Custom Fields with ACF

Once ACF is installed, you can start creating custom fields that allow you to add additional content to posts, pages, or custom post types.

Step 1: Create a Field Group

1. From the WordPress Dashboard, go to Custom Fields in the left-hand sidebar.
2. Click Add New to create a new Field Group.
3. Give your Field Group a name (e.g., “Product Details” or “Event Information”).

Step 2: Add Custom Fields to the Group

1. After naming your field group, click Add Field to create individual custom fields.
2. For each field, you’ll need to define:
   • Field Label: The label for the field that will be displayed in the admin area.
   • Field Name: A unique name for the field, which will be used to retrieve the value later. (e.g., product_price, event_date, etc.)
   • Field Type: Choose the type of field, such as Text, Text Area, Image, Date Picker, etc.
   • Instructions: Optional text that helps the user understand how to fill in the field.

For example, if you’re creating a “Product Details” section, you might add the following fields:

• Product Price (Field Type: Number)
• Product Image (Field Type: Image)
• Product Description (Field Type: Text Area)

Step 3: Set Display Rules

You can choose when the custom fields should appear by setting Location Rules. For example:

• Show the custom fields only for a specific Post Type (e.g., Posts, Pages, Products).
• You can also filter by User Role, Category, or other criteria.

For example, you could set a rule to display the “Product Details” field group only on posts of the “Product” post type.

Step 4: Publish the Field Group

Once you’ve added all the fields you need, click Publish to save the field group. The fields will now be available for the selected post types (e.g., Pages, Posts, Custom Post Types).

3. Adding Data to Custom Fields

Once you have created your custom fields, you can add data to them in the WordPress post or page editor:

1. Edit the post or page where the custom fields should appear.
2. Scroll down to the Custom Fields section (it may be at the bottom or on the sidebar, depending on your WordPress version).
3. You’ll see the custom fields you created under the Field Group. Fill in the values for these fields.

For example, when editing a product, you will see the “Product Price”, “Product Image”, and “Product Description” fields. You can input the price, upload an image, and add a description.

4. Displaying Custom Field Data in Your Theme

After adding data to your custom fields, the next step is to display this data in the front-end of your website (e.g., on a page, post, or custom post type).

You’ll need to modify your theme files (e.g., single.php, page.php, or a custom template) to display the custom field data.

Step 1: Retrieve Custom Field Data

To display the data from your custom fields, you’ll use ACF’s get_field() function. The syntax is:

$value = get_field('field_name');

Where 'field_name' is the Field Name you assigned to the custom field in ACF.

Step 2: Display Custom Field Data

Now that you have the value of the custom field, you can display it in your template. For example, if you have a custom field for Product Price and Product Image, you could display them like this:

<?php
$product_price = get_field('product_price');
$product_image = get_field('product_image');

if ($product_price) {
    echo '<p>Price: $' . esc_html($product_price) . '</p>';
}

if ($product_image) {
    echo '<img src="' . esc_url($product_image['url']) . '" alt="' . esc_attr($product_image['alt']) . '">';
}
?>

In this example:

• get_field('product_price') retrieves the product price from the custom field and displays it.
• get_field('product_image') retrieves the image URL and alt text, which is then used to display the image.

Step 3: Handling Different Field Types

ACF provides different types of fields, and each has a slightly different way of retrieving and displaying data:

• Text, Text Area, and Number Fields: These fields return the raw value (e.g., string, number), and you can directly echo it. phpCopy$value = get_field('my_text_field'); echo $value;
• Image Field: If you’re using an Image field, the return value will be an array containing multiple image properties (e.g., URL, ALT text, size). You can retrieve it like this: phpCopy$image = get_field('my_image_field'); if ($image) { echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '">'; }
• Date Picker Field: If you’re using a Date Picker, you’ll get a date string in the format YYYY-MM-DD. You can format it using date() if needed: phpCopy$date = get_field('event_date'); echo date('F j, Y', strtotime($date));
• Relationship and Post Object Fields: If you’re using a Relationship or Post Object field, you’ll need to retrieve the related post data like this: phpCopy$related_post = get_field('related_post'); if ($related_post) { echo '<a href="' . get_permalink($related_post->ID) . '">' . get_the_title($related_post->ID) . '</a>'; }

5. Displaying ACF Fields in WordPress Loops

If you’re displaying custom fields inside the WordPress loop (e.g., on a blog page or custom post type archive), you can do it like this:

if (have_posts()) :
    while (have_posts()) : the_post();
        $custom_field_value = get_field('custom_field_name');
        if ($custom_field_value) {
            echo '<p>' . esc_html($custom_field_value) . '</p>';
        }
    endwhile;
endif;

This loop will display the value of your custom field for each post in the loop.

6. Using ACF Pro Features (Optional)

If you’re using ACF Pro, you get access to more advanced field types like Repeater, Flexible Content, and Gallery fields, which allow you to create more complex and flexible custom fields. These field types enable you to store and display multiple values (like a list of items or a set of flexible content blocks).

For example, with a Repeater field, you can create multiple items (e.g., a list of product features) and loop through them like this:

if (have_rows('product_features')) :
    while (have_rows('product_features')) : the_row();
        $feature_name = get_sub_field('feature_name');
        $feature_description = get_sub_field('feature_description');
        echo '<h4>' . esc_html($feature_name) . '</h4>';
        echo '<p>' . esc_html($feature_description) . '</p>';
    endwhile;
endif;

This code loops through each “feature” and displays its name and description.

Conclusion

ACF is a powerful and user-friendly tool for adding custom fields to WordPress. By following the steps above, you can easily create and manage custom fields, and display them on the front-end of your website. Whether you’re using basic text fields or advanced field types like Repeater and Flexible Content, ACF provides the flexibility to customize WordPress to suit your needs.

• Install ACF.
• Create custom field groups.
• Add data to custom fields.
• Display the custom field data on the front-end.

With ACF, the possibilities are endless, and you can make WordPress much more dynamic and tailored to your website’s needs.