Advanced Custom Fields (ACF) provides out of the box much-needed functionality for adding custom fields to the WordPress core. It is the most popular custom fields plugin for WordPress at the time of writing this post, and has been for years.

The ACF provides a file field form. This allows us to easily create a custom field to allow users to upload files, then we attach it to a specific custom post-type, and finally display the file URL within the post-type it was attached to, easily. Very easily. At Zedafrica we have used this workflow to build complex document repositories and even user-submitted forms. Very easily.

The challenge though comes in, when there is a need for event tracking (and there should be), and even more, being able to track the number of downloads the ACF files get, and display this number as a counter.

To track advanced custom fields (ACF) file field downloads and display them as a counter, you can use the following steps:

1. Create a custom field in ACF to store the download count for each file. You can do this by going to the ACF plugin settings, clicking on the “Custom Fields” tab, and then adding a new field. Choose the “Number” field type and give it a name like “Download Count”.
2. In your WordPress theme, modify the template file that displays the ACF file field to include the download count field and a link to the file. You can do this by accessing the template file through the WordPress dashboard and adding the following code:

// Get the download count field value
$download_count = get_field('download_count');

// Get the file field value
$file = get_field('file');

// Display the download count and file download link
echo '<div class="download-counter">';
echo '<span class="counter">' . $download_count . '</span>';
echo '<a href="' . $file['url'] . '" class="download-link">Download</a>';
echo '</div>';

3. Use a plugin or custom code to track and update the download count field value each time the file is downloaded. There are several WordPress plugins that can help with this, such as Advanced Custom Fields: File Field Notes. Alternatively, you can use custom code to track the downloads and update the field value. One way to do this is by using the “wp_footer” action hook to add a script that increments the download count field value when the download link is clicked.
4. Style the download counter and download link using CSS to match your website’s design. You can add CSS styles to the template file or to your theme’s stylesheet file to customize the appearance of the download counter and download link.

Here is an example of custom code that you can use to track and update the download count field value each time the file is downloaded:

1. Add the following code to your theme’s functions.php file to create a new action hook that will be used to update the download count field value:

function update_download_count() {
  // Get the current post ID
  $post_id = get_the_ID();

  // Get the download count field value
  $download_count = get_field('download_count', $post_id);

  // Increment the download count field value by 1
  $download_count++;

  // Update the download count field value
  update_field('download_count', $download_count, $post_id);
}
add_action('wp_footer', 'update_download_count');

2. Add the following script to your theme’s template file, just before the closing </body> tag, to trigger the update_download_count action when the download link is clicked:

<script>
  jQuery(document).ready(function($) {
    // Select the download link
    $('.download-link').click(function() {
      // Trigger the update_download_count action
      $(document).trigger('update_download_count');
    });
  });
</script>